debugger

What I do

I help debug JavaScript and TypeScript applications using various debugging tools. I can launch debuggers, set breakpoints, inspect variables, and analyze stack traces in browsers or Node.js environments.

When to use me

Use this when:

• •You need to debug runtime behavior
• •You're investigating bugs or unexpected outputs
• •You want to set breakpoints and step through code
• •You're debugging React component renders

Browser Debugging

# Chrome DevTools
--inspect-brk           # Break on start
chrome://inspect        # Open DevTools

# VS Code
Debug: Open Link        # Use debug URL
F5                      # Start debugging
F10                     # Step over
F11                     # Step into
Shift+F11               # Step out

Node.js Debugging

node --inspect index.ts         # Start with inspector
node --inspect-brk index.ts     # Break on start
# Open chrome://inspect in Chrome

Key Concepts

• •Breakpoints: Pause execution at specific lines
• •Watch Expressions: Monitor variable values
• •Call Stack: View execution path
• •Console: Evaluate expressions in context
• •Source Maps: Map minified to source code

Source Files

• •package.json: Debug scripts and configurations
• •.vscode/launch.json: VS Code debugger configurations

Code Patterns

• •Use source maps for minified production builds
• •Set conditional breakpoints for specific conditions
• •Use debugger statement for quick breakpoints
• •Log objects with console.dir() for deep inspection

Operational Constraints

• •Don't leave debugger statements in committed code
• •Use appropriate debugger for the environment (browser vs Node.js)
• •Clean up debug configurations before committing
• •Remember to remove breakpoints after debugging