A presentation at State Of The Browser 2018 in in London, UK by Chris Mills
Bring on the design tools! Chris Mills, Mozilla
Who am I? ‣ Content lead/team manager for ‣ ‣ ‣ ‣ MDN Web Docs at Mozilla Open web evangelist/hippy Lover of HTML/CSS/JS Accessibility whinge bag Heavy metal drummer Mozilla
Historic debugging
Not quite that far back… !
Debugging was hard ‣ In the early days of the web Mozilla
!
The “5000 alerts” method Mozilla
Older tools like Venkman Mozilla
But then… Mozilla
Firebug was awesome ‣ Beyond JS debugging, to DOM/ CSS inspection, network monitoring, etc. ‣ Community power ‣ A lot of users right up to the end Mozilla
(Native) Browser DevTools ‣ Have become really slick ‣ Full-featured ‣ Powerful Mozilla
What about design tools?
Design on the web… ‣ …has become exciting again! Mozilla
!
!
!
Design on the web… ‣ ….has become exciting again! Mozilla
!
!
!
!
Awesome features need awesome tools ‣ DevTools traditionally have focused on development/coding ‣ Designers need freedom to tinker and express ‣ Tools that seem comfortable and familiar Mozilla
!
Our “golden triangle” Mozilla
BRING ON the design tools!!!
Nomenclature ‣ Highlighters ‣ Inspectors ‣ Editors Mozilla
Grid inspector ‣ Recently added RTL support ‣ Subgrid support in the near future Mozilla
Animation inspector ‣ Related: timing function editor Mozilla
Font editor ‣ Variable font support new in Fx63 dev edition Mozilla
Shape path editor Mozilla
Filter editor Mozilla
3-pane mode Mozilla
Accessibility inspector Mozilla
Flexbox inspector ‣ Coming around Firefox 64 ‣ Flexbox highlighter already available Mozilla
Honorable mentions ‣ ‣ ‣ ‣ Color picker Drop shadow editors in Chrome Gradient editor in Safari Firefox transform highlighter Mozilla
Mobile debugging ‣ Better remote debugging, e.g. integrated into editors like VSCode ‣ All-new responsive design mode ‣ Emulation for throttling and DPR Mozilla
Coping with loss (╯°□°)╯︵ ┻━┻
Tinkering is good ‣ DevTools are great for fine-tuning ‣ You can then save your styles, etc. out. ‣ But what about losing them, if the browser crashes, or whatever? Mozilla
We have tools to help ‣ Chrome has local overrides ‣ Firefox has track changes coming soon Mozilla
Finished! cmills@mozilla.com @chrisdavidmills Chris Mills, Mozilla
Big thanks to… ‣ Jen Simmons for all the awesome demos ‣ Martin Balfanz and Razvan Caliman for reviews and inspiration Mozilla
Since the early days of Firebug, browser developer tools have grown to feature-rich behemoths, although a lot of what they offer is centered around faster/better JavaScript debugging, network monitoring, and suchlike. Firefox has switched gears and is now leading the charge on design tools — features that provide visual, immediate inspection and tweaking of page design concerns such as layouts and fonts. In this talk, Mozilla’s Chris Mills looks at what is available now, and what’s coming up.
for free. You
can too.