Remote debugging with developer tools

The modern web browser is a wonderful piece of software. On top of everything else, it also provides web performance profiling, offering deep insights and performance data for your web pages. Not only that, but the developer tools of most modern desktop web browsers will allow you to hook up a mobile device to the machine via USB and inspect web page source code and profile performance. This is a super cool and indispensable feature for mobile web developers as it allows you to test and debug your web pages on real mobile devices, using real mobile networks and hardware.

To enable remote debugging in Chrome for Android, perform the following steps:

1. Enable USB debugging on the Android device. To do this:
   1. Go to Settings | About Phone and scroll until you see Build number.
   2. Tap Build Number seven times, until you see a message You are now a developer. A new item Developer options will now be available in your Settings menu.
   3. Go to Settings | Developer options and check USB debugging. You may need to confirm a pop-up message.
2. Connect the device to the desktop via USB.
3. In Chrome, on your desktop, open the developer tools and select Menu | More Tools | Remote Devices (on some versions of Chrome this might be Menu | More Tools | Inspect Devices).
4. On the desktop, you should now see a list of web pages that are open on the device. Choose the one that you want to inspect.

You can now inspect the page, and use Chrome's DevTools as if it was running on the desktop browser. In addition, you can also screencast your mobile device's screen to a panel within the desktop developer tools. This allows you to interact with the device directly from the desktop computer, without having to physically touch the device.

The following image shows a remote debugging session with Chrome, complete with a waterfall chart of the performance of our news page:

For iOS devices, the Safari browser for macOS offers a similar remote debugging functionality.

For fun, you can compare the performance of each of the following pages:

• The original non-AMP page
• The AMP page served from the original server
• The AMP page served from AMP Cache

Unless your existing non-AMP page is particularly well crafted, we'd expect to see better performance as we advance through this list in any of the test tools.