Browser DevTools for HTML and CSS

DevTools is the built-in developer tool in every modern browser. It lets you see a page’s structure, change HTML and CSS live in the browser, and see results instantly. It’s an indispensable tool when building layouts.

How to open DevTools

All examples in this article use Chrome/Chromium. Firefox and Safari have nearly identical interfaces.

The Elements panel

This shows the live DOM tree of the page — exactly what the browser built from the HTML, after all scripts and templates have run.

What you can do:

• Expand and collapse nodes in the tree.
• Double-click text or an attribute value to edit it in place.
• Right-click → “Edit as HTML” to change an entire block of markup.
• Drag elements within the tree.
• Delete — remove an element temporarily (until the page is reloaded).

How to find an element:

1. Click the cursor icon (or press Ctrl+Shift+C).
2. Hover over any element on the page.
3. Click — DevTools highlights that element in the tree.

The Styles panel

After selecting an element in the Elements panel, the Styles panel appears on the right (or below). It shows all CSS rules applied to the element, ordered from highest to lowest priority:

element.style {}          ← inline styles

.post-card { ... }        ← element's classes
  color: #1a1a1a;
  font-size: 1rem;

h2 { ... }                ← tag rules
  font-weight: bold;

*, ::before, ::after {}   ← universal selector
  box-sizing: border-box;

user agent stylesheet     ← browser default styles
  display: block;

Struck-through properties are overridden by a rule with higher specificity.

What you can do:

• Click a colour or size value — edit it with the keyboard or mouse wheel.
• Click the checkbox to the left of a property — toggle it on or off.
• Click at the end of a rule and type a new CSS property.
• Click + in the panel — add a new rule for the selected selector.

All changes are temporary. They’re gone when the page reloads. Copy working rules back into your CSS file.

Box model

At the bottom of the Styles panel (or in the separate Computed tab) there’s a visual diagram of the box model:

┌─────────────────────────────┐
│           margin            │
│  ┌───────────────────────┐  │
│  │        border         │  │
│  │  ┌─────────────────┐  │  │
│  │  │     padding     │  │  │
│  │  │  ┌───────────┐  │  │  │
│  │  │  │  content  │  │  │  │
│  │  │  │ 320 × 48  │  │  │  │
│  │  │  └───────────┘  │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘

Click any value in the diagram — it becomes editable. Great for debugging spacing.

The Console tab

This is where JavaScript errors and network issues appear. For HTML/CSS, look for warnings about invalid attributes or missing resources (images, CSS files):

Failed to load resource: the server responded with a status of 404
GET http://localhost:8000/static/css/styles.css

This means the stylesheet isn’t connected, or its path is wrong.

The Network tab

Shows all resources the page loads. To check whether a CSS file loaded:

1. Reload the page with DevTools open.
2. Go to Network → select the CSS filter.
3. Confirm the file returns a 200 status.

Practical tips

Debugging “why is this margin so large”

Select the element → look at the Box Model → expand parent elements until you find where the extra margin or padding is coming from.

Find an inherited colour

In the Styles panel, scroll down to the Inherited from ... section — it shows properties coming from ancestor elements.

Try a different font

Select text → find font-family in Styles → change the value right there. A quick way to compare several options visually.

Emulate a mobile device

Click the phone icon in DevTools (or press Ctrl+Shift+M). Pick a device from the list or set a custom screen size. DevTools renders the page as it would look on mobile.

Don’t be afraid to experiment in DevTools — changes never touch your project files. It’s the safest place to test layout ideas.