DevTools for creative people

  • They contain within one tiny UI (often docked in the browser) various tools, often having very little in common with each other. All of these tools are needed, but having all of them together at all times in one application makes for a complex UI to grasp.
  • These tools are sometimes very low level. They need to be low level, users need to understand how things work or, most often, why they don’t, and that means explaining how it was interpreted by the browser, at the lower level.

Bridging the gap

Animation inspector panel in FirefoxDevTools (in Firefox 37).
Timing function editor and @keyframe rules edition in Firefox 33.
Visualizing the effect of a transform in the page (since Firefox 33).
The eyedropper picks colors from the page (since Firefox 31).
FirefoxDevTools 3D view.
The `highlight` command in the Firefox Developer Toolbar can highlight nodes based on a CSS selector (Firefox 33).
Work-in-progress in Firefox 38: the element geometry editor.

--

--

Wearer of many hats: web dev, PM, DevTools engineer @Microsoft now, previously @Mozilla . Opinions my own. he/him. https://patrickbrosset.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Patrick Brosset

Patrick Brosset

1K Followers

Wearer of many hats: web dev, PM, DevTools engineer @Microsoft now, previously @Mozilla . Opinions my own. he/him. https://patrickbrosset.com