How can I perform an inspect element in Chrome on my Galaxy S3 Android device?

Question

How can I perform an inspect element in Chrome on my Galaxy S III Android device?

I've tried a couple of guides online, one saying to use this Android SDK thing to run adb forward tcp:9222 localabstract:chrome_devtools_remote, but all that it says is "error:device not found".

How can I do this?

Noachian

Answer 1

You can now do this without the use of Android SDK.

In the latest version of Chrome (I am working on 34.0.x):

• Navigate to chrome://inspect/
• Check Discover USB Devices
• Plug in your phone via USB. A popup should spawn asking for permission to connect to your computer. Accept it.

There will now be an item on the chrome://inspect/ pages for your phone, and you can click Inspect. Dev tools will spawn and voilà!

Valuate

Answer 2

Please note the instructions have changed since this question was asked.

So on newer versions of Android and Chrome for Android. You need to use this.

https://developers.google.com/web/tools/setup/remote-debugging/remote-debugging?hl=en

Original Answer:

I have the S III and it works fine. I have found that a common mistake is not enabling USB Debugging in Chrome mobile. Not only do you have to enable USB debugging on the device itself under developer options, but you have to go to the Chrome Browser on your phone and enable it in the settings there too.

Try this with the SDK:

1. Chrome for Mobile - Settings → Developer Tools → [x] Enable USB Web debugging

2. Device - Settings → Developer options → [x] USB debugging

3. Connect Device to Computer

4. Enable port forwarding on your computer by doing the following command below

   C:\adb forward tcp:9222 localabstract:chrome_devtools_remote

Go to http://localhost:9222 in Chrome on your computer.

Troubleshooting:

If you get command not found when trying to run ADB, make sure Platform-Tools is in your path or just use the whole path to your SDK and run it:

C:\path-to-SDK\platform-tools\adb forward tcp:9222 localabstract:chrome_devtools_remote

If you get "device not found", run adb kill-server and then try again.

Exuviate

Like this solution. Worked for me, I can now show the debugger options from chrome desktop. – Disbranch

Chrome for Mobile - Settings > Developer Tools > [x] Enable USB Web debugging +1 for this statement alone. – Monosymmetric

Answer 3

To start with you'll need the Android SDK to get started: http://developer.android.com/sdk/index.html but select for existing IDE so you get the tools rather than all of Android Studio.

In Chrome Beta on your Android device do the following:

Menu → Settings → Developer Tools → Enable USB Debugging

Hit the home key on the device and go to Settings → Developer Options → Enable USB Debugging.

(Note: If you can't see Developer Options, go to Settings → About Device. Then tap the Build Number a number of times and eventually you'll see a message saying you are now a developer or something similar.)

Connect your phone to your computer via USB.

On your desktop, open Chrome Canary (I think stable and Beta currently have issues):

In the address bar type: chrome://flags and enable - "Enable Developer Tools experiments" and hit the Relaunch button that appears.

Once it's relaunched open a terminal and run adb devices. You should now see your device appear in the list. When it has, in Canary go to chrome://inspect there you will see your device, so now click inspect.

This will open up devtools for your Chrome on Android.

Now click on the cog in the corner, then go to Experiments → Enable Port Forwarding (if you don't see port forwarding, you might not be in Chrome Beta).

Once port forwarding is enabled, close and open dev tools.

Go back to the cog and select Port Forwarding. Then type in the port you want to forward (i.e., for localhost:9000 on my local machine I'd type 9000 [Device port] and 127.0.0.1:9000 [Target]

There is a bug open where the first port is ignored, so it might be worth hitting enter on the first line and re-entering the same details on the second line.

You can now put localhost:9000 (or your port number) in Chrome for Android and view the site and use DevTools to inspect the page.

More details are under Reverse Port Forwarding section of this site: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Mizzen

The developer.android.com and developers.google.com links are (effectively) broken. They redirect to generic pages. – Ephesian

Answer 4

Mainly follow the guide here https://developers.google.com/chrome-developer-tools/docs/remote-debugging. But ...

• For Samsung devices don't forget to install Samsung Kies.
• For me it worked only with Chrome Canary, not with Chrome.
• You might also need to install Android SDK.

Jauregui

The link is (effectively) broken. It redirects to a generic page. – Ephesian

Answer 5

I wasn't able to ever accomplish this, but rather I used the View HTML source apps available on the Play Store to simply look for the element.

Bowker

Yeah I just keep receiving the error "Device not found" when it's sitting right infront of me, plugged in!! I don't understand! – Noachian

Yeah I'm not sure if you can get it working. Does simply using a view source app help your case? – Bowker

I had the same problem. It's sayd that it doesn't need the ADB anymore, but that's not true, at least for me. I had to open the terminal, and write "adb start-server". Without ADB, it doesn't work. – Rumal

Answer 6

Keep in mind that if you want to use the Google Chrome inspect in Windows, besides enabling USB debugging on you mobile, you should also install the USB driver for Windows.

You can find the drivers you need from the list here:

http://androidxda.com/download-samsung-usb-drivers

Furthermore, you should use a newer version of Chrome mobile than the one in your desktop.

Klina

The link is (effectively) broken. It redirects to a generic page. – Ephesian