Debugging with your DevTools

We’re going to get into creating some things very soon, but when we do that, things are bound to go wrong, and the last thing we want to do as a CSS beginner is to be lost at sea having no idea why our styles aren’t working.

To debug our CSS, we can use our DevTools.

All browsers have their own Dev Tools. For this course, I will be using Chrome. All Chromium-based browsers will either be the same, or very similar. You are welcome to use either Firefox or Safari if you prefer them, but there might be some differences between them and what you see me using.

Opening our DevTools

There are a few ways you can open them:

the F12 key
cmd + shift + i/ctrl + shift + i
right click and choose inspect element

Using our DevTools

When they are opened, there are three panels that are the most useful for debugging CSS:

Styles
Computed
Layout

The styles panel is always the first place I go when something has gone wrong, as it helps us find typos in our code, invalid values, problems with the context of our declarations, and more.

Find all the problems on me!

There are 3 problems!

A typo for the color
The display property has an invalid value
The top property doesn’t work because it’s not a positioned element