The Console

The Console isn't just for running code—it's a window into what your page is thinking. Learn to read its messages like a conversation.

Opening the Console

Three ways to access the Console in Firefox:

• Cmd + Option + K (Mac) or Ctrl + Shift + K (Windows) — opens Console directly
• Right-click → Inspect, then click the Console tab
• While in Inspector, press Esc to toggle the Console drawer (split view)

Reading Message Types

The Console shows different types of messages. Learn to recognize them at a glance:

What each type means:

• Log (gray): Intentional output from console.log(). The code is working as written.
• Info (blue): Informational messages, often from the browser itself.
• Warning (yellow): Something might be wrong, but the page still works. Worth investigating.
• Error (red): Something broke. The code tried to do something it couldn't. Learn to read these.

Your First Console Commands

Open the Console Playground and try these commands. Type each one and press Enter.

Math works

// The Console is a calculator
2 + 2
→ 4

100 / 3
→ 33.333...

Finding elements

// Find the heading
document.querySelector('h1')
→ <h1>Console Playground</h1>

// Find the counter display
document.querySelector('#counter')
→ <span id="counter">0</span>

// Find the color box
document.querySelector('.color-box')
→ <div class="color-box">...</div>

Changing things

// Change the heading text
document.querySelector('h1').textContent = 'Hello World'
→ "Hello World"

// Change the heading color
document.querySelector('h1').style.color = 'tomato'
→ "tomato"

Making Elements Talk

console.log() is how you make your code talk. When debugging, insert it anywhere to see what's happening:

const button = document.querySelector('#primary-btn');

// Did we find it?
console.log('Found button:', button);

// What classes does it have?
console.log('Classes:', button.classList);

button.addEventListener('click', () => {
  console.log('Button was clicked!');
  button.classList.toggle('active');
  console.log('Classes now:', button.classList);
});

Filtering Messages

When the Console gets noisy, filter it. In Firefox, use the filter buttons at the top of the Console panel:

• Errors — Show only red error messages
• Warnings — Show only yellow warnings
• Logs — Show only console.log output
• Info — Show informational messages

You can also type in the filter box to search for specific text.

Clearing the Console

Two ways to clear all messages:

• Click the trash can icon in the Console toolbar
• Type clear() and press Enter