How can I inspect element in an Android browser?

Question

I want to inspect my website CSS/HTML elements in my Android browser.

However it will be over a smartphone or the Android SDK.

What is the best way to do it?

Morgenthaler

possible duplicate of Inspect UI elements in Android – Porte

Answer 1

Chrome on Android makes it possible to use the Chrome developer tools on the desktop to inspect the HTML that was loaded from the Chrome application on the Android device.

See: https://developer.chrome.com/docs/devtools/remote-debugging/

Fra

I'm ok with this, however I would be happier if I was able to do this in the Android Browser, not Chrome, mainly because Chrome already works great and... you know, compatibility issues make me have to downgrade stuff, but I have no way of testing it :( – Beezer

@Beezer Take a look into jshybugger.com . It's currently the best solution for debugging Android Browser. – Miguelmiguela

@PaulIrish At the time of this post, I kept looking, and found weinre, and it works really good once you are able to handle it :) – Beezer

@Paul Irish - it downloads some fresh food finder app, I dont get – Softshoe

This answer requires the use of a desktop computer, which kinda defeats the whole point of doing it on mobile. I can just open Chrome's dev tools on the desktop if I have to connect my phone to it, anyway. – Forgetmenot

The link is no longer up to date as it loads a general devtools docs page. Nothing about remote debugging per se. – Petronilapetronilla

Answer 2

Had to debug a site for native Android browser and came here. So I tried weinre on an OS X 10.9 (as weinre server) with Firefox 30.0 (weinre client) and an Android 4.1.2 (target). I'm really, really surprised of the result.

1. Download and install node runtime from http://nodejs.org/download/
2. Install weinre: sudo npm -g install weinre
3. Find out your current IP address at Settings > Network
4. Setup a weinre server on your machine: weinre --boundHost YOUR.IP.ADDRESS.HERE
5. In your browser call: http://YOUR.IP.ADRESS.HERE:8080
6. You'll see a script snippet, place it into your site: <script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
7. Open the debug client in your local browser: http://YOUR.IP.ADDRESS.HERE:8080/client
8. Finally on your Android: call the site you want to inspect (the one with the script inside) and see how it appears as "Target" in your local browser. Now you can open "Elements" or whatever you want.

Maybe 8080 isn't your default port. Then in step 4 you have to call weinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE.

And I don't remember exactly when it was, maybe somewhere after step 5, I had to accept incoming connections prompt, of course.

Happy debugging

P.S. I'm still overwhelmed how good that works. Even elements-highlighting work

Auster

Or use in step 4 weinre --boundHost -all- to bind to all interfaces – Graeme

Also, I had to use ngrok to make a tunnel remotely. Make sure you bind ngrok to the same ip address (and not localhost) or it won't work ngrok http 192.168.0.104:8080 Then use the ngrok url in the script tag. – Rhodie

Thanks so much! Helped to debug a website in UC Browser. Sometimes body tag appeared to be empty in inspector, reloading the page was fixing that. – Accroach

This is excellent, and works well... But this answer led me to a way that you can debug using only an Android device; with no other machine required. Simply install Termux on the Android device, then do "pkg install nodejs" and finally "npm -g install weinre". Then you can continue from Step 4. You'll have a Weinre server running within your Android device and can connect using the Android web browser. – Mentalism

One nowadays needs to fix a Weinre bug too: https://mcmap.net/q/102768/-webrtc-error-with-mime-lookup – Lx

You can install weinre in Android, too. Eg. in Termux: Install Termux from Google Play or F-Droid, run termux and install nodejs-lts (pkg install nodejs-lts), then continue with the 2nd step above (without sudo). – Paley

Answer 3

You can inspect elements of a website in your Android device using Chrome browser.

Open your Chrome browser and go to the website you want to inspect.

Go to the address bar and type "view-source:" before the "HTTP" and reload the page.

The whole elements of the page will be shown.

Append

This does not work for dynamically created elements like those made by javascript – Down

The OP did just ask about inspecting, however what is insinuated is access to the inspector tools. Viewing source is not the same as inspecting elements. Usually one wants to do so in order to make modifications to CSS etc in real time. While this can be done if you connect your Android phone to a desktop, it would be convenient if a user could edit elements without the need of a desktop. – Nationwide

That simply shows the source code, but doesn't actually allow you to inspect the elements (i.e. view the relevant css style information) – Drooff

This is not inspecting element, this is how to view source code. – Acierate

Answer 4

If you want to inspect html, css or maybe you need js console in your mobile browser. You can use excellent tool eruda Using it you have the same Developer Tools on your mobile browser as in your desktop device. Dont forget to upvote :) Here is a link https://github.com/liriliri/eruda

Cantabrigian

Answer 5

Kiwi browser has added the chrome dev tools to its android app.

It allows you to view inspect webpages from a different tab.

Unlike viewing the html source you can view page updates in real time.

You can also use Android split screen and move a tab to a new window so you can see both at the same time.

Penney

Sometime I cannot open developer tool on kiwi browser – Glossography

Answer 6

Simply bookmark this code as a link:

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

and open the bookmark (with searching for the SAVED name in the search bar) after opening the site. The bookmark will appear on your search bar, open it, and you will have inspect element on Android.

Exception