Use the DOM panel’s new context menu to efficiently edit nodes. Debug services workers directly via the Resources panel. Choose from all of the Material Design shades in the colorpicker. Blackbox JS libraries more easily.
The DOM panel’s new, improved context menu
We’ve analyzed the most-used actions in the DOM panel and concluded that the right-click context menu should be uncluttered and re-organized.
It’s now much easier to quickly hide or delete an element, trigger a certain state like :active or :hover or edit its HTML. And if you’re on a trackpad and don’t want to bother right-clicking, click on the three little dots next to the selected element instead.
Debug Service Workers via the Resources panel
Service Workers are fantastic once you’ve got them set up but they can be tricky to wrap your head around early on. This was made worse by the fact that debugging them required leaving the DevTools and opening chrome://serviceworker-internals/ in a new browser window.
Not anymore! Now you can debug Service Workers for the current domain directly from the Resources panel. It’s still a work-in-progress, but already a heavy improvement from the previous status quo.
All the colors: Material Design shades in the colorpicker
A few weeks ago, we added the Material Design palette to the colorpicker to give you primary, bold colors out-of-the-box. To actually design a full page, you inevitably need full access to all of the Material Design shades, so we’ve baked them in.
To bring up the shades, long press on one of the primary colors and click on a shade instead.
Blackbox JavaScript libraries more easily in Settings
JavaScript Blackboxing has been around for a while but wasn’t terribly easy to discover. It’s a feature that allows you to blackbox a script on a page to focus on your authored code only (and hide all the wrapping code).
We’ve now moved it to Settings. Give it a try:
The Best of the Rest
- Missing access to Rendering toggles? Rendering Settings have been moved to the DevTools main menu (under “More Tools”). In addition to the usual suspects (i.e. FPS meter), we’ve moved “Emulate print media” there as well.
- Tired of typing chrome://inspect into the Omnibox? Inspect Devices can now also be found in the new main menu under “More Tools”.
- Accidentally closed one of these closable Drawer tabs like Rendering or Search? You can now reopen them with the new menu on the left.
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