Developer tools for designers

Written by Derek Shirk on

As a front-end designer, I spend a lot of my time working in a browser with the developer tools open. This magical panel of tools provides some features that make my design workflows faster and more fun, but they can be easy to miss. Therefore, in the spirit of sharing, I thought I’d compile a list of some of my favorites!

In this post I will be focusing my attention on the developer tools in the browsers I use most, Firefox and Chrome. Unless otherwise noted, these tips will work in both browsers.

Toggle CSS classes

While testing designs in a browser, I used to manually edit the markup in the inspector, often adding ZZZ to the end of a class name that I wanted to disable β€” because I wanted to put them to “sleep”. 😴

Sometimes I would end up deleting a class name from the markup, which made it even more troublesome to revert to its previous state.

<div class="HashHeadingZZZ HashHeading--h2"></div>

Thankfully, there is a better way!

Developer tools pane for toggling classes.
Developer tools pane for toggling classes.

Once a DOM element is selected in the inspector, you can save yourself a few extra clicks by toggling existing classes in the .cls pane under the rules tab in Firefox and the styles tab in Chrome.

Adding CSS classes

Similarly, I would often find myself adding new class names to elements in the DOM by editing the markup in the inspector. A faster and more reliable method makes use of the “add new class” input. Within the same .cls pane, an input exists that allows you to add classes to the currently selected element. New class names will appear in the list of active classes to toggle from the previous example.

Developer tools input for adding classes to selected element.
Developer tools input for adding classes to selected element.

Chrome DevTools, offers a bit of additional “sugar” by offering auto suggestions when entering class names into the add new class input. This is especially handy when you can’t remember the available class names at your disposal.

Chrome DevTools auto-suggest class names when adding new classes.
Chrome DevTools auto-suggest class names when adding new classes.

I find this incredibly helpful when working with prefixed classes, such as utility classes starting with u- for example. Start typing u- into the input and Chrome will provide a list of all available utility classes starting with that prefix. πŸŽ‰

Toggle CSS state pseudo-classes

Recently, I’ve found myself using the :focus-within pseudo-class toggle quite often. This has proven to be more efficient than interacting with the “Change Pseudo Class” flyout-menu (when right-clicking on an element in the inspector). These can be found in the :hov pane under the rules tab in Firefox and the styles tab in Chrome.

Developer tools allow states, such as focus-within to be toggled on and off.
Developer tools allow states, such as focus-within to be toggled on and off.

Hide DOM elements

While working on a design, it can be helpful to temporarily hide an element from view in the browser. The fastest way I have discovered to achieve this is by selecting the element you’d like to hide in the inspector, and pressing the h key on your keyboard.

Toggle the visibility of a selected element in the inspector by pressing h on your keyboard.
Toggle the visibility of a selected element in the inspector by pressing h on your keyboard.

Poof, magic.  🎩🐰. This will apply a unique browser specific visibility: hidden; class to the selected element. This is quite different than applying display: none, which I think would be more useful IMHO, but I still make use of this feature often.

In case this tip has inspired you to investigate other keyboard shortcuts, here are links for both Firefox and Chrome developer tools.

document.designMode

It’s often useful to quickly modify text within an interface. Perhaps you want to preview how some different copy looks, need to take a comparative screenshot, or maybe you need to quickly see how a group of titles will look when one breaks onto additional lines. For this, entering document.designMode = 'on' into the console tab can come in handy.

document.designMode is a developer tools console feature that allows live editing of website text.
document.designMode is a developer tools console feature that allows live editing of website text.

Did you know you can traverse the DOM in DevTools with the arrow keys? I didn’t until a teammate, Paul Hebert pointed this out to me and now I use this technique everyday!

Example of navigating developer tools DOM structure with up and down arrow keys.
Example of navigating developer tools DOM structure with up and down arrow keys.

Additionally, if you want to move a currently selected element up or down in the DOM structure, (instead of dragging & dropping) you can use:
ctrl + ↑ / ctrl + ↓ on Windows and ⌘ + ↑ / ⌘ + ↓ on Mac.

Highlight all elements matching a selector

Clicking the small crosshair icon that appears to the right of any selector name in the rules tab will select all elements on the current page with the same class name.

Demonstrating the ability to select all elements with the same class name by clicking the crosshair icon next to a selector name in developer tools.
Demonstrating the ability to select all elements with the same class name by clicking the crosshair icon next to a selector name in developer tools.

Changes

While designing in the browser, I make CSS edits directly in the rules tab all the time . Eventually, the code changes I want to keep need to find their way back to my text-editor. There are ways to save changes to a local file on your computer. However, I much prefer to use the changes tab (Firefox only). The changes tab will display all of the currently changed selectors and properties.

Example of the Firefox developer tools changes tab.
Example of the Firefox developer tools changes tab.

Selecting accessible contrast for text color

Both Firefox and Chrome include accessibility contrast indicators when selecting text colors. However, I find the Chrome DevTools implementation a bit more robust. Open a color picker for a text element (the color property, not background-color) and you will see an expandable contrast ratio section.

This interactive panel will display the contrast ratio between the text and what Chrome determines as the text’s background color. The panel will provide visual feedback in the form of 🚫 (fail), βœ… (AA pass) and βœ…βœ… (AAA pass) icons. Clicking each of those icons will provide more information about accessible color contrast guidelines.

Example of the Chrome DevTools accessible color picker tools.
Example of the Chrome DevTools accessible color picker tools.

If you expand the contrast ratio section, you will see additional information with the ability to choose different background colors to compare against. Also, the color spectrum section will now display a contrast boundary line. If your background is dark, then colors above this line are AA-compliant. If the background is light, choose a color from below the boundary line. I find this contrast boundary extremely useful.

Fonts

I’ve been having a lot of fun with variable fonts lately. The fonts tab in Firefox developer tools has been a huge help. I have found the size, spacing and weight sliders to be particularity helpful and time saving.

Example of the Firefox developer tools fonts tab.
Example of the Firefox developer tools fonts tab.

Animations

The animations tab offers a few visuals and features that I find particularly useful. For one, being able to see the timing and easing of the animation is helpful – especially for more complex animations. Furthermore, the ability to slow down the animation as well as highlight the various animated elements with the crosshair icons are very much appreciated.

Example of the Firefox developer tools animations tab.

Shadow editor

This Chrome DevTools shadow visualization tool has come in handy for me a lot. The interactive panel can be opened by clicking on the shadowed square symbol near your box-shadow or text-shadow property in the styles panel.

Example of the Chrome DevTools visual shadow editor tool.
Example of the Chrome DevTools visual shadow editor tool.

This feature works great with single box-shadows, or multiple layered box-shadows.

Grid visualizations

I thought I’d end this post with one of my favorite and most frequently used developer tool features at the moment, the grid visualizer in Firefox. Toggle the grid highlighter by clicking the grid icon next to an element in the rules panel with the display: grid; property. From here, there are several aspects of the overlay that you can customize.

Example of the icon used to toggle the Firefox visual grid lines.

Example of the Firefox visual grid tool in use.
CSS Grid example by Jules Forrest: https://codepen.io/julesforrest/pen/xLBbVb

With the grid element selected a few options become available under the layout β†’ grid panel. For example, you can toggle the display of grid line numbers.

Firefox visual grid tool customization options.
Firefox visual grid tool customization options.

Additionally, you can control the color of the grid overlay itself. This is helpful when the contrast between the background color and overlay is low and the grid overlay is difficult to see.

Demonstration of Firefox developer tools grid visualization options.
Example from https://mozilladevelopers.github.io/playground/css-grid/03-firefox-devtools

If you are making use grid-template-areas, you can even toggle the display of grid-area names!

At the time of writing this, the Chrome DevTools team has announced that their CSS grid tooling is coming soon!

I’m grateful that the fine browser-making folks continue to prioritize improving their developer tools. I’m discovering new ways to improve my daily design tasks all the time. If I’ve missed a really awesome feature that you love using, let me know!

Derek Shirk

Derek Shirk is Cloud Four's Front-end Designer and an advocate for sketching loose, prototyping fast, and designing in-browser. His favorite place to have a conversation is on a chairlift. Occasional tweets @derek_shirk.

Never miss an article!

Get Weekly Digests


Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.


Let’s discuss your project! Email Us