DEV Community

Cover image for How To Access Dev Tool On Mobile Browsers

How To Access Dev Tool On Mobile Browsers

Recently, I was working on a side project with some friends. Unfortunately my PC had been damaged during the covid-19 pandemic and I couldn't get to fix it because of the lock-down, so I had to resort to coding on my mobile phone πŸ€¦πŸΎβ€β™‚οΈ.

Somehow, my code works perfectly offline, but for some reasons, it did not go well online πŸ€’
And of course I'll be needing dev tool to access the console and check for errors.

Some minutes of googling later, I discovered it's very much possible to access the dev tool on mobile browsers with Eruda πŸŽ‰

Below is how you can do open the dev tool on chrome mobile browser

Step 0

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:

IMG_20200424_180749_459.jpg

Click the edit option and change the bookmark details to the following:

Name:

Mobile Dev Tool

URL (copy and paste code below):



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

Enter fullscreen mode Exit fullscreen mode




Step 1

  • Visit the web page you want to inspect
  • Enter the keyword Mobile Dev Tool into the search bar(you should see the page we bookmarked before with the url starting with javascript:...) click on the URL

Dev Tool On Android - Eruda

  • Wait for 3 Seconds for the Eruda icon to appear like below

DevTool on Android - Eruda

  • Click on the icon to open your dev tool

Dev Tool On Android - Eruda

  • Enjoy! πŸŽ‰

Here's what you can do with the Eruda dev tool

  • View javascript console
  • Inspect element
  • Track Ajax requests
  • View website source files
  • Change CSS directly from web page
  • And other awesome features

Conclusion

Eruda is an open sourced javascript package publicly hosted on github here and contributions are welcomed.
If you'd found this article useful, c'mon show some love and share with your friends πŸ€—

Finally, I share and retweet tech stuffs on Twitter too follow me @asaolu_elijah

Thanks for reading ❀️

Top comments (17)

Collapse
 
upieez profile image
Samuel Huang

You need to share how you did all your coding on the phone! I think that's the bigger achievement here πŸ˜‚

Collapse
 
asaoluelijah profile image
Asaolu Elijah πŸ§™β€β™‚οΈ

Lol πŸ˜… I'll probably write an article about that too 🀹

Collapse
 
mihaelagiurescu profile image
mihaela-giurescu

This is so cool, Asaolu! Thanks for making this extremely cool tool. I'm really new to everything code and programming so hopefully this question might help other beginners like me and not be very trivial, but is there a way to edit the source code (not the element alone, which I noticed it is possible) of the inspected pages and then also save the html locally?

Collapse
 
aajunior88 profile image
Ayuba Abdullahi Jr

Super Useful

Collapse
 
r3tter profile image
Yaroslav

Thanks 😊

Collapse
 
poopbutt83 profile image
Alicia Beckham

Does this still work?

Collapse
 
asaoluelijah profile image
Asaolu Elijah πŸ§™β€β™‚οΈ

Yes, Alicia

Collapse
 
aralroca profile image
Aral Roca

This is very useful πŸ˜„πŸ‘

Collapse
 
creatrixpe profile image
Away with Words (CreatrixPE)

The logo used to appear, but I can't get it to appear anymore. I used the bookmark, and I also made sure that chrome didn't omit the "JavaScript" part, to no avail. Why is it no longer working?

Collapse
 
joydeep-bhowmik profile image
Joydeep Bhowmik

Same for me

Collapse
 
asifsimform profile image
Asif Vora

Awesome ❀️

Collapse
 
dhyfer1 profile image
Dhyfer1

In the latest version of Chrome for Android, it is not possible to edit the bookmark or the bookmark URL

Collapse
 
hasan18850676 profile image
Hasan

This method does not work in Chrome Android browser for blockchain web wallet .... can anyone help in blockchain vol web version how to display console settings ?? !!