Quick Reference

Firefox keyboard shortcuts and quick lookup tables for everything covered in this guide.

Firefox Keyboard Shortcuts

Opening DevTools

Action	Mac	Windows
Open DevTools (last panel)	`Cmd` + `Option` + `I`	`F12` or `Ctrl` + `Shift` + `I`
Open Inspector	`Cmd` + `Option` + `C`	`Ctrl` + `Shift` + `C`
Open Console	`Cmd` + `Option` + `K`	`Ctrl` + `Shift` + `K`
Toggle Console drawer	`Esc` (while in any panel)
Element picker	`Cmd` + `Shift` + `C`	`Ctrl` + `Shift` + `C`

Inspector Panel

Action	Shortcut
Search DOM	`Cmd`/`Ctrl` + `F`
Navigate tree (siblings)	`↑` / `↓`
Expand/collapse node	`→` / `←`
Edit selected element	`Enter` or `F2`
Hide selected element	`H`
Delete selected element	`Delete` or `Backspace`

Console Panel

Action	Shortcut
Clear console	`Cmd`/`Ctrl` + `K`
Previous/next command	`↑` / `↓`
Multi-line entry	`Shift` + `Enter`
Focus Console input	`Cmd`/`Ctrl` + `

Why Firefox?

This course uses Firefox DevTools because you already know them from DESN368, and because Firefox has the best CSS debugging tools for designers:

Inactive CSS detection — Firefox tells you why a CSS property doesn't work
Flexbox Inspector — Visual overlays that show alignment and spacing
Grid Inspector — Line numbers, named areas, gap visualization
Accessibility panel — Contrast checking and focus order visualization

Chrome works too

Chrome DevTools work similarly—the Console commands ($0, classList, etc.) are identical. If you prefer Chrome, use Cmd+Option+J for Console instead of K.

When to Use What

Quick decision guide for common debugging scenarios:

I want to...	Use this tool
See what classes an element has	Console: `$0.classList`
Test adding a class	Console: `$0.classList.add('name')`
See why my CSS isn't working	Inspector: Rules panel (check for strikethrough or gray info icon)
See the final computed value	Inspector: Computed tab
Visualize flexbox alignment	Inspector: Click flex badge in DOM tree
Visualize grid placement	Inspector: Click grid badge in DOM tree
Test a hover state	Inspector: :hov button in Rules panel → check :hover
See what events fire	Console: `monitorEvents($0)`
Debug a click handler	Console: Add `console.log()` in the handler
Find why querySelector returns null	Console: Test the selector, check spelling

Console API Quick Reference

Commands you can run in the Console:

// === SELECTING ELEMENTS ===
$0                              // Currently selected element
$1, $2, $3, $4                  // Previous selections
$('selector')                  // querySelector shorthand
$$('selector')                 // querySelectorAll shorthand

// === MONITORING ===
monitorEvents($0)              // Log all events on element
monitorEvents($0, 'click')     // Log only click events
unmonitorEvents($0)            // Stop monitoring

// === LOGGING ===
console.log(value)             // Basic output
console.log('label:', value)   // Labeled output
console.table(array)           // Display as table
console.dir(object)            // Expandable object view
console.group('name')          // Start collapsed group
console.groupEnd()              // End group
console.clear()                 // Clear console

// === INSPECTION ===
getComputedStyle($0)           // All computed CSS values
getComputedStyle($0).display   // Specific computed value

Element Properties Quick Reference

// === CLASSES ===
$0.classList                   // List of all classes
$0.classList.add('name')        // Add class
$0.classList.remove('name')     // Remove class
$0.classList.toggle('name')     // Toggle class
$0.classList.contains('name')   // Check if has class
$0.classList.replace('a', 'b') // Replace class
$0.className                   // Class string

// === DATA ATTRIBUTES ===
$0.dataset                     // All data-* as object
$0.dataset.stateName           // Read data-state-name
$0.dataset.stateName = 'val'   // Set data attribute
delete $0.dataset.stateName    // Remove data attribute

// === INLINE STYLES ===
$0.style                       // Inline styles object
$0.style.backgroundColor       // Read inline style
$0.style.backgroundColor = '#f00' // Set inline style
$0.style.backgroundColor = ''   // Remove inline style

// === CONTENT ===
$0.textContent                 // Text inside element
$0.innerHTML                   // HTML inside element
$0.id                          // Element ID
$0.tagName                     // Tag name (uppercase)

// === NAVIGATION ===
$0.parentElement               // Parent
$0.children                    // Child elements
$0.nextElementSibling          // Next sibling
$0.previousElementSibling      // Previous sibling

Bookmark this page

Keep this reference handy while you're learning. These patterns will become second nature with practice.