Debugging Basics
📚 What is JavaScript Debugging? Debugging in JavaScript means finding and fixing errors in your code. Browser DevTools is your best friend: open with F12 (or right-click > Inspect), find the Console tab, and you see all console.log() output, error messages, and stack traces.
Appy Says…
Every developer spends as much time debugging as writing code. The devs who ship fast aren't the ones who write perfect code first time — they're the ones who find and fix bugs fastest. The browser's DevTools is your X-ray machine.
What is JavaScript Debugging?
Debugging is finding and fixing errors in your code. JavaScript errors appear in the browser's Console (DevTools). You can also pause execution and inspect variables using breakpoints.
- •Open DevTools: F12 (or Cmd+Option+I on Mac) → Console tab
- •
console.log(value)— print any value to the console - •
console.error(msg),console.warn(msg)— coloured output - •
console.table(array)— display arrays/objects as a table - •Red error messages show the file, line number, and error type
- •Breakpoints: click a line number in Sources tab to pause execution
- •
debugger;statement in code pauses execution (same as a breakpoint)
Think of it like spectator mode in a game
Spectator mode in Minecraft lets you fly through the world and see what's happening without changing anything. A breakpoint does the same for your code — execution freezes mid-run and you can inspect every variable's value at that exact moment.
How It Works
- •1. Open DevTools → Console to see errors and
console.logoutput - •2. Click the error message to jump to the exact line that failed
- •3. Add
console.log(variableName)before the suspect line to inspect values - •4. In the Sources tab, click a line number to set a breakpoint
- •5. When execution hits the breakpoint, it pauses — hover variables to see their values
- •6. Use Step Over (F10), Step Into (F11), Step Out (Shift+F11) to advance line-by-line
Real-World Examples
- •A login form not submitting — console shows
TypeError: Cannot read properties of undefined - •An API fetch returning wrong data —
console.log(response)reveals the actual shape - •A counter not incrementing — breakpoint shows the variable was never re-assigned
- •Spotify's engineers use breakpoints daily when player state gets out of sync with the UI
- •TikTok's team uses
console.table(posts)to verify feed data before rendering
Key Facts
- •The most common JS errors:
TypeError(wrong type),ReferenceError(undefined variable),SyntaxError(typo in code) - •Chrome DevTools has a network tab showing every API request — invaluable for fetch debugging
- •You can run JS directly in the Console: type any expression and press Enter
- •The
debugger;statement only pauses if DevTools is open — safe to commit temporarily
Watch Out!
Remove all console.log() and debugger; statements before shipping to production. They slow things down and expose your internal data to users who open DevTools. Use a linter rule (no-console) to catch forgotten logs.
Remember
F12 → Console = your best friend. Read the red error message first — it tells you the type, file, and line. Add console.log() around the problem to trace values.
What You Learned
- •DevTools Console shows errors and
console.logoutput with file/line info - •Breakpoints pause execution so you can inspect variable values mid-run
- •Unlocks: finding any bug faster, understanding complex control flow, confident production code
Key Facts
- →The most common JS errors:
TypeError(wrong type),ReferenceError(undefined variable),SyntaxError(typo in code) - →Chrome DevTools has a network tab showing every API request — invaluable for fetch debugging
- →You can run JS directly in the Console: type any expression and press Enter
- →The
debugger;statement only pauses if DevTools is open — safe to commit temporarily
Real-World Examples
Remember
F12 → Console = your best friend. Read the red error message first — it tells you the type, file, and line. Add console.log() around the problem to trace values.
Quick Quiz
What is debugging?