Recently, I was working on a side project with some friends. Unfortunately, my PC was damaged during the covid-19 epidemic and I couldn’t fix it due to shutting down, so I had to use codes on my cell phone.
Somehow, my code works well offline, but for some reason, it did not work well
And then I will need a dev tool to access the console and check for errors.
Some minutes later, I found it very possible to access the dev tool for mobile browsers via Eruda
As there is no official tool available for debugging web applications in mobile browsers. Js library called Neruda fulfills this desire to remove errors in web applications on mobile devices.
Below is how you can do open the dev tool on chrome mobile browser Inspect on Mobile
Step 1: Bookmark your current page by clicking the star ⭐ symbol from the Chrome menu. After doing this, you should see a toast message Bookmarked with an edit button:
Click the edit option and change the bookmark details.
URL (copy and paste code below): Inspect on Mobile
javascript: (function () {
var script = document.createElement(“script”);
script.src = “//cdn.jsdelivr.net/npm/eruda”;
document.body.appendChild(script);
script.onload = function () {
eruda.init();
};
})();
Step 2 :
- Visit The web page you want to inspect the mode
- Enter the Mobile Dev Tool Open keyword in the search bar (you should see the page we previously booked with the URL starting with javascript: …) click the URL
- Wait 3 seconds for the USDA icon to appear below
- Click on the Tool icon to open your Inspect tool
The features found in inspect mode
- Console: Show JavaScript logs.
- Items: Check the domain status.
- Network: Show application status.
- App: Display Local Storage, cookie info.
- Information: Display URL, user agent information.
- Captions: Add the most used captions.
- Sources: Html, js, CSS source viewer.
0 Comments