Activity 11: Debugging Mastery

Objective

Master professional debugging with Browser DevTools, strategic console logging, AI-assisted workflows, and systematic problem-solving by fixing 11 intentional bugs in a Spelling Bee game.

Prerequisites & Setup

Required: Concept 13 complete, Chrome/Firefox, Trae IDE, 60 min Download: Activity-11-Debugging-Template.zip Setup: Extract -> Open in Trae IDE -> Run Live Server -> Open DevTools (F12)

Template Contains:

• index.html - Game interface with styling
• words.js - Word bank with 2 intentional bugs
• game.js - Game logic with 9 intentional bugs
• style.css - Complete styling (no bugs)

Quick Test: Open index.html -> DevTools (F12) -> Try playing -> Observe errors

DevTools Exploration (Exercises 1-4)

Exercise	Tab	Objective	Key Steps	Success Criteria
1	Console	Error detection	Refresh -> Note red errors -> Click filename	Screenshot showing errors
2	Elements	DOM inspection	Use selector -> Inspect #current-word, input, button -> Check Styles	Answer element state questions
3	Application	localStorage	Local Storage -> Find spellingBeeGame -> View/edit JSON	Screenshot of data
4	Network	Resource loading	Refresh -> Check 4 requests (HTML, CSS, 2 JS) -> Verify 200 OK	No 404 errors

Bug Hunt: Fix 11 Bugs (Exercises 5-15)

Bug #	Symptom	Location	Fix	Verify
1	TypeError: Cannot read property 'word' of undefined	words.js line 9	Return entire object, not .word string	Error disappears
2	Duplicate words appear	words.js line 15	Remove ! operator	No repeats
3	No word displays on load	game.js bottom	Add DOMContentLoaded listener with loadGameState() + displayWord()	Word appears
4	Cannot read property 'definition'	game.js displayWord()	Fixed by Bug 1, verify with console.log(wordObj)	Console shows object
5	Only accepts uppercase	game.js line 61	Add .toUpperCase() to both sides	Lowercase accepted
6	Streak doesn't reset	game.js line 68	Change = gameState.streak to = 0	Resets to 0
7	Bonus shows too early	game.js updateScore()	Move feedback inside conditional, use >=	Shows after 3+
8	Negative score from hints	game.js showHint()	Add if (score < 5) check	Blocks hint
9	localStorage bloated	game.js save/load functions	Only save score, streak, usedWords	Fresh word, saved score

AI-Assisted Debugging (Exercises 16-18)

Exercise 16: Token-Optimized Prompting

Bad Prompt: "My game doesn't work. [200+ lines] Fix it." -> ~2000 tokens ($0.02) Good Prompt: "Case-sensitive comparison issue. Code: if (userInput === gameState.currentWord) {...} Fix?" -> ~150 tokens ($0.0005)

Task: Write effective prompt for Bug 5 -> Calculate Haiku vs Sonnet cost -> Decide when to use each model

---

Exercise 17: Improve Vague Error Reports

Rewrite with error message + code + expected behavior:

1. Vague: "My code doesn't work." -> Improved: [what breaks + expected behavior + code snippet]
2. Vague: "I get an error in the console." -> Improved: [full error + stack trace + trigger action]
3. Vague: "The game is broken after I added localStorage." -> Improved: [exact breakage + localStorage code + before/after]

---

Exercise 18: Multi-File Bug Challenge

Task: Rename getRandomWord() in words.js -> DON'T update call in game.js -> Trace error Steps: Console error -> Click to trace -> Find renamed function -> Fix call Deliverable: Screenshots documenting debugging process

Submission Requirements

Submit PDF/Google Doc with:

Part One: DevTools Screenshots

• Console (initial error), Elements (#current-word), Application (localStorage), Network (file requests)

Part 2: Bug Fixes

• All 9 bugs: Original -> Fix -> Verification + console screenshots

Part 3: AI Debugging

• Bug 5 effective prompt + cost comparison + 3 improved error reports + multi-file bug screenshots

Reflection (5 sentences):

1. Most useful technique? 2. Token optimization impact? 3. New debugging habit? 4. Confidence level? 5. Hardest bug?

---

Extension Challenges

1. Performance: Network tab load times -> Minify -> Compare
2. Mobile: Device Toolbar (Ctrl+Shift+M) -> Test responsive
3. Bug Hunt: Create 3 bugs -> Exchange with peer
4. Production: Input validation + try-catch + debug mode

---

Quick Reference

Shortcuts: F12 (DevTools) | Ctrl+Shift+J (Console) | Ctrl+Shift+C (Inspect) | Ctrl+Shift+R (Hard refresh) Console: log() (basic) | error() (red) | table() (data) | group() (organize) AI: Haiku (syntax/simple) | Sonnet (complex/multi-file) | Always include: error + code + expected behavior