CSS Debugging

Browser Based CSS Debugging

If you go to your browser and open the “Inspect” portion, by right clicking mouse on the browser, you will land up on a section shown below. Here under “Elements” tab, you will find both of your HTML and CSS codes.

CSS Debugging

Just use this button Inspect Element to hover and select any element on UI for which you want to see/modify CSS.

In our case, we will be modifying our sub header. Thus, we will select “The God of Cricket” using the above-mentioned button. Once, we click it, we will get given screen:

Applying CSS from Browser

What we found that whatever CSS code we wrote for <h2> tag is getting reflected here. Now, you can just add code directly here. These codes will be applicable only for current instance of webpage and gets restored to the old code, once refreshed. So, once you have got what you wanted in terms of style, you need to paste the same code in our CSS code file.

Here, we have just changed the colour and font-style to italic for H2 tag and the same is reflected in the output screen:

Changing CSS via Inspect Element

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.