The browser's developer tools are also a piece of software that evolves gradually, so useful features have been deployed while we didn't realize. In addition, there are cases where useful features are overlooked and not utilized properly even when they have already been implemented.
This article introduces useful features when debugging CSS in developer tools in multiple browsers and how to use them. According to the last year's State of CSS survey, front-end developers use Chrome browser the most. Considering that, this article introduces features mainly based on the developer tools of Chrome browser.
We will also look at the developer tools of Firefox and Edge browsers as well as those of Chrome browser, focusing on some of the differentiating features. Unfortunately, we could not find a differentiating feature of Safari to introduce in relation to CSS.
(Chrome, Firefox, Edge, Safari).
Chromecan be used in common in most Chromium-based browsers, but the scope of features may vary by browser vendor, so you should check it separately.
The browser versions examined at the time of writing are as follows.
Since the Flexbox specification came out in 2009, arranging layout of DOM elements has become much easier. However, declaring
display: flex in the container directly affects the immediate child elements, and it may cause unintended layout issues because the browser automatically adjusts the layout according to the properties defined by developers.
Each time when such an issue occurs, we had to change the element's properties one by one in the Styles panel of the developer tools and check how the position of the element affected by Flexbox changed in a less intuitive way.
Starting with Firefox's Flexbox Inspector, Flexbox Debugging Tool has been applied also to the Chrome developer tools from February this year.
[Chrome's Flexbox tools 1]
display: flex or
display: inline-flex applied are marked with a badge
flex in the Elements panel. This badge not only tells you that it's a Flexbox container, but also shows the area actually occupied by the child elements of that area when you click on the badge.
[Chrome's Flexbox tools 2]
You can also apply various alignment properties without manually entering properties in the Styles panel.
[Firefox's Flexbox tools 1]
Firefox developer tools offers even more advanced features. In addition to the features provided by Chrome, you can see a list of child elements contained in that Flexbox container in the Layout panel.
[Firefox's Flexbox tools 2]
And if you click on a child element in the list shown above, you can see more detailed information, along with applied properties, and even the actual computed size.
CSS Grid has become available in major browsers since 2017, much later than Flexbox. When comparing Flexbox and Grid, one of the biggest difference is that Flexbox can define the layout over only one dimension divided by rows or columns, whereas Grid can define both rows and columns at the same time. So it is very helpful if you can get visual feedback on how each element occupies an area by modifying the layout with the developer tools.
[Chrome's Grid tools 1]
As with the Flexbox tools, an element with the
display: grid or
display: inline-grid property applied has a badge named
grid. Clicking on that badge reveals an overlay layer that shows how the grid is positioned. You can configure settings to view more detailed information in the Layout tab. You can see the size of the track directly, or if you have assigned a name to a specific area, you can also see the name.
[Chrome's Grid tools 2]
Flexbox and Grid in common provide UI to view all Flexbox and Grid containers of the page you are currently viewing and display overlays. But it may be difficult to tell where the element is located, so it might be better to check the overlays by pressing the
grid badge directly in the elements panel.
[Firefox's Grid tools]
Firefox's Grid tools displays more information than Chrome's Grid tools, and the one that stands out among them is the mini layout overlay area. If you check the Grid container for which you want to check the overlay in the Layout panel, you can see the overlay of the container on a small screen, and you can immediately see how it is displayed by moving the mouse to each cell.
Typography is one of the important elements that make up the style of websites and applications. However, the task of changing the font of the website you're developing was merely changing the numerical value without the support of any tools.
Starting with Firefox 63, there is a tool that allows you to change the font as you like in the Elements tab of the developer tools. You can also use this tool to see at a glance which fonts are currently used on your website. Other browsers also let you check which font family is currently being used, but only Firefox provides a tool to change fonts with a more intuitive interface.
[Firefox's Font tools 1]
If you select a specific element in developer tools and open the Fonts tab, you can see at a glance which font has been applied and which font is being used throughout the page as shown above. In addition, you can check immediately how the result is displayed by directly applying the font size, weight, and spacing, and so on. In other developer tools, you have to find and change properties or manually set properties, but the Font tools are useful because you can adjust properties much more intuitively.
[Firefox's Font tools 2]
If variable fonts have been applied to the website, there are more items that can be edited in the Font editor. You can adjust the variation axes as you want, or apply the instances predefined by the font designer.
This tool lets you check colors, fonts, and media queries used in the page you're developing as well as unused CSS declarations. Since this is an experimental feature scheduled to be applied to Chrome 96, you must open the developer tools settings and enable the experimental feature to use it in Chrome 95. After that, select the 'Show CSS Overview' menu from the command palette, which can be run with
Cmd(Ctrl)+Shift+P, to load the command.
[Setting up CSS Overview]
If you click the 'Capture Overview' button in the CSS Overview panel, the information of key CSS properties applied in the page is displayed soon.
[Information displayed in CSS Overview 1]
Not only does it display the number of defined styles, but if you click the number of times being used, you can immediately check which elements are using the style and move to one of the elements.
[Information displayed in CSS Overview 2]
Since CSS Overview is still an experimental feature collecting feedback from developers, it is expected that the feature will be developed so that more useful information can be viewed at once in the future.
When developing applications larger than a certain scale, style sheets that were written previously and no longer used may be left unattended as the style sheets are changed. Moreover, it is difficult to check whether the style is actually being used one by one.
To activate the Coverage tab, open the command palette by typing
Cmd(Ctrl)+Shift+P in developer tools, then select the 'Show Coverage' menu.
[Opening Chrome's Coverage tab]
After that, press the Reload button and wait until all JS and CSS are loaded, and you can check the coverage information of the JS and CSS files used in the page. In 'Unused Bytes', the percentage of unused code is displayed.
[Coverage inspection results]
To check which part is not used, click the file and the Source tab of the developer tool will be activated, showing the the source code. The used code is displayed in cyan (
#57A2B6) and unused code is displayed in red (
If you apply the
z-index property carelessly when composing various UI components while creating a web application, you may experience difficulties because elements are not rendered in the intended location. In such cases, to see how the stacking contexts are structured, you have to look at the associated styles of each element and imagine the 3D space in your head. As the application becomes more complex and the number of elements grows, it becomes more difficult to debug.
So, there is a browser extension available that facilitates debugging of stacking contexts. But its visibility is poor and it cannot completely cover all situations. However, Edge and Safari provide a good tool for debugging stacking contexts separately.
Just like Chrome's Coverage tool, Edge's 3D View tool can run from the command palette, which can be launched with
Cmd(Ctrl)+Shift+P. You can intuitively see how the
z-index value is displayed and what layer hierarchy each element has depending on the stacking context.
[Edge's 3D View - z-index]
Clicking on the 'DOM' tab shows how the entire DOM structure is layered, not just considering the
[Edge's 3D View - DOM]
The 'Composited Layers' tab is not directly related to the stacking context, but it is a tool that helps you view and select elements that make up separate layers within the page at a glance. Safari also provides a similar feature, but the overall interface was inconvenient and difficult to use.
[Edge 3D View - Composited Layers]
When writing CSS, there are various opinions in determining the order in which to list properties. There are also opinions that it should be written in alphabetical order of properties, or that meaningful properties should be grouped together, although groups are not explicitly classified in the CSS specification. So, there is even Stylelint configuration that recommends dividing properties by group.
When you open the Computed tab in Chrome's developer tools and look at the properties of the element you are currently viewing, the tab also provides a feature to viewing properties by group. If you enable the option, the tab displays properties by grouping them into Layout, Text, Appearance, and Other.
[Apply property grouping in the Computed tab]
If the website you are developing needs to be printed, you may need to apply the
In Firefox and Safari, you can easily set the media type to
[Firefox's Apply Media Type button]
[Safari's Apply Media Type button]
However, in Chrome, you need to open a separate 'Rendering' tab to change the media type.
[Change Media Type in Chrome developer tools]
In addition to these, you will find many developer tools and extensions to supplement the features of the developer tools. In general, you can debug CSS debugging convenient by using only Chrome, but I expect that you will be able to feel the new value of other browser developer tools by using Firefox when editing Flexbox or Grid layout, or by using Edge browser to solve stacking context problems.
Lastly, if you want to know more about how to use Chrome developer tools in more detail, please refer to 'Gentle Walkthrough of Chrome DevTools' presented at FORWARD in 2020 (note that only Korean and Japanese subtitles are provided).