CODEWITHSUNDEEP
androidgoogle-chromechrome-for-android
James Anderson
James Anderson

Reputation: 815

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

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?

Upvotes: 34

Views: 191086

Answers (6)

Adrian Ber
Adrian Ber

Reputation: 21370

Mainly follow the guide here https://developer.chrome.com/docs/devtools/remote-debugging (formerly 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.

Upvotes: 1

Matt Gaunt
Matt Gaunt

Reputation: 9821

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

Upvotes: 9

Panama Jack
Panama Jack

Reputation: 24448

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.

Upvotes: 17

Roumelis George
Roumelis George

Reputation: 6746

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.

Upvotes: 0

stinkycheeseman
stinkycheeseman

Reputation: 45737

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

Upvotes: 37

egfconnor
egfconnor

Reputation: 2647

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.

Upvotes: 0

Related Questions