Overview

DevTools let you see what your design is actually doing. This guide connects what you already know about inspecting HTML and CSS to understanding how JavaScript behavior works.

What You Already Know

From DESN368, you're comfortable using Firefox's Inspector to examine HTML structure and CSS styles. You know how to:

• Right-click → Inspect to select elements
• Read the DOM tree to see how elements are nested
• Check the Rules panel to see which CSS applies
• Use the Box Model to understand spacing

This guide builds on that foundation. Everything here uses Firefox DevTools—the same tools you already know.

The Two Sides of DevTools

DevTools has two sides that work together. You already know one of them:

┌─────────────────────────────────────────────────────────────────┐
│                        THE PAGE                                  │
│                                                                  │
│   What you SEE                    What it's DOING               │
│   (Inspector)                  (Console)                        │
│                                                                  │
│   ┌─────────────┐               ┌─────────────┐                 │
│   │ HTML Tree   │◄────────────►│ DOM Objects │                 │
│   │ CSS Rules   │               │ Events      │                 │
│   │ Layout      │               │ State       │                 │
│   └─────────────┘               └─────────────┘                 │
│          │                             │                         │
│          ▼                             ▼                         │
│   "This element has                "When I click,                │
│    these styles"                    this happens"                │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

The Inspector shows you structure and appearance. The Console shows you behavior and state. The bridge between them is a simple tool called $0.

The $0 Bridge

When you select an element in the Inspector, you'll see == $0 next to it. This means you can type $0 in the Console to reference that exact element.

This is the bridge. Visual selection becomes code access. Once you have $0, you can ask questions:

// What classes does this element have?
$0.classList

// What data attributes?
$0.dataset

// Add a class and watch the Inspector update
$0.classList.add('active')

What You'll Learn

What This Guide Skips

Traditional DevTools tutorials focus on debugging complex JavaScript. That's not where designers start. Here's what we're setting aside for now:

The engineering tools exist and you may need them later. But for learning how behavior works, we start simpler.

Next Steps

If you haven't done the tutorial yet, start there:

Your First 15 Minutes →

Otherwise, explore the sections that match what you're trying to do:

• Building a theme toggle? Start with The $0 Bridge
• Something not working? Check Reading Errors
• Need a quick lookup? See the Reference