Visual Tools

The Inspector panel shows you what your design is made of. A reference for reading the DOM tree, finding elements, and understanding CSS rules.

Refresher from DESN 368

You learned to use the Inspector in DESN 368. This page is a reference when you need to look something up. If you're comfortable with the Inspector, skip to the Console tutorial — that's the new material.

Reading the DOM Tree

The DOM tree is a visual representation of your HTML. Every element is a node, and the tree shows how they're nested.

What you'll see

Triangles — Click to expand/collapse nested elements
Tags — Element names like <div>, <section>, <button>
Attributes — Classes, IDs, and other attributes shown inline
Badges — Special indicators for flex, grid, and scroll

The == $0 indicator

When you select an element, you'll see == $0 next to it. This means you can access it in the Console by typing $0. This is the bridge between visual and behavioral tools.

Finding Elements

Three ways to locate elements in the DOM:

1. The Element Picker

Click the cursor icon in DevTools (top-left of the toolbar) or press Cmd+Shift+C, then click any element on the page. This is the fastest way to find something you can see.

2. Search in the DOM

Press Cmd+F while in the Inspector panel to search. You can search by:

Tag name: button
Class: .card
ID: #header
Text content: Submit
CSS selector: nav a.active

3. Navigate the tree

Use arrow keys to move through the DOM. Up/Down moves between siblings, Left collapses, Right expands.

Try it: Find an element three ways

Use the element picker to select this exercise box
Use Cmd+F and search for .exercise
Navigate to it using keyboard arrows from a nearby element

Reading Styles

When you select an element, the Rules panel (right side of Inspector) shows all CSS rules that apply to it. Rules are listed in cascade order—most specific at the top.

What you'll see

element.style — Inline styles (from the style attribute)
Selector blocks — Rules from stylesheets, with the selector shown
Strikethrough — Properties that are overridden by more specific rules
Inherited — Properties inherited from parent elements

Inactive CSS

Some CSS rules don't apply because of context. DevTools shows these as grayed out with an info icon.

Inactive Property	Why It's Inactive
`justify-content`	Parent isn't a flex or grid container
`width` on inline	Inline elements ignore width
`margin-top` on inline	Vertical margins don't work on inline elements
`z-index`	Element isn't positioned (needs position: relative/absolute)

Firefox Excels Here

Firefox DevTools has the best inactive CSS detection. It tells you why a property doesn't work and often suggests fixes. Worth switching browsers just for this feature when debugging layout issues.

Computed Values

The Computed tab shows the final, resolved values after all cascade rules are applied. This is what the browser actually uses to render the element.

Useful for: seeing actual pixel values from relative units, checking inherited values, finding where a style came from.

Layout Tools

Modern DevTools include visual overlays for Flexbox and Grid layouts.

Flexbox Inspector

When an element has display: flex, you'll see a flex badge in the DOM tree. Click it to toggle the overlay.

What it shows

Container boundaries, item boundaries, gap spacing, and alignment visualization.

Why it helps

See exactly how flex-grow, justify-content, and align-items affect layout.

Grid Inspector

For display: grid, the grid badge reveals grid lines, track sizes, and named areas.

What it shows

Row/column lines (numbered), track sizes, grid gaps, and named grid areas.

Why it helps

Understand implicit vs explicit tracks, debug item placement, verify responsive grids.

Try it: Toggle a layout overlay

Find a flex or grid container on any website
Look for the badge in the DOM tree
Click the badge to toggle the overlay
Resize the browser window and watch the overlay update

Forcing States

Some styles only appear on interaction—hover, focus, active. DevTools lets you force these states without holding your mouse in place.

How to force a state

Select an element in the Inspector
Click the :hov button in the Rules panel
Check the states you want to force: :hover, :active, :focus, :visited

Focus state debugging

This is essential for accessibility testing. Force :focus to check that focus indicators are visible and meet contrast requirements.

Next: Behavioral Tools

Now that you can read structure and styles, let's learn to read behavior. The Console and $0 bridge let you see what elements are doing.

Continue to Behavioral Tools →