Chrome DevTools upcoming features
Yesterday, I went to Mix-IT 2015 conferences in Lyon, France. I came to the great keynote “Designing with Chrome DevTools” by @pbakaus and here is a short list of what I found cool (and what I remember…).
Disclaimer: all presented features may not be present in the next Chrome DevTools and are for most of them prototypes.
Layout mode
Never before seen before at a conference or across the web, @pbakaus showed us a new layout mode. It allows us to edit padding, margins and text content in a WYSIWYG mode by dragging anchors, directly right on the page. All your changes can be directly saved in you LESS/SASS files.
Animations
Animations in the new Chrome DevTools are way more editable. You can see the curves of all your animations, drag them so they will start sooner or later, play them at 0.1x, 0.25x, 0.5x etc.
Color picker
An extended color picker has been presented with the possibility to edit your color in a RGB or HSLA mode in the style of what we can find in Sketch (you still can edit your colors in a hexadecimal mode).
You can also save color swatches, edit directly gradients by dragging gradient anchors and so on.
Typography
I don’t remember all the things about typographies, but what I can say is that the detection of included fonts is smarter than before. Chrome DevTools will be able to detect if you’re using a font that is not included. For example, you will be warned you if you have included Open Sans font in different weights (300 and 400) and you’re using this font in 600 weight.
Misc
A focus has been made also on responsive design layouts, common Material design colors and animations will be easily accessible…
Final thoughts
I’m really excited about this new Chrome DevTools. All these features will allow us to be more efficient in our daily design job, especially for prototyping things. One cool thing is that there’s a Trello board where everyone can share his own ideas and sketches of what they want in the new versions of the Chrome DevTools.
Thanks to @pbakaus for having shared with us all these upcoming features!
I’m Benjamin Dauton. I design & code at Enalean. Rifflicks is my side project. You can find me on my website, Twitter & Dribbble.
