Chromium-based web browsers including Edge and Chrome see widespread adoption among developers, thanks to the DevTools. As you may already know, Chromium has built a collection of developer tools directly into web browser applications. Meanwhile, Chrome and Edge DevTools are often considered more advanced and mature than competitors.
Edge DevTools support new experimental feature
Both Microsoft Edge and Google Chrome have a secret developer feature buried inside the settings. Interestingly, this feature ‘CSS Overview’ is likely unknown to many. But now we know about the working of CSS Overview in Chromium. Are you a web developer? This experimental feature will certainly make your life easier.
How to enable CSS Overview in Microsoft Edge
Following is the step-by-step procedure to enable ‘CSS Overview’ in Microsoft Edge:
- First things first, make sure to update your Microsoft Edge to the latest version.
- Invoke the DevTools on the web page you want to have CSS Overview of. Either right-click on the web page and go to Inspect Element or use the combination Shift+Ctrl+J on Windows/Linux machines.
- macOS users can use this combination: Option+Command+J.
- Now, navigate to the DevTools Settings: Either go to the settings manually or make use of the shortcut Shift+?.
- Find and check the CSS Overview option. Now, you are good to go.
- Reload the website and re-open the DevTools.
Now, you should be able to discover a new ‘CSS Overview’ tab in the DevTools.
“CSS overview gives a full overview of the CSS used on the web page. It consolidates all the CSS information on the web page to create a style guide, which includes colors, font details, and media queries used on the web page. Plus, it also gives unused CSS declarations, which could be useful to optimize the page in terms of speed,” Shubham Rajdhar, Founder of a Mumbai-based web development firm Decode Digital exclusive told TheWindowsClub.
We tried to use the CSS Overview feature using Google Chrome and Microsoft Edge Dev. It didn’t work as expected, possibly given the experimental nature of ‘CSS Overview’ or unsupported channel of the Edge and Chrome browser.
In an ideal scenario, it would offer CSS information divided into several sections, as follows:
- Overview summary
- Colors
- Font info
- Unused declarations
- Media queries
The Overview summary section offers information about CSS elements, external stylesheets, media queries, style rules, class selectors, among others.
The Colors section can provide developers with information related to all the colors being used on the website. It remains to be seen if CSS Overview comes as a standalone feature in the Edge DevTools anytime soon.
