5 Tips on debugging your HTML in Chrome

Tjaart van der Walt
Sep 5, 2018 · 4 min read

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
selected element in Chrome Developer Tools
example of how to inspect an element in Chrome Developer Tools
  • Option 2 — Open developer tools by clicking f12 on PC or Ctrl Option J on Mac
  • Click on the element selector
element selector in Chrome Developer Tools
  • As you move your cursor you will see the different elements being highlighted. Then click on the element you want to inspect
element highlighted in Chrome Developer Tools
  • 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

Chrome Developer Tools :hover element

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

Chrome Developer Tools “force element style” 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

Chrome Developer Tools “focus” state applied in “fore element style” window

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

Chrome Developer Tools margin, padding, border and calculated size window

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.

Chrome Developer Tools showing applied margin and padding

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

Chrome Developer Tools margin-bottom style

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

Chrome Developer Tools filtered style property margin-bottom

We can also view the computed styles

Chrome Developer Tools computed styles filtered property margin-bottom

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

Chrome Developer Tools applied style property margin-bottom

This will then take you to the style-sheet

Chrome Developer Tools applied CSS rule in containing style-sheet file.

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”

Chrome Developer Tools Rendered Fonts
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade