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

User · Answer

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.

User · Answer

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   lt script src  http   YOUR IP ADDRESS HERE 8080 target target-script-min js  gt  lt  script gt  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

User · Answer

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

User · Answer

If you want to inspect html  css or maybe you need js console in your mobile browser   You can use excelent tool eruda  Using it you have the same Developer Tools on your mobile browser like in your desctop device  Dont forget to upvote    Here is a link https   github com liriliri eruda

[firebug] How can I inspect element in an Android browser?

Examples related to firebug

Examples related to google-chrome-devtools