BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

New Device Mode in Google Chrome

| by David Iffland Follow 3 Followers on Aug 29, 2014. Estimated reading time: 2 minutes |

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.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT