New Device Mode in Google Chrome

In an upcoming Chrome release, Google upgraded DevTools with a new “Device Mode” to enable streamlined device display emulation, media query inspection, and a new network throttling tool. These tools make it easier for developers to emulate various devices and situations that their web page will encounter in the wild.

In the existing version of Chrome, developers can emulate a device such as an iPhone 5 or Google Nexus 5 by opening the emulation drawer and choosing from the list of devices. However, the existing tools have limitations and aren’t easy to find. The new Device Mode provides an improved set of emulation tools to ensure a web page looks right in all circumstances. It’s currently available in the Chrome Canary channel, which provides early preview of features that will end up in the main Chrome browser.

To enable Device Mode, Google has placed a new icon next to the Inspection icon. This high-profile position reflects the importance of device emulation to today’s web developers.

With Device Mode enabled, developers can switch among device presets right in the browser window without returning to the DevTools window, similar to Firefox’s Responsive Design View. Device presets include not only screen size, but also pixel density to allow so-called “retina” display emulation even on a non-retina display. The list of presets includes 41 device options and now includes notebook specific presets.

Emulating the device screen only solves part of the problem and Google takes it a step further. Since users aren’t always on a fast network, a new feature introduced with Device Mode lets developers emulate network speed from high-speed all the way to offline. In this mode, Chrome throttles down the speed of the network to show what a user experiences, including when pieces of content are rendered.

Alongside the device emulation tools, Google has introduced a new media query inspector that lets page developers see how a page looks at various breakpoints as defined in the CSS and switch between them with ease. Right clicking on one of these breakpoints will take the developer to the line of code in the CSS where the media query is defined.

(Click on the image to enlarge it)

Developers are holding out for a “massive piece of functionality”: a device emulator that uses the actual rendering engines of the devices being emulated, rather than just mimicking the device’s display profiles.

Elsewhere in the browser market, both Firefox and Microsoft’s Internet Explorer have resolution switchers that allow developers to enter custom screen sizes. Google introduced the new DevTools at Google I/O earlier this summer and provides a general background of these tools on the developer blog.