How to Use Browser DevTools to Debug Your HTML & CSS

Published on: by Dr. Talib

Every modern web browser comes with a powerful suite of web development tools, often called "DevTools." Learning to use them is non-negotiable for any serious web developer. They allow you to look "under the hood" of any website, see how it's built, and debug your own code in real-time. This guide will focus on the most important panel: the Elements panel.

How to Open the DevTools

There are several easy ways to open the Developer Tools in browsers like Chrome, Firefox, or Edge:

  • Right-Click: Right-click on any part of a webpage and select "Inspect" or "Inspect Element". This will open the DevTools and highlight the element you clicked on.
  • Keyboard Shortcut: Press F12 on your keyboard. On Mac, the shortcut is often Cmd + Option + I.

The Elements Panel: Your Live HTML Editor

What it is: The Elements panel shows you the live DOM tree of the current page. This is not your source code file; it's the browser's current, rendered version of your HTML. This is a crucial distinction, as JavaScript can change the DOM after the page loads.

What can you do here?

  • Navigate the DOM: You can expand and collapse elements to see the structure and nesting of the page.
  • Live Edit HTML: You can double-click on any text, attribute, or tag name and change it directly. The page will update in real-time. This is perfect for quickly testing a change without having to reload your code.
  • See Applied Styles: When you select an element in the Elements panel, the "Styles" sub-panel (usually on the right) will show you every single CSS rule that applies to that element.

Try it Yourself: Open the HTML Viewer, paste some code, and then open the DevTools on the preview pane. Click the "Inspect" icon (usually a square with a cursor) in the top-left of the DevTools, then hover over elements in your preview. You can see the HTML and CSS highlight in real-time.

The Styles Pane: Your Real-Time CSS Debugger

This is the most powerful CSS tool you have. The Styles pane tells you exactly why your element looks the way it does.

Key Features of the Styles Pane:

  • Winning Rules: It shows you which CSS rules are being applied, from which stylesheet.
  • Overridden Rules: It shows you which styles are being overridden by more specific selectors. These rules will appear with a strikethrough. This instantly answers the question, "Why isn't my style applying?"
  • Live Edit CSS: You can click on any property or value to change it. You can also uncheck the checkbox next to a style to temporarily disable it and see the effect.
  • Add New Styles: You can add new, temporary styles to any element to experiment with changes before writing them in your actual code.

A Practical Debugging Example:

<style>
  #my-button { color: red; }
  .btn { color: blue; }
</style>
<button id="my-button" class="btn">What color am I?</button>

Debug it: Paste this code and inspect the button. In the Styles pane, you will see both the #my-button rule and the .btn rule. The color: blue; from the class selector will be crossed out, because the ID selector is more specific and wins the specificity battle. DevTools makes this instantly visible!

Stop Guessing, Start Inspecting

The Browser DevTools take the guesswork out of web development. Instead of changing your code and reloading to see what happens, you can experiment with HTML and CSS changes live in the browser. It's the fastest way to debug layout issues, test style changes, and understand how complex websites are built.