Useful Style-related Features Of Browser Developer Tools to Explore in 2021
Introduction
When you're doing web front-end development, you can easily find materials for debugging JavaScript or app performance. For example, even our FE development team wrote a document on how to debug JavaScript. When debugging CSS (Cascading Style Sheets), you can easily find the basic usage of developer tools, but there are so many features that you will only use the ones you use frequently, unless you look closely.
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.
Note
- While introducing a feature, we've specified the browsers that provides the feature, like
(Chrome, Firefox, Edge, Safari). - Features indicated by
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.
- Chrome 95
- Firefox 93
- Edge 95
- Safari 15
Flexbox Debugging Tools (Chrome, Firefox)
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]
Elements with 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.
Grid Debugging Tools (Chrome, Firefox)
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 flex or 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.
Font Tools (Firefox)
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.
CSS Overview (Chrome)
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.
Explore Code Coverage (Chrome)
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.
Using the Coverage tab provided by Chrome's developer tools, you can check the coverage of CSS as well as JavaScript code to see which styles are being used and which styles are not.
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 (#D42A20).
[Check coverage]
Debugging Stacking Contexts (Edge, Safari)
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 z-index attribute.
[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]
Other Small But Useful Features
View CSS Properties Grouped In Computed Tab (Chrome)
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]
Preview CSS Applied When Printing Web Pages (Chrome, Firefox, Safari)
If the website you are developing needs to be printed, you may need to apply the print media query. You can change the media type arbitrarily in the developer tools so that you can see the result easily.
In Firefox and Safari, you can easily set the media type to print by clicking the print icon in the developer tools toolbar.
[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]
Closing
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.
Most of the debugging tools related to network, performance, and JavaScript also have decent features. But the popular Visual Studio Code appears to be well integrated with the developer tools of Edge browser, so it is worth noting how the developer tools of the Edge browser will evolve differently from those of Chrome.
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).