Lesson 2: Mastering JS Manuals, Debugging & DevTools with challenges!

Mastering JS Manuals, Debugging & DevTools 🛠️

📘 What Are Manuals & Specifications in JavaScript?

When learning JavaScript, two types of references exist — specifications and manuals.

📚 JavaScript Specification (ECMAScript / ECMA-262)

This is the official rulebook for how JavaScript behaves. It is maintained by TC39 (the technical committee behind JS).

• 🔍 URL: https://tc39.es/ecma262

• 🧬 It defines everything — from how == works to how async/await functions are executed.

• 📅 Updated yearly with new features.

• 🧪 Proposals for upcoming features: https://github.com/tc39/proposals

🧠 Analogy: The spec is like a constitution — it's not meant to be readable for beginners, but it's the ultimate truth.

---

🧭 Debugging JavaScript in the Browser

🔍 DevTools Basics

Modern browsers (Chrome, Firefox, Edge, Safari) come with powerful developer tools.

⌨️ Shortcuts

---

🛑 Breakpoints

• Click line numbers in the Sources panel to set them.

• Conditional Breakpoints: Right-click a line number → “Add condition”.

• Manual Pause: Use the debugger; keyword inside code.

for (let i = 0; i < 5; i++) {
  console.log("value:", i); // Use console to inspect
}

🧪 Tracing Execution

• Watch Panel: Track variables.

• Call Stack: View function nesting.

• Scope: See variables and closures in the current frame.

---

🧠 10 Debugging Challenges I Completed Today

---

💬 Interview Questions – Debugging & Manuals

Prepare to discuss these:

1. ECMA-262 vs MDN — Which is more beginner-friendly and why?

2. How to trace silent production bugs?

3. When is a conditional breakpoint useful?

4. What’s the difference between Step Over vs Step Into?

5. How do you debug a closure-scoped variable?

6. Explain source maps and how to debug with them.

7. Can you change variable values in DevTools? Is it safe?

8. What’s the async call stack and how is it different?

9. How do you debug third-party code with no source map?

10. Steps to debug a memory leak using browser DevTools?

---

🎮 Utility Mini Project: Debuggable To-Do App

Just like JS Engine Detective (Lesson 1), here’s today’s fun, hands-on project!

🧠 Project Idea:

Create a simple To-Do list — but intentionally insert bugs, and use DevTools to find & fix them.

🚧 What to Implement:

• Basic UI to add/remove tasks

• Log task addition via console.log()

• Add a debugger; line when clicking “Clear All”

• Insert an off-by-one bug in task indexing

• Conditional breakpoint for invalid/empty task input

• Inspect call stack while deleting a task

🛠 Bonus Features:

• Save to-dos in localStorage

• Use console.warn() for highlighting incomplete tasks

• Use console.table() for tabular task list display

---

🧩 Mnemonics & Cheatsheet

Mnemonics

Cheatsheet

• Breakpoint: Click line or debugger

• Conditional BP: Right-click → Condition

• Resume: F8

• Console: Toggle with Esc

• Inspect: Watch / Scope / Call Stack panels

---

🌐 Real-World Debugging Use Cases

---

🧠 Extra Value: Best Practices, Pitfalls & Tools

✅ Best Practices

• Always use source maps in production

• Use conditional breakpoints to reduce noise

• Use DevTools panels — not just console.log()

❌ Common Mistakes

• Leaving debugger; or logs in prod

• Ignoring async stack while debugging Promises

• Relying only on trial-and-error without tracing

🚀 Modern Alternatives

• VSCode Debugger: Works with Chrome & Node

• React DevTools / Vue DevTools

• Webhint: Open-source linting and debugging for web apps

---

🧑‍💼 Real-World Relevance

In my day-to-day learning and hands-on practice:

• DevTools helped trace why a chart didn’t render — it was a missing SVG attribute!

• Debugging async code gave insight into race conditions in fetch requests.

• Understanding source maps made debugging bundle files much easier with Webpack.

JavaScript debugging is not just about fixing — it’s about exploring your code’s brain. 🧠

---

👋 That’s it for Lesson 2 of my JavaScript journey.
From specs to source maps, I now feel more confident using the browser as a live lab for learning and tracing bugs. Lesson 3 will be all about… (you’ll find out soon!) 😉

🔁 Let me know in comments if you’ve tried the To-Do App Debugging Challenge — or if you’ve ever solved a tricky bug using DevTools!