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?

Answer 1

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