How to debug websites on your mobile device using Google Chrome
Be warned, however, you will be expected to download 6+ gigabytes of stuff before the magic begins.
I’ve only tested this on my Samsung Galaxy S6 Edge (running Android 5.1.1) but I believe it also works on an iPhone.
Before connecting your phone to your computer, please ensure you have all of the following software installed;
- A recent version of the Java Development Kit (JDK)
- Android Software Development Kit (SDK)
- Android SDK Platform Tools
- If you have a Samsung mobile device, ensure you have the Samsung Android USB Driver for Windows installed. If you don’t please download a suitable driver for your device. Google maintains a helpful (although not comprehensive) list of drivers to help you out.
Set up your device
Setting up your device is pretty simple. Start by connecting it to your computer with a USB cable and activate “Developer Mode” via the settings menu. Rather than explain all the individal steps, just follow this helpful guide.
Time to start debugging
If you haven’t already done so, go ahead and connect your device to your PC via USB cable.
Launch Google Chrome on your device, and launch Google Chrome on your computer. Navigate to chrome://inspect and your device should be listed.
If your device is not listed, you probably need to restart the ADB server. Run the commands as shown below from a standard or administrator command prompt;
If you still cannot see your device listed, please check out the troubleshooting guide.
When ready, click inspect just below the title of the tab with your open web page – or use the convenient Open tab with url field to quickly open a new tab.
Google Chrome will now open a full screen Developer tools window, with a preview of the web page on the left, with a console window and other helpful tabs (including everything you are used to when debugging web pages in the desktop browser).
You can set breakpoints, use the
debugger keyword, and debug in the same way you’re used to.
Any changes made on the PC are automatically and instantly reflected on the device, and vice versa!
Google Chrome has an incredibly useful feature that allows for remote debugging on your Android or IOS device using Google Chrome developer tools. The setup process involves downloading over 6GB of additional stuff, but it feels like a small price to pay for such a useful feature.