Your First 15 Minutes

A hands-on walkthrough using Firefox DevTools. Follow along step by step — by the end, you'll be comfortable finding elements, running code, and making changes to any web page.

Step 1: Open DevTools

With the Console Playground open in Firefox, open DevTools using one of these methods:

• Keyboard: Cmd + Option + I (Mac) or Ctrl + Shift + I (Windows)
• Menu: Firefox menu → More Tools → Web Developer Tools
• Right-click: Right-click anywhere on the page → Inspect

A panel will appear — usually at the bottom of your browser window. You can drag the divider to resize it, or click the three-dot menu in DevTools to dock it to the side instead.

Step 2: Find the Console Tab

DevTools has several tabs. Look for Console in the tab bar at the top of the DevTools panel. Click it.

You should see a blank area with a blinking cursor and a > prompt. This is where you'll type JavaScript.

Step 3: Run Your First Expression

Type this in the Console and press Enter:

2 + 2

The Console immediately shows 4. You just ran JavaScript.

Try a few more:

"Hello, " + "World!"

"DESN 378".length

The Console is a calculator, a text processor, and much more. But its real power is talking to the page.

Step 4: Find an Element

Now let's find something on the page. Type this:

document.querySelector('h1')

Press Enter. The Console shows you the <h1> element from the Console Playground. Hover over the result — Firefox highlights the actual element on the page.

document.querySelector() is how JavaScript finds elements. The string inside — 'h1' — is a CSS selector. You already know these from CSS.

Step 5: Change Something

Let's modify that heading. Type this:

document.querySelector('h1').style.color = 'tomato'

The heading turns red-orange. You just used JavaScript to change CSS.

Try more changes:

document.querySelector('h1').textContent = 'I changed this!'

document.querySelector('body').style.backgroundColor = 'lavender'

Note: Refresh the page to undo your changes. Everything in DevTools is temporary — you're experimenting, not breaking anything.

Step 6: Meet $0

There's a faster way to work with elements. This is the most important technique in this guide.

$0 is the bridge between visual selection and code. You point at something, and now you can control it.

Step 7: Ask Questions with $0

With the heading still selected (showing == $0), try these in the Console:

// What tag is this?
$0.tagName

// What classes does it have?
$0.classList

// What's the text inside?
$0.textContent

// How wide is it on screen?
getComputedStyle($0).width

This is interrogating an element — asking it questions about itself.

Step 8: Make Changes with $0

Now let's change things using $0:

// Make it bigger
$0.style.fontSize = '4rem'

// Change its text
$0.textContent = 'Hello from DevTools!'

// Add a CSS class
$0.classList.add('highlight')

Watch both the Console output AND the page update. Watch the Inspector panel too — the class appears in the HTML.

Step 9: The Hidden Message Challenge

Time to use what you've learned. On the Console Playground, there's a hidden element with id="secret". Your mission:

1. Find the element using document.querySelector('#secret')
2. Check its current display style: getComputedStyle(element).display
3. Make it visible by changing style.display to 'block'

// Find the hidden element
const secret = document.querySelector('#secret');

// Check its current state
getComputedStyle(secret).display;  // "none"

// Make it visible
secret.style.display = 'block';

You're Ready

In 15 minutes, you've learned to:

• Open DevTools and find the Console
• Run JavaScript expressions
• Find elements with querySelector
• Change elements with .style and .textContent
• Use the $0 bridge between visual selection and code
• Interrogate elements to understand their state

Keep Exploring