5 Tips on debugging your HTML in Chrome
Here are tips on debugging your HTML that I find myself using everyday.
1. Navigate to an element in the elements tab
2. Debug element state and style that get applied by certain states
3. How to determine the applied padding and margin
4. Track down the applied CSS rule.
5. Determine what font is rendered.
Navigate to an element in the elements tab
- Option 1 — Right click on the element in question (button, anchor tag, image etc.)
- Then click “Inspect”, developer tools will open, and your element will be highlighted as the image below


- Option 2 — Open developer tools by clicking f12 on PC or Ctrl Option J on Mac
- Click on the element selector

- As you move your cursor you will see the different elements being highlighted. Then click on the element you want to inspect

- Option 3 — You can use the following shortcut: Ctrl shitft c on PC or Ctrl Option c on Mac to open devtools and enable the element selector. Then hover over elements or click on the element your want to inspect
Debugging your element state and styles that get applied when your element is in certain states like hover, focus or active.
If you need to debug an element`s state, for example hover.
1. Open dev tools by pressing f12 on PC or Ctrl Option J on Mac
2. Focus the element you want to inspect
3. On the style drawer, click the :hov element

4. This will reveal the “force element state” window:

5. Clicking any of the options will add the pseudo class(or classes) to your element if the different states are defined in your CSS

How to determine the applied padding or margin of your element
If you need to determine if padding, or margin is creating space around your element
1. Select the element you want to inspect. Go to the following section

2. This square block displays the applied margin, border and padding and dimensions of the selected element.
3. Moving your cursor over the different sections in the square will highlight it on the element in the browser.

Track down the applied CSS rule.
If you need to track down a style rule that is overriding your style rule, or you want more information about any style rule
1. Open the developer tools, focus your element you want to inspect. Open the computed tab in the style drawer. The CSS rule we are after is margin-bottom

We can filter out margin-bottom by typing in the filter box:

We can also view the computed styles

You can then click on the line number links to navigate to the style-sheet that contains the rule

This will then take you to the style-sheet

Determine what font is rendered
If you need to determine what font is rendered you can open devtools, focus your element you want to inspect and open the computed tab in the style drawer, scroll down to the bottom and you will see a section “Rendered Fonts”

