With almost every update of browsers like Chrome, Opera, Edge, and others, developers make changes to DevTools. New and useful features are added, existing ones are updated, and some disappear temporarily or permanently. However, the "Developer Tools" themselves can significantly simplify the work of web designers, layout designers, and developers. Exploring all innovations and their capabilities—especially in Google Chrome—can take forever. It's much easier to check out the monthly update descriptions if desired.
In this article, we decided to focus on three of the most prominent and interesting features in Google Chrome and its DevTools mode, which are equally useful for designers and layout developers. Opera and Firefox also offer similar modes with nearly identical functionality. We chose Chrome (honestly, at random). If we look at Edge, it also has a developer mode, but its color management is somewhat simplified. Code editing and saving, however, are visually clearer—with icons instead of panels and tabs. In other words, the functionality is the same, just presented differently.
But let's begin…
Editing and Checking CSS Variable Values
If you're using custom CSS variables in your code, upon opening Chrome DevTools, you'll see something like font-size: var(--fontsize) in the Styles tab. To understand what this CSS code means , you’ll need to locate the :root section in the file, find the variable name and value, and then go back to the code to work with it directly.
DevTools can automatically calculate CSS variable values in the Styles tab, so designers and layout developers can immediately check the value of a needed variable—even seeing a color preview. You can also change CSS variable values. Here's how it works…
Look at the screenshot below and focus on the Styles tab, specifically on the color and font-size properties. Near the var(--text) value, you can see a color square. If you hover over the var(--fontsize) value, the browser shows the numerical value as a tooltip. You might think these features have existed for a while—and not only in Chrome—but many webmasters still overlook them.
And here's how you can use it.
Clicking on the color square opens a popup window where you can change the hue and transparency. Using the eyedropper tool, you can select any color from your desktop.
Clicking the arrows in the color palette shows additional sets. These palettes are generated from the current page. When hovering over a color, you'll see the variable name using it: background, text, block, etc. When you select a color, its code is automatically inserted into the CSS. For example, we replaced the text color, changing the variable --text to --alternative-text .
Additionally, in the color popup panel, you can see a parameter called Contrast ratio . It shows how the background color relates to the text color. The lower the ratio, the worse the contrast. As seen in the example, the text and background blend together. A ratio starting from 4 is acceptable and is marked with checkmarks.
You can also adjust contrast manually by clicking nearby arrows. There's some insightful information here. The AA level shows the achieved contrast, and AAA is the ideal target according to WebAIM standards. In our example, our parameters exceed even the "safety line," which means we’re in good shape. Interestingly, the green shades differ less than they appear, yet visually they contrast well.
But... what is this line? When choosing colors, the line appears automatically. It separates text colors that meet AA standards from those that don’t. Adjusting colors to meet the standards can yield original combinations that might not seem intuitive but are compliant.
Also, whether to choose above or below the line depends on background brightness. If text is on a dark background – pick a color above the line. If text is on a light background – pick one below.
The ability to change a variable’s value and check color compatibility is just the beginning. You can also make changes at the root level . Select any element and scroll down the Styles tab until you find the :root section listing all your variables. Changes here affect the entire page. Color changes work just as described above. To change other values—double-click and enter new ones.
Overall, this is a great way to work with color palettes and contrast. It’s visual and convenient. Sure, designers can do this in Photoshop when working on a mockup, but sometimes it’s easier to play with color directly on the live page—especially when a client wants only partial changes. It’s harder to create a perfect palette upfront than to experiment live.
Formatting Minified Code
In a previous article, we discussed how to compress/minify code and how it becomes difficult to read but loads faster. When debugging or editing, this becomes a problem. Developer mode in browsers helps make minified code readable.
Go to the Sources -> Page tab and find the *.js code. Sites differ—some code is minified, some not. In the center panel (or at the top in Edge), there’s a curly braces icon. Click it to transform the compact code into readable format. Working with this version is much easier.
Similarly, you can do this with minified CSS code as well.
This formatting ability is very useful. It allows you to minify code with more confidence, knowing that if needed, you can always reformat and work with it. Any required code can be opened in DevTools, formatted, copied, and edited. It’s that simple.
Saving Your Changes
Many have likely experienced this: you make changes via DevTools, then reload the page—and all changes are gone. With the Local Overrides feature, you don’t have to worry. It allows you to save changes to a file on your hard drive. After refreshing the page, the changes are reapplied automatically—but only for you.
Go to Sources -> Overrides . Choose a folder to store your override files. Click and select the folder, then allow saving confidential data in the dialog box. The folder will then appear in the left panel of DevTools.
Now let’s change the color or font size on a page and refresh it. For example, we changed the background of code windows from transparent to red. After refreshing, we saw the CSS file was saved locally and reloaded automatically. And as long as this file exists in the selected folder, it will always be used.
Conclusion
Working with colors, shades, transparency, and contrast takes up a significant portion of a webmaster’s time. One thing is picking colors from brand palettes and logos; another is seeing how they look in real use, directly on the site you’re building. Not in Photoshop, but in browsers like Chrome or Opera, allowing you to verify that your colors meet standards.
In addition, formatting minified code and saving local changes are essential tools. Not all projects start from scratch with mockups. Quite often, you work on redesigns or refining existing scripts , improvements, replacements, etc. And in such cases, starting directly in the browser’s developer mode is the easiest approach.