DEV Community

Cover image for Debug Your Css With This Tool
Phan Công Thắng
Phan Công Thắng

Posted on • Originally published at thangphan.xyz

Debug Your Css With This Tool

There are tons of CSS properties that we can't remember, and sometime we write some CSS and didn't know why it doesn't work as we expect?

It turns out we used the wrong CSS property. How to know what exactly point we are wrong? Let's move on next step to discover that tool.

Prepare

First of all, I need to create a file HTML and a file CSS for this demo.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debug CSS</title>
    <!-- import css file here -->
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="hello">Hello! CSS!</div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

styles.css:

.hello {
}
Enter fullscreen mode Exit fullscreen mode

I'm ready! Let's move on next step!

Demo

I'm going to use Firefox, in order to figure out what CSS I'm wrong.

In Firefox, I can hit Style Editor, and I can see the style.css file that I just created. Let's edit the CSS directly here.

Style Editor

As you can see, CSS was reflected immediately.

Hit inspector, and look at the right side, if I add the CSS below to class hello. Firefox will show me what CSS I was wrong in a specific way. The wrong CSS will be gray, and there is i icon that we can hover and see the reason.

display: inline;
/* we can't set width for an inline element */
width: 100px;
Enter fullscreen mode Exit fullscreen mode

Inspector

This is the error:

It told me that I can't set width for an element that has display: inline.
Inline Error

Let's try another property maybe we can test.

display: inline;
/* we can't set width for an inline element */
width: 100px;
align-items: center;
Enter fullscreen mode Exit fullscreen mode

And I get an error:

Align Error

Conclusion

I just introduced how to debug in CSS using Firefox. Why don't try your CSS, and observe what message Firefox will give, it appears like magic.

Discussion (1)

Collapse
kieudac201 profile image
KieuDac201

good good thank you!