How to debug CSS using Google Chrome

The Inspect Element tool is great for debugging web pages in real time. You can use this tool to preview and modify the design of your website. You can also view CSS changes immediately without reloading the page.

This article describes how to view CSS classes and applied styles in the Inspector window for an element. We’ll also show you how to use it to preview your CSS changes in real time.

Open Inspect Element in Google Chrome

Visit any website[要素の検査]You can open a window and see what that HTML or CSS code looks like. This tutorial uses a sample website to demonstrate.

You can open the inspect element window in Google Chrome by pressing F12 key. Right-click anywhere on the page and select inspect.

[要素の検査]A window will open with the HTML code for the portion of the website you right-clicked on. Here you can also edit website text using Google Chrome.

[要素の検査]of the window[スタイル]tab

[要素の検査]in the window itself, element Tabs have a place to display both HTML and CSS code. The HTML code appears on the left side of the Inspect Element window. CSS code is on the right style tab.

Let’s say you have an HTML element with a class of “card-padding” with left and right padding applied.

 .card-padding {
  padding-right: 0vh;
  padding-left: 0vh;
} 

When I preview this website in my browser, division An element with the “card-padding” class. The styling applied to the “card padding” class is the style tab.

Hovering over an element in HTML code view highlights that part of the web page in your web browser. The HTML element’s type and class name are also displayed in a dialog box next to the element.

In this case, you’ll see a div container with the class names “row”, “card-padding”, and “pb-5” highlighted on the page.

How to change CSS in real time

[スタイル]You can change the CSS directly from the tab.

1. Right click on the first heading using this website.
2. You can see that a class called “text-grey” with a color of #8a8a8a has been applied to that particular h4 heading.

   

3. Instead, change it to another color, such as orange. You only need to change the value itself, not the name “color” of the property.

   

4. The heading changes from dark gray to orange.

   

5. If you want to disable a particular CSS style, uncheck the box to the left of the style.

   

6. You can also add more styles to the original set. Start adding a new property by clicking just below or to the right of the property. When adding new styles, you should use the same syntax as a regular CSS file.

   

7. If you’re previewing your local website, you can keep changing the CSS until you get close to the look and feel you want for your UI. You can then copy the CSS changes you made to your local code.

How to modify CSS from third party libraries or frameworks

If you’re using a third-party library or framework like Bootstrap, you can also modify the HTML elements.

1. Using this website, right click one of the Bootstrap buttons on the page.

   

2. You will see two classes applied to the button: ‘btn’ and ‘btn-primary’. Bootstrap already has its own styles applied to both of these classes. The color used as the background and border color is #007bff. Change this to something else, such as Violet.

   

3. If you’re previewing your local website, you can add your new changes back into your local code. Depending on your CSS order, you may need to use more specific CSS selectors. For example, prefix the selector with “.btn”. This will override the original Bootstrap styles.

    .btn.btn-primary {
     background-color: violet;
     border-color: violet;
   } 

[スタイル]What does tab’s element.style mean?

[要素の検査]Each HTML element highlighted in the window has an element.styles block. This is equivalent to adding inline styles to HTML elements instead of using selectors to target them.

1. Right-click the HTML element. Add a style like this to the element.style section:

    color: whitesmoke; 

2. You can see that the HTML element code has also changed. Added the following new line to the code inside the HTML element:

    style="color: whitesmoke;" 

   

How child HTML elements inherit styles

If two different style values ​​are applied to a parent and child element, the value of the child element takes precedence.

1. Using this website, right-click anywhere on the outer edge of the website.
2. [要素の検査]In the HTML section of the window, notice two specific HTML elements. I have a parent div element with a “content” class applied. This HTML element has an h4 child element and has the “text-grey” class applied.

   

3. Select the child h4 HTML element and disable the color style with the “text-grey” class.

   

4. Select the parent HTML element that has the “content” class. Add the following CSS styles to the class.

    color: red; 

   

   All the text inside the parent div becomes red. This change cascades to child elements as well. So h4 will also be red.

5. Select the child h4 HTML element and add a new style to the “text-grey” class.

    color: green; 

   

   This will override the style of the parent class. The h4 HTML element changes from red to green.

6. When I view the style for the “Content” class, it also shows a strikethrough. This ensures that the h4 child element overrides the parent’s color.

   

Advantages of debugging CSS in the browser

Debugging CSS in the browser can save a lot of time and speed up your coding workflow. This is especially true when she needs to see how new CSS changes affect her UI on her website in real time.

You can use this technique instead of changing your local code and reloading your app. This allows you to see when you make UI changes, so you don’t have to guess which CSS values ​​will work.

You can make changes in the element inspection window until you get close to the design you want. Once you get[Inspect Element]You can copy the code from the window back to your local code. You can rerun your app to test that your new CSS changes still work.

In this tutorial,[スタイル]such as where to find CSS in tabs,[要素の検査]We’ve covered the basics of using windows to debug your website’s CSS.

We also showed you how to make changes to CSS and see visual changes in the UI in real time. I hope you also understand how to make changes when your CSS uses third-party libraries and how style inheritance works.

You can do many other interesting things with the Inspect Element window.