Learn how DevTools makes you type less with smarter Console autocomplete, how to edit @keyframe rules directly in the Styles pane, how to have fun with CSS Custom Variables and how to join the dark side.
A smarter autocomplete in your Console
If you’re like me and many others, you type a command into the console to debug your app, see it not working, iterate and type it again, and again, and again. In order to help with that, we’re now autocompleting full statements you typed previously, like so:
Directly edit @keyframe rules in Styles pane
When we introduced the animation inspector and easing editor to DevTools, it was limited to transitions because we never showed @keyframe-based CSS animations in the Style pane. I’m pleased to say that that’s now a thing of the past, so go wild! Check out our video tweet for a preview.
Custom CSS Properties support
There’s a lot of goodness coming to CSS, and one of them is custom variables, launching in Chrome 49. We made sure to include full support in DevTools, so if you’ve been using variables in Sass before, give the native ones a try, as they allow you to edit properties on the fly in the Styles pane and immediately update dependent elements.
A Dark Theme for DevTools
We finally gave in to a request that we’ve heard dozens of times over the last couple years: You can now choose the dark side in DevTools. Head to the DevTools settings, Set theme to dark and enjoy. I’d say this is still in beta as a lot of it is auto-generated, so if you see any areas that could see improvements, definitely let us know!
The Best of the Rest
- The console drawer now auto collapses when you click on the full Console tab.
- The file tree in Sources got a nice overhaul with new icons and new grouping functionality
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