Devtools in Mobile Browser

I have been surfing over internet and I found a post of asaolu elijah and thought of trying and sharing it here.

As there is no official tool available to debug web applications in mobile browsers. The js library named eruda fulfills this desire to debug web apps in mobile devices.

To do that we need to add the following script as bookmark url.

javascript: (function () {
  var script = document.createElement("script");
  script.src = "//cdn.jsdelivr.net/npm/eruda";
  document.body.appendChild(script);
  script.onload = function () {
    eruda.init();
  };
})();

name the bookmark as Eruda Devtool

eruda bookmark

after adding the script as bookmark, go to a website where you need to use devtool, then in search bar search for Eruda Devtool and click the link, wait for 3 to 5 seconds a gear icon will appear.

search devtools

click on the gear icon and start debugging. (at first icon may appear as dimmed,change it in settings panel)

devtools console
devtools-info

Features available in Eruda are,

  • Console: Display JavaScript logs.
  • Elements: Check dom state.
  • Network: Show requests status.
  • Resource: Show localStorage, cookie information.
  • Info: Show url, user agent info.
  • Snippets: Include snippets used most often.
  • Sources: Html, js, css source viewer.

Although we can use remote debugging to debug if we are using chrome browser.But it requires you to be connected with PC.

Thanks for reading. Follow us on FacebookTwitterInstagram

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.