Introduction to Chrome DevTools for CSS

Let’s look at the five broad uses of DevTools

In this guide, I’ll cover five broad areas on the use of Chrome DevTools to:

1. View CSS in both Style and Sources tabs.
2. Edit and filter in the Style and Computed tabs.
3. Simulate a mobile viewport.
4. View unused CSS under the Coverage tab.
5. View print page.

If you have not used Chrome DevTools before, it is easy to pick up, and you’ll find it an invaluable tool for web development.

Specifically for CSS, I use it to:

• Debug my CSS as I can view the applied styles on an element and edit them on the fly.
• Examine the CSS on webpages that I like.

Setup

I open the HTML file (from either a folder on my laptop or visit a webpage) in the Chrome browser.

Rather than turning on DevTools in the browser menu, I use keyboard shortcuts Command+Option+C (Mac) to open up Devtools. This opens up a panel showing Elements and Style tabs.

The first thing I do is to adjust the dock-side to make it easy to view the page and contents in the element tab. I like to have more screen space to view the…