34

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?

James Anderson
  • 815
  • 1
  • 13
  • 23

8 Answers8

37

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!

stinkycheeseman
  • 43,437
  • 7
  • 30
  • 49
21

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

Khaleel Hmoz
  • 987
  • 2
  • 13
  • 24
17

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.

Panama Jack
  • 24,158
  • 10
  • 63
  • 95
  • 1
    Like this solution. Worked for me, I can now show the debugger options from chrome desktop. – MSaudi Jan 02 '14 at 09:03
  • 1
    `Chrome for Mobile - Settings > Developer Tools > [x] Enable USB Web debugging` +1 for this statement alone. – Shouvik Jan 15 '14 at 07:05
9

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

Matt Gaunt
  • 9,434
  • 3
  • 36
  • 57
1

I have an S3 and used this guide from Google:

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

Really easy, works flawlessly.

venutip
  • 163
  • 1
  • 1
  • 6
1

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.
Adrian Ber
  • 20,474
  • 12
  • 67
  • 117
0

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

egfconnor
  • 2,637
  • 1
  • 26
  • 44
  • Yeah I just keep receiving the error "Device not found" when it's sitting right infront of me, plugged in!! I don't understand! – James Anderson Feb 06 '13 at 16:41
  • Yeah I'm not sure if you can get it working. Does simply using a view source app help your case? – egfconnor Feb 06 '13 at 16:56
  • 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. – Urb Gim Tam May 21 '14 at 13:24
0

Keep in mind that if you want to use the 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.

Roumelis George
  • 6,602
  • 2
  • 16
  • 31