A new Device Mode for a mobile-first generation
We introduced Device Mode, a way to emulate devices and work with responsive designs, a bit more than a year ago. Now it's time for its first major upgrade, starting in Chrome 49. So, what's new?
Mobile is becoming the starting point in Chrome DevTools. While we offered ways to emulate mobile in the past, the development default was desktop. Mobile emulation always had to be turned on. Now that consumption of mobile sites has overtaken desktop in many places, we're switching our position in DevTools as well.
What's new?
First and foremost, the UI is streamlined and uses a lot less space. We expect the new Device Mode to become the main development mode for most, so a clean and simple design that extends the main DevTools navigation bar was a requirement.
The new quick-jump device ruler over the media queries.
In addition, we've centered the viewport and added a new quick-jump device ruler at top, a great help when designing responsively, that gives you an idea of the most common device sizes.
And finally, a lot of options have been bundled or hidden behind a toggle whenever possible. These new composite options make it a lot easier to switch between modes. To toggle certain controls or customize your experience of the toolbar, hit up the little three dot menu icon.
Responsive by default
The main DevTools toolbar now expands to the left side of the browser window and includes the most important tools to emulate a variety of mobile and desktop devices. You can choose between two development modes:
- Responsive
- Specific Device
In both modes, the viewport sits in its own resizable window within Chrome. This has the significant advantage that you can maximize your browser window and the DevTools the way you like them and not have them jump around when you test multiple sizes of your page and go back and forth.
Responsive is the mode you'll want to be in during active iteration to make sure your site works on all sorts of devices, not just a few specific ones. In this mode, the handles next to the viewport are freely resizable.
Specific Device refers to when you choose a specific device and lock the viewport to its size. This becomes useful when you want to get in final fixes and touches for a few popular devices near the launch. Which is why we're not just showing a huge list of all sorts of devices in the dropdown, but the currently most popular ones. If you select one, we do our best to make it behave as closely as the real deal: Touch events, user agent, viewport and device chrome and UI (if available) are all emulated.
Integrated Remote Debugging
Emulations, even the best ones available, can only get you so far. There are simply things that emulations can't do today, like:
- Check if a button is large enough for your thumb.
- Test the performance of your site on a slower phone.
- Debug random quirks and limitations of certain devices.
To sufficiently test all of these scenarios, you need to test, work and debug using actual physical devices.
For a while now, you could browse to chrome://inspect, connect your device over
USB and open a remote debugging session via DevTools. But we've now gone one
step further and refactored how remote debugging looks and behaves, embedding it
into the core of DevTools. Instead of browsing to another page, you can now
access Inspect Devices as a dialog directly within the new main menu. This
makes it much easier to include physical debugging into your workflow – just
plug in your phone, no need to exit your DevTools!
New homes for the rest of the former emulation controls
Since mobile is now the default across DevTools, features like network throttling moved to their proper home, in this case the Network Panel.
Some features, like the emulation of sensors or rendering settings like emulating print media have been moved to a consistent place in the Drawer. You can find all of the extras in the new main menu under "More tools".
We know this is a significant change to which we'll all have to get used to. You'll find full coverage about everything that's in it in the just-updated Device Mode docs. We'd love to hear from you on Twitter or if you need more than 140 characters, on our bug tracker (yes, even for feature requests).