# 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**.

| Resource | Description |
| --- | --- |
| **Specifications** | The technical blueprints of JavaScript (like [ECMA-262](https://tc39.es/ecma262/)). Great for understanding the internals, but difficult for beginners. |
| **Manuals** | Practical guides written with examples and day-to-day dev tips (like [MDN Web Docs](https://developer.mozilla.org/)). Perfect for learners and professionals alike. |

### 📚 **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](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](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.

| Panel | Use |
| --- | --- |
| **Sources** | Set breakpoints, step through cod[e](https://github.com/tc39/proposals) |
| **Console** | Run JS live, inspect values |
| **Elements** | Inspect DOM, CSS |
| **Network** | Monitor API calls & responses |

#### ⌨️ Shortcuts

| Action | Shortcut |
| --- | --- |
| Open DevTools | `F12` / `Cmd+Opt+I` |
| Step Over | `F10` |
| Step Into | `F11` |
| Step Out | `Shift+F11` |
| Resume | `F8` |

---

### 🛑 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.
    

```plaintext
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

| Challenge | Skill Practiced |
| --- | --- |
| ✅ Set breakpoint in a for-loop | Understanding flow |
| ✅ Use `debugger;` to pause manually | Manual control |
| ✅ Use console to evaluate live expressions | Dynamic inspection |
| ✅ Add conditional breakpoint | Pause on condition |
| ✅ Trigger uncaught error & inspect | Stack trace reading |
| ✅ Step into a callback | Asynchronous debugging |
| ✅ Trace a `Promise` chain | Async call stack |
| ✅ Debug using source maps | Minified code handling |
| ✅ Live-edit a variable in DevTools | Runtime change |
| ✅ Inspect a closure’s inner state | Deep debugging |

---

## 💬 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

| Key | Phrase |
| --- | --- |
| F8 | "Skate → Resume" |
| F10 | "Ten toes Step Over" |
| F11 | "Eleven IN" (Step Into) |
| Shift+F11 | "Get OUT" (Step Out) |

### 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

| Scenario | Tool/Approach |
| --- | --- |
| Front-end UI bug | Pause during event handler |
| Async issue | Step through Promises |
| 3rd party bug | Source maps / conditional breakpoints |
| Slow performance | `console.time()` / network throttling |
| Closure bug | Inspect inner function state in Scope |

---

## 🧠 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!*