How to debug websites on your mobile device using Google Chrome

I can’t believe I have survived this long as a web developer without knowing you can debug websites (JavaScript, CSS, HTML, TypeScript etc.) directly on your mobile device using Google Chrome developer tools. If you are currently using emulators/simulators or testing solutions such as Browser Stack, you will love this easy and free solution.

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.

Prerequisite Software

Before connecting your phone to your computer, please ensure you have all of the following software installed;

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.

Google Chrome Inspect Devices

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;

Restart ADB Server

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).

BBC in Chrome Remote Debugger

You can set breakpoints, use the debugger keyword, and debug in the same way you’re used to.

BBC Headline Changed

Any changes made on the PC are automatically and instantly reflected on the device, and vice versa!

Summary

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.