When it comes time to test out how a web page will work on a mobile device, there’s no substitute for using a real device. Modern browsers typically have some kind of mobile emulator available, which can be helpful. One of the nice things about these are they’re part of the browser’s existing developer toolset (Chrome’s DevTools, for instance), and so you can continue to inspect and develop the page with these tools, while still having a good idea of what it will look like when it’s on a smartphone or tablet. But what do you do when you want to actually inspect what’s going on in the browser on an actual phone?

Perhaps what you’re seeing on a real device doesn’t match up with the emulator, and you need to nail down what’s going on. Or maybe you want to get more data on network, rendering, or JavaScript performance. The tools to inspect these things are already in the browsers (Dev Tools or Web Inspector, for instance), but how can you use them to see exactly what’s taking place under the hood on our mobile devices?

That’s where Remote Debugging comes in.

Remote Debugging

Remote debugging is simply the ability to connect a remote device (say a phone or tablet), and then use our local browser tools to see (and control) what’s happening on that device. This allows us to not only see what a page will look like, but also drill down into whatever other metric we want to investigate, knowing that we’re seeing is how the remote device is actually processing the page, not simply a good estimate by an emulator.

Today we’re going to look at two examples of how this can be done: Chrome on Android and Safari on iOS. There are other options available, like through Firefox, but these two are fairly popular combinations, and should give you an idea of how the process works.

Chrome on Android

  1. If you have an Android device you want to connect to, the first step is to enable ‘Developer Options’ on the device. How to do this is not readily apparent when looking through the phone settings. What you have to do is to go to ‘Settings’ > ‘About Phone (or Tablet or Device)’ and then tap on the ‘Build Number’ 7 times (yes, 7 times). You can find more information about this in the Android Studio User Guide.

  2. Once the Developer Options have been enabled, you can go to ‘Developer Options’ under ‘Settings’. Here, you’ll need to enable ‘USB debugging.’

  3. Once these are enabled, you can go to Chrome on your desktop/laptop. Go to the page you want to debug, and go to Dev Tools > More Tools > Remote Devices.

  4. If this is the first time your machine has connected to your remote device, you’ll see a message asking you to authorize debugging on the device.

  5. Under the Remote Devices tab in Dev Tools, you’ll now see your device name listed under Devices. If you select it, you’ll see the tabs that are currently open on the remote device.

  6. Here, you can enter a new URL to open on the remote device, or you can click on ‘Inspect’ if the tab is already open. Once you click Inspect, a new Dev Tools window will open that will allow you to use any of its developer tools there on the page loaded on the remote device.

Check out Google’s Getting Started with Remote Debugging Android Devices for more information.

Safari on iOS

  1. First, make sure the Develop menu is turned on for your desktop Safari. This is done by checking the “Show Develop menu in menu bar” within the Advanced section of Safari’s preferences.

  2. On your iOS device, go to Settings, and tap on Safari. Under ‘Advanced’, turn on ‘Web Inspector’.

  3. Once your remote device is connected to your desktop via USB, it should appear under the ‘Develop’ dropdown in your desktop Safari. If iOS Safari is not already open on your remote device, open it now. On your desktop, you should now see the name of the tab(s) that are open remotely listed.

  4. Click on the name of the tab you want to inspect, and Safari will open up a new Web Inspector tab locally that will be tied to the page that’s showing up remotely.

Apple has an article describing the process if you want more information.

A Useful Tool

Although remote debugging may not be something you use a lot, it is handy to have available when needed. Just this past week, I was thankful to have this option because it allowed me to track down a weird CSS bug that didn’t show up in the in-browser emulators. Remote debugging also provides us the ability to keep an eye on actual performance metrics, not emulated ones.

Resources