How to inspect element in android: How to use Web Developer Console in Android

Share this Article 😊👇:

Chrome developer tools Android for Developers introduction.

web developer web devtools

Are you a web developer? You may be searching to enable a web developer console in Android or inspect elements in the Android browser? If yes, then there is a method to open developer Console in Android or open Developer Tools in Chrome Android.

Even if you are not a developer, you should still try this method because it’s really fun.

Now let’s see, how to inspect elements on Android or how to open web developer tools for web developer consoles in Android Chrome or Firefox.

You Might Also Like: Top 5 Best Android Browsers with Extensions Support

What is a web developer console or web developer tools?

chrome developer tools

A web developer tool or web developer console is a built-in tool provided within desktop browsers to edit a webpage, view web page information, or view website source code. There are many more things that you can view of a web page or website using Web Dev Tools.

With help of inspecting elements, you can view elements or edit elements on the front end of a web page. 

What is the shortcut key for Inspect Element?

The shortcut key to inspect element:

Ctrl + Shift + C – Windows

Cmd + Opt + C – Mac

Ctrl + Shift + C – Linux

The shortcut key to open browser console:

Ctrl + Shift + J – Windows

Cmd + Shift + J – Mac

Ctrl + Shift + J – Linux

How to inspect elements in android: how to inspect element in android browser – Inspect element in Android firefox and Chrome or any browser.

how to open web developer console in android - devtools for android

So if your question is, How do I edit a website on Android? Or How do I edit inspect element on Android? So there comes in the inspect element javascript code by Eruda that can help you enable web developer tools for chrome or Firefox in Android mobile browser.

It’s not recommended to edit a website on Android phone using inspect element because the smartphone screen is too small to work to edit a website. That is why an Android tablet would be a better choice to go with instead of an Android phone.

You Might Also Like: How to Download Google Camera latest version for your phone

Inspect element JavaScript code to enable web developer tools on Android mobile: Enable developer tools Chrome & Firefox.

Eruda DevTools Javascript Code:

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

Credit: Inspect Element or Developer Tools Javascript code is developed and owned by Eruda. But it’s open-source and you could use it.

How to get Inspect Element in Android: Enable inspect element in android – Open Chrome Web Developer Tools in Android

Step 1: Copy the inspect element javascript code that is given above.

Step 2: Open a web browser on your Android phone.

Step 3: Visit Googlegoogle.com ) or my website Nooberinfo ( androidnoob.com ).

Step 4: Click on the three dots or three lines menu on the top right inside Chrome, bottom right inside Firefox, and center bottom inside Edge Browser

Then Add the website to Bookmark. Inside Brave Browser, you can bookmark the website using the Bookmark icon at the bottom bar.

Step 5: Now, Edit the Bookmark right away that you have bookmarked. If you missed the Bookmark Edit option, then Redo the bookmark website. After that, the browser will take you to the edit bookmark page.

Step 6: Inside Edit Bookmark, change the name of your liking, and in the website address, paste the code, that you previously copied.

For example:

Name:

Web Dev Tools Android ( Give it a name )

Address:

<Javascript-Code> (paste the copied code)

Step 7: Save the edited Bookmark.

Step 8: Open or visit a website where you want to inspect elements in android.

Step 9: Click on the Website Address bar and delete the current website Address.

Step 10: Type the name of the Edited Bookmark that you saved earlier. Here e.g. “Web Dev Tools Android” and you should see the Bookmark appear.

Step 11: Click on the Edited Bookmark that you saved earlier. After that, check on the right bottom corner. You should see a dev tools logo. The Web Developer Tool has been enabled.

Step 12: Click on the Web Developer Tools logo, and the inspect element will get opened.

To exit Web Developer Tools Android click on Dev Tools Logo again, you will exit from the Web Developer Tools.

Now you are ready to Build or Edit a website or Webpage in Android inside Chrome, Firefox, or any web browser.

There is also a separate command if you want to find out Website source code only, that works with both desktop and mobile.

You Might Also Like: How to Add Google Discover Feed to Home screen

How to view source code of a website or Webpage: How to view source code in mobile Chrome, Firefox, Brave, Opera, or any browser.

Step 1: Visit or open a website you want to check the website or webpage source code.

Step 2: Click on the Website Address bar.

Step 3: Now, add (view-source:) without bracket before the hypertext, which is HTTP or HTTPS.

Step 4: After adding view-source: click enter on the keyboard or click on go or search in the address bar.

Now you can check the source code of a website or a webpage with this simple trick.

By the way, There is no need to visit a website to view source code if you have a website address already in your mind. 

Simply, open a web browser like Chrome or Firefox and type (view-source: ‘website’) for example – view-source:androidnoob.com

Example 2 – view-source:google.com

This is how you inspect elements in android mobile browser or open Web DevTools in Android Chrome.

[ New Update ] Inspect Element in Android with Kiwi Mobile Browser

If you have never heard of Kiwi Mobile Browser then worry not. It is a Chromium-based lightweight web browser for Android. It has many more features than Chrome or Brave.

To inspect elements or open Developer Tools, Open Kiwi Browser then tap on Menu and lastly tap on Developer Tools.

A new window will open with Developer Tools and you can start inspecting or whatever you want to do with that page.

You Might Also Like: How to check ARM Version on Android

Was this post helpful?

Photo of author

Hey! It’s Johnathan Ujjwal Murmu from India. I am a Tech-Enthusiast and a YouTuber, Blogger, and Entrepreneur by Profession. I love technology stuff, inspiring and motivational lines as well. I hope to give you quality content at Android Noob. Check out my other website as well – Nooberinfo. By the way, follow my social links below if you need me for any reason, and also follow our Social Pages and Blog!

Related Posts

Leave a Comment

Android Solution for Noobs.

Follow us on Social Media!

Quick Links

Home
About Us
Contact Us
Contact us Form
Newsletter

Other Links

Sitemap
RSS Feed
Write for us

About Site

Query -

in[email protected]

- Found a Bug?