1.13.d — Console: Debugging & Testing

In one sentence: The browser DevTools Console is your fastest feedback loop — run expressions, log values, read errors, and prove your mental model before you wire up the full UI.

Navigation: ← 1.13.c — Linking JS with HTML · 1.13.e — Variables →

---

1. Opening the Console

Browser	Shortcut (common)
Chrome / Edge	F12 or Ctrl+Shift+J (Windows) · Cmd+Option+J (Mac)
Firefox	F12 or Ctrl+Shift+K / Cmd+Option+K
Safari	Enable Develop menu → Show JavaScript Console

Use Console alongside Elements (DOM) and Sources (breakpoints) as you grow.

---

2. console.log — the workhorse

const user = "Ada";
console.log("Hello", user);
console.log("Sum:", 2 + 3);

console.log prints one or more values. It does not stop execution — it only observes state.

Method	Typical use
console.log	General messages
console.warn	Something odd but not fatal
console.error	Errors (often with stack in DevTools)
console.table	Arrays of objects — readable grid
console.time / timeEnd	Rough timing of a code block

---

3. The Console as a REPL

You can type JavaScript expressions at the > prompt and press Enter:

Math.max(3, 7, 2)
document.title

The last expression’s value is shown (sometimes as ←). This is ideal for tiny experiments (string methods, math) without editing a file.

---

4. Reading errors

When JS throws, the Console shows a message and often a stack trace (file + line). Learn to read:

• ReferenceError — used a variable that does not exist (typo, wrong scope).
• TypeError — called something that is not a function, or read property of undefined / null.
• SyntaxError — invalid JS text (missing }, bad string).

Fix topmost error first — later errors are often cascades from the first failure.

---

5. Practical debugging habits

1. Log inputs and outputs — not only "here" but the actual values.
2. Reproduce minimally — smallest HTML/JS that still breaks.
3. Use breakpoints (Sources tab) when console.log spam is not enough — execution pauses so you can inspect variables step by step.

---

6. Key takeaways

1. The Console is for feedback: logs, warnings, errors, quick REPL experiments.
2. console.log(a, b) can print multiple values in one line.
3. Learn to read error names and stack traces — they are the fastest path to a fix.

---

Explain-It Challenge

Explain without notes:

1. What is the difference between using the Console as a REPL and running code from a .js file linked with <script>?
2. Why might fixing the first error in the Console clear several later messages?
3. Name two console methods besides log and when you would use them.

---

Navigation: ← 1.13.c — Linking JS with HTML · 1.13.e — Variables →