Build Your Site

Debug with Chrome DevTools

Use Chrome DevTools on your development machine to debug on your mobile device. Inspect, debug, analyze your site on any device from your desktop.

In this guide

TL;DR

Integrate Chrome DevTools into your development workflow; use mobile emulation panel from the very start of your project.
With Web Starter Kit + Chrome DevTools, debug your site on real and emulated devices with one-click.
Users won't stay on any page that performs badly in normal network conditions; check network performance on real devices;
Check your site's responsive layouts on a range of devices using the Chrome DevTools Screen pane within the Emulation panel.

Integrate Chrome DevTools

At the very start of your project, keep Chrome DevTools open and emulate your site on at least one mobile device.

As you code and debug your code, check how your site responds on the mobile device. This is a key habit to acquire as part of your development workflow.

Chrome DevTools emulation tool

Debug on real devices and in the cloud

With Web Starter Kit + Chrome DevTools, debug your site on real and emulated devices with one-click:

Set up remote debugging for any real device you wish to test your site on.
Navigate on your real device to the your site’s URL ( gulp build returns this URL).
Open up this same URL on your desktop.
Set up device emulation for any device.
Repeat steps 3 and 4 to emulate different devices.

Choose any open tab, access the Chrome DevTools, and start debugging. Live reloading and synchronization lets you debug on all real and emulated devices at the same time.

Check network performance

Users won’t stay on any page that performs badly in normal network conditions; and they will lose patience fast even when network connectivity is shakey.

Check network performance on real devices and preferably in varying network connectivity. Record how your site behaves on the network, and pay close attention to the timeline.

You don’t want the timeline to show everything happening at the end of a page render; you do want a more optimized render, where some assets load in different frames on the timeline:

timeline for web fundamentals site

Important

See Critical Rendering Path and Profiling Mobile HTML5 Apps With Chrome DevTools for more insight on using the network timeline.

Debug page responsiveness

Use the emulation tool to check the layout of your site on a range of devices. This tool automatically sets the layout of a URL to the selected device.

Dive deeper into the responsiveness of your site on an emulated device, by changing the settings in the Screen pane:

Setting	Description
Emulate screen resolution	By default, matches the actual dimensions of the selected device. Uncheck the Emulate screen setting and enter any new dimensions.
Enable text autosizing	Emulate font boosting which occurs on mobile devices. Android artificially increases the font metrics used by text autosizing. Enabled by default only when emulating an Android device.
Emulate viewport	Zooms the page out to the physical default viewport of that device.
Shrink to fit	Ensures the emulated device screen is completely visible within your browser window. This setting does not emulate the device differently.
CSS media	Print is the default media type; additional media types include tv, speech, projection, and more. This setting does not emulate the device differently.