CSS Tips - Using Chrome Developer Tool

As a web developer, one of the tools I regularly use when working with CSS is my beloved Google Chrome Developer Tool. It makes development work so much easier!

How?

Inspect Element Feature

With this, I can select any page element I want, and see what styles are being applied, which files (and the line numbers) the styles are coming from, and what styles are overridden. I can also right click any element on a page and select "inspect element".

Computed Styles

The computed styles feature helps you see all the styles being applied to the element in a centralized view. You can also see which styles are affecting each CSS property (e.g. border-bottom-color).

Visually, the arrows before each property name tell you there are styles being applied to it, which you can then expand to see what specific styles apply to that property.

It also provides you the box model view and see the padding/border/margin around the element. Hovering your mouse over these will highlight the element/padding/border/margin respectively on your page.

Add/Edit Style

The add/edit styles feature allows you to add inline styles to your selected element and visually see the change right away. It is great when experimenting with styles!

As you can see, Chrome suggests properties (values as well) based on what you type. Very nifty and helps you learn other CSS properties you don't normally work with.

Add Style to Inspector

The inspector styling is one of my favorites. It's like the Add/Edit style feature above, but better.

You can add styles and use selectors as you would usually use them. All your added styles get saved into the inspector-stylesheet, which you can then go into and make changes if you'd like.

The one thing lacking is the ability to add media queries using the "+" button. You will have to go into the inspector stylesheet manually and add your media queries there.

Other Chrome Dev Tool Features

There are a few more features that help when working with CSS but the above are the key features I regularly use. Using these, I usually end up playing around with CSS styles and adding the "good" ones to the inspector stylesheet and I just copy all the styles from it at the end. Or, if I'm simply editing existing styles, I copy the updated CSS stylesheet and use that.

There are also many other things I use regularly with Chrome's Developer Tool but this is a CSS post so I'll save those for a future post.