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 S3 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 says is "error:device not found".

Anyone have any ideas on how to do this?

Solution 1

for Remote Debugging on Android with Chrome: try this https://developer.chrome.com/devtools/docs/remote-debugging

Solution 2

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 voila!

Solution 3

Update: 8-20-2015

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

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 S3 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", then run adb kill-server and then try again.

Solution 4

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 locahost: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 under Reverse Port Forwarding section of this site: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Solution 5

I have an S3 and used this guide from Google:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Really easy, works flawlessly.

View more solutions