Debug your website on a mobile device
tl;dr : Chrome’s Remote Debugging
Whether it’s tweaking CSS, checking for console errors, tracing network requests, or even checking your website’s performance logs, most mainstream browsers provide a rich developer toolkit to debug a wide range of problems … or rather most mainstream desktop browsers do.
What do you do when your website works flawlessly on desktop, but something is broken on mobile? What if you want to see the network requests that your mobile device is making?
The answer : Chrome’s Remote Debugging
Note: I primarily use Chrome, and the following walkthrough is for Chrome. Firefox has a very similar process. You can check that out here.
Chrome’s Remote debugging allows you to you connect your computer’s Chrome’s developer tools to your Android device running mobile Chrome. With this you have full access to the Chrome developer tools for your mobile browser!
What you would need:
- Chrome Browser on your computer
- Chrome mobile running on your Android device (Android 4.0 and above)
- USB Cable (and possibly the drivers for your mobile device already installed on your computer)
Step 1: Find your mobile device using Chrome
- Connect your mobile device to your computer. On your mobile device, go to Settings > Developer options and enable USB Debugging.
- Don’t see the developer options? Go to Settings > About phone and tap the Build Number a few times. You should get a prompt with the number of clicks left for you to “become a developer” 🤖.
- On your computer, fire up Chrome, and then the developer tools (Cmd/Ctrl + Opt/Alt + i). On the row with the different tabs, click on the three dots on the right to load more options. There, under More Tools, you should find an option called Remote Devices.
- Plug-in your mobile device to your computer; this would immediately throw an authorization prompt on it. Until you allow this, the device would be in a Pending Authorization state in the dev tools. Click on OK.
- The device is now authorized and ready to go! The Chrome developer tools should now list your device name and type.
Step 2: Inspecting
Once you’re done setting up, you can now inspect tabs directly on your computer’s Chrome!
- Fire up Chrome on your mobile device.
- Click on your device name in the chrome developer tools on your computer. It should list the different tabs that you’ve got open on your mobile device. Click on the Inspect button for the tab you want to debug.
- Chrome should open up a new window, with a real-time version of your mobile browser’s tab on the left and all your regular developer tools on the right.
