Learn all about the revamped Inspect Devices UI, toggle classes easily in the now-fixed style panel and watch the pilot of DevTools Tonight.
Welcome back to the latest edition of the digest for all you Canary users out there! Turns out I missed a few updates in December. (I’ve been a little preoccupied with my newborn daughter.) So here they come, along a few super fresh ones.
The new “Inspect Devices” dialog
The (currently outdated) Remote Debugging documentation for DevTools has been our most popular guide for many years in a row, which could only mean one thing: nobody had a frickin clue how to use it!
So we went ahead and revamped the UX. Instead of having to open an entirely different page (“chrome://inspect”), all of “Inspect Devices” is now conveniently embedded into DevTools itself for quick access and less context switches.
Class toggles in the Style Panel
It’s now easier than ever to quickly toggle a class on an element to preview how it would look like with or without the associated styles. And we’ve also added an input to quickly add new classes so you don’t have to edit the attribute. Click on the new .cls button in the Style panel to try it out.
DevTools Tonight
It is with great pleasure that I can announce yet another way to keep up with what’s happening in the world of Chrome DevTools: I present to you the pilot of DevTools Tonight:
In the new show that’ll be serialized on a bi-weekly schedule, I’ll focus on bigger features coming to stable Chrome (instead of Canary) and will go a little more in-depth on each. Be sure to subscribe to the Chrome Developers channel to get notified when #1 ships, and let me know what you think in the YouTube comments!
The best of the rest
- We’ve added a setting to auto-open DevTools for popups (newly created windows). When enabled, a new instance of DevTools opens automatically with any newly created window.
- The action bar on top of the Style panel is now fixed in place, so you can always access it even if you scroll down to edit more styles.
- We now auto-zoom the timeline to what we think is actually relevant to your performance debugging session.
- Network Throttling now supports upload in addition to download so you can test stuff like file uploads on a 3G connection.
- We’ve revamped the Inspect tooltip that overlays the inspected element. It’s now dark and shiny and adds more contrast.
As always, let us know what you think via Twitter or the comments below, and submit bugs to crbug.com/new.
Until next month!
Paul Bakaus & the DevTools team