Quick Reminders

Need a refresher? Here's the core workflow and common commands at a glance.

The Core Workflow

Select

Right-click → Inspect (or Cmd+Shift+C)

Reference

Press Esc for Console drawer, type $0

Change

Modify with $0.classList.add('active')

Common Commands

// Reading state
$0.classList                // Classes
$0.dataset                  // Data attributes
getComputedStyle($0).color  // Computed CSS

// Changing state
$0.classList.add('active')
$0.classList.remove('active')
$0.classList.toggle('active')
$0.dataset.theme = 'dark'
$0.style.backgroundColor = 'coral'

Key Shortcuts (Firefox)

Action	Mac	Windows
Open DevTools	`Cmd`+`Option`+`I`	`Ctrl`+`Shift`+`I`
Console directly	`Cmd`+`Option`+`K`	`Ctrl`+`Shift`+`K`
Console drawer	`Esc` (while in DevTools)
Element picker	`Cmd`+`Shift`+`C`	`Ctrl`+`Shift`+`C`

Stuck?

Getting null? Your selector didn't find anything. Check spelling and syntax.
Red error in Console? See Reading Errors.
Changes not showing? Check if CSS rules exist for that class.
Need to start over? Refresh the page — all Console changes are temporary.