The Browser Console

The browser console is where JavaScript speaks to you. Every error, every log, every value you want to inspect appears here. Developers who learn to read the console debug problems in seconds. Developers who ignore it spend hours guessing.

Open the console now before you read any further:

• Chrome on Mac: Cmd + Option + J
• Chrome on Windows: Ctrl + Shift + J
• Or: right-click anywhere on the page → Inspect → Console tab

What the console shows

The console is a live feed of everything JavaScript communicates to you:

Type	Appearance	When it appears
Log	White text	console.log() called in your code
Warning	Yellow text with ⚠	console.warn() called, or browser advisory
Error	Red text with ✕	console.error() called, or JavaScript crashed
User input	Text with >	Code you type directly into the console

To clear the console, press Ctrl + L (Windows) or Cmd + K (Mac), or click the 🚫 icon in the toolbar.

console.log()

console.log() is your primary tool for inspecting values while code runs. You can log strings, numbers, booleans, variables — anything.

console.log('Summit Trail Outfitters');
console.log(249);
console.log(true);

You can log multiple values at once by separating them with commas:

const tourName = 'Cascade Ridge Trek';
const tourPrice = 249;
console.log('Tour:', tourName, '— Price: $', tourPrice);

This prints: Tour: Cascade Ridge Trek — Price: $ 249

Commas add a space between values automatically. This is useful for labeling outputs so you know what you are looking at.

console.warn() and console.error()

These work exactly like console.log() but with different visual styling:

console.warn('This tour has limited availability.');
console.error('Failed to load tour data — check your network connection.');

console.warn() prints a yellow warning. console.error() prints a red error. Use them when you want certain messages to stand out from ordinary logs.

In real development, console.error() is useful for marking failures in your code so they are impossible to miss during testing.

The console as a REPL

The console is not just for reading — you can type JavaScript directly into it and execute it immediately. This makes it a REPL (Read–Evaluate–Print Loop): you type an expression, press Enter, and the console evaluates it and prints the result.

Try these directly in your console:

2 + 2

Output: 4

'Summit' + ' ' + 'Trail'

Output: "Summit Trail"

document.title

Output: "Summit Trail Outfitters" (or whatever your page title is)

This is how you experiment with JavaScript without writing and saving a file. Any time you are unsure what a piece of code does, paste it into the console and find out.

Reading error messages

When JavaScript encounters a problem, it prints a red error message. Learning to read these quickly is one of the most valuable skills in this course.

A typical error looks like this:

Uncaught ReferenceError: tourCount is not defined
    at main.js:12

Breaking this down:

• Uncaught — the error was not handled by your code
• ReferenceError — the type of error (you referenced a name that doesn’t exist)
• tourCount is not defined — the specific problem
• at main.js:12 — the exact file and line number where it happened

Click the filename link (main.js:12) in the console and the Sources panel opens directly to that line.

Common beginner errors:

Error	Cause
ReferenceError: x is not defined	You used a variable name that was never declared
TypeError: x is not a function	You tried to call something that isn’t a function
SyntaxError: Unexpected token	A typo in your code — missing bracket, comma, or quote

When you see a red error, do not panic. Read it, find the file and line number, and go look at that line. The error is almost always describing exactly what is wrong.

Exercise

With your STO site open in Chrome, open the console and run the following five console.log() statements one at a time. Type each one at the > prompt and press Enter.

console.log('Summit Trail Outfitters');

console.log(249);

console.log(true);

console.log(149 + 249 + 199);

console.log('Tour name:', 'Cascade Ridge Trek', '— Available:', true);

After each line, observe the output. Try console.warn('Low availability!') and console.error('Something broke') to see how they look different from a standard log.

Recap

• Open the console with Cmd+Option+J (Mac) or Ctrl+Shift+J (Windows).
• console.log() prints values — strings, numbers, booleans, variables, multiple values at once.
• console.warn() and console.error() print styled messages for warnings and failures.
• The console is a REPL — you can type JavaScript directly into it and execute it immediately.
• Red error messages show the error type, description, and the exact file and line number. Click the link to jump there.