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?

possible duplicate of [Inspect UI elements in Android](http://stackoverflow.com/questions/8304358/inspect-ui-elements-in-android) — rid, Nov 11 '12 at 10:16

score 62 · Accepted Answer · edited Apr 15 '14 at 22:21

62

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://developers.google.com/chrome-developer-tools/docs/remote-debugging

edited Apr 15 '14 at 22:21

Paul Irish

47,354
22
98
132

answered Nov 11 '12 at 10:16

Michael Aaron Safyan

93,612
16
138
200

15

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 :( – Goodwine Aug 22 '13 at 03:23
3

@Goodwine Take a look into https://www.jshybugger.com/ . It's currently the best solution for debugging Android Browser. – Paul Irish Apr 15 '14 at 22:21
2

@PaulIrish At the time of this post, I kept looking, and found [weinre](http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html), and it works really good once you are able to handle it :) – Goodwine Apr 16 '14 at 13:30
1

@Paul Irish - it downloads some fresh food finder app, I dont get – Dariux Jun 03 '14 at 08:11
5

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. – Kris Craig May 11 '17 at 00:29
The link is no longer up to date as it loads a general devtools docs page. Nothing about remote debugging per se. – Alex Aug 16 '22 at 08:17

score 43 · Answer 2 · edited May 18 '20 at 06:51

43

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.

Download and install node runtime from http://nodejs.org/download/
Install weinre: sudo npm -g install weinre
Find out your current IP address at Settings > Network
Setup a weinre server on your machine: weinre --boundHost YOUR.IP.ADDRESS.HERE
In your browser call: http://YOUR.IP.ADRESS.HERE:8080
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>
Open the debug client in your local browser: http://YOUR.IP.ADDRESS.HERE:8080/client
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

edited May 18 '20 at 06:51

Neuron

5,141
5
38
59

answered Jul 23 '14 at 20:41

leymannx

5,138
5
45
48

1

Or use in step 4 `weinre --boundHost -all-` to bind to all interfaces – awidgery Jul 14 '15 at 10:11
1

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. – Senica Gonzalez Jun 18 '16 at 05:06
1

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. – Julia Oct 06 '16 at 13:21
1

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. – Tom Kerswill May 30 '18 at 19:46
1

One nowadays needs to fix a Weinre bug too: https://stackoverflow.com/a/46426558/694469 – KajMagnus Dec 29 '18 at 07:09
You can install weinre in Android, too. Eg. in Termux: Install Termux from [Google Play](https://play.google.com/store/apps/details?id=com.termux) or [F-Droid](https://f-droid.org/en/packages/com.termux/), run termux and install nodejs-lts (`pkg install nodejs-lts`), then continue with the 2nd step above (without `sudo`). – Tommy Oct 08 '20 at 14:37

score 15 · Answer 3 · edited Apr 16 '18 at 21:10

15

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.

edited Apr 16 '18 at 21:10

JorgeAmVF

1,660
3
21
32

answered Mar 28 '17 at 05:56

maa

381
2
5

23

This does not work for dynamically created elements like those made by javascript – vityavv May 29 '18 at 01:39
14

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. – Jason Silver Jan 24 '19 at 12:45
12

That simply shows the source code, but doesn't actually allow you to inspect the elements (i.e. view the relevant `css` style information) – Chaya Cooper Nov 08 '19 at 00:33
3

This is not inspecting element, this is how to view source code. – Xarcell Jun 23 '20 at 14:54

score 4 · Answer 4 · edited Apr 12 '22 at 12:02

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

edited Apr 12 '22 at 12:02

JinSnow

1,553
4
27
49

answered Dec 27 '20 at 14:56

Наглый Спамер

701
1
8
16

score 1 · Answer 5 · edited Mar 16 '21 at 09:32

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.

KhalfaniW · Answer 6 · 2022-09-14T17:50:02.317

1

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.

edited Sep 14 '22 at 17:50

answered Sep 14 '22 at 16:48

KhalfaniW

211
2
3

Sometime I cannot open developer tool on kiwi browser – Lê Vũ Huy Oct 27 '22 at 09:17

How can I inspect element in an Android browser?

6 Answers6

Linked