How to debug websites on your mobile device using Google Chrome
Jan 31, 2016 · 3 minute read
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.
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.
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.
Related PostsEdit this page on GitHub
About the author
I am Jon Preece, an experienced full stack website and software developer from Warrington (UK) currently working in and around Manchester (UK).
Throughout my 10+ year professional career I have worked in many sectors, including; e-commerce, financial services, marketing, healthcare, travel and accountancy.
I love to teach, I love to learn and share my knowledge with others, I love to speak at public events.