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