6 reasons why designers should use Chrome’s developer tools
What it is, where to find it, and reasons why designers should use it
Originally published in my weekly newsletter UX Things
Chrome developer tools are essential for building websites and apps on the web. They help developers troubleshoot all kinds of issues. However, DevTools are jam-packed with useful features for designers as well.
The DevTools let you view and edit the content (HTML) and styling (CSS) on the fly, as well as the functionality (JavaScript) of a page.
In a nutshell, Chrome’s developer tools differ from those of other browsers, but you’ll find similar features in them all. We’ll cover Chrome since it’s so popular.
Reasons why designers should use DevTools
Just before we start, if you’re on Windows, substitute CMD for CTRL in the shortcuts below.
Let’s get started.
1. Quick inspection
The quick inspection tool allows you to quickly check which fonts are being used, as well as their properties. Additionally, you’ll be able to look at sizing, spacing, and layout.
As you move your mouse over different elements, you’ll see the developer’s tools update as well. The left side shows you the layout (HTML) and the right side shows you the styling (CSS).
2. Make changes to the page
With DevTools, we can easily update any content on the page. This can be useful when testing whether UI elements are breakproof to content changes. For instance, trying to break an element with a longer copy.
As shown below, we’re updating the description of my newsletter’s landing page. To do so, press CMD + Shift + C, click on the element you’d like to update, and change the text in the DevTools, as shown below.
Another way to edit the text is to turn on the design mode. To do so, open the DevTools CMD + Shift + I, and under the Console tab, execute this command: document.designMode = ‘on’.
After it’s run, you can close the console window and start editing.
3. Device mode
There’s actually an easy way to see how the page looks on different devices without resizing Chrome’s window manually.
In order to enter device mode, press CMD + Shift + I, followed by CMD + Shift + M in DevTools. You can choose which device you want to emulate, define its orientation, and even simulate a weak network connection under the Throttling dropdown.
To simulate a selected network connection, just refresh the page after setting the throttling value.
4. Color picker
There’s a pretty fancy color picker in DevTools, especially considering it’s hidden inside a tool that was made primarily for developers.
You can toggle between RGBA, HSL, and Hexadecimal formatting, and it shows you the site’s color palette. You’ll find the website’s color palette at the bottom of the color picker.
A great tool for changing colors on the fly while having quick access to the website’s color scheme.
5. Toggle element state
With Toggle Element State, you can easily inspect the state of an element on the page, like a button.
As a first step, select an element using the shortcut CMD + Shift + C, click on the :hov, and then choose the state. Once you have chosen the state, you can view its styles (CSS) below.
You can use this when reviewing implementations of your designs, when it’s harder to review different states, like hover, active, or focused.
6. Take page screenshots
One of my favorite features of DevTools is the ability to take screenshots of pages. There are a lot of extensions that do this, but they’re really just calling this method below.
Alternatively, you can take screenshots of individual elements, like a header, hero banner, or footer. Select the element with CMD + Shift + C, then CMD + Shift + P, then choose Capture node screenshot. This will only screenshot the selected element.
With chrome developer tools, designers can get a better understanding of how web works under the hood and how website pages are put together. In addition, using chrome developer tools can help designers find errors in their designs and correct them.
I hope you’ll find these tips useful in your day-to-day work. And if that’s the case, you just made my day.
💌 Enjoyed this read? Join my UX Things substack for more design fun! 🫶
