Quick Start
Start Bun with debugging enabled:Debug mode
- Open
chrome://inspectin Chrome - Click “Configure” and add
localhost:6499 - Click “inspect” on your Bun process
Inspector Options
—inspect
Start inspector on default port (6499):Default inspector
- Starts WebSocket inspector server
- Continues execution immediately
- Debugger can attach at any time
—inspect-wait
Wait for debugger before executing:Wait for debugger
- Starts inspector
- Pauses execution until debugger attaches
- Useful for debugging initialization code
—inspect-brk
Break on first line:Break on start
- Starts inspector
- Pauses on first line of code
- Allows setting breakpoints before execution
Custom Port
Specify inspector port:Custom port
Chrome DevTools
Use Chrome’s built-in debugger:Setup
-
Start Bun with
--inspect: -
Open Chrome and navigate to:
- Under “Remote Target”, click Configure
-
Add inspector URL:
- Click Inspect on your Bun process
Features
Sources Panel
Sources Panel
- View source files with TypeScript support
- Set breakpoints by clicking line numbers
- Step through code (F10, F11)
- Watch expressions
- Call stack navigation
Console
Console
- Evaluate expressions in paused context
- View console.log output
- Inspect objects interactively
- Execute code at breakpoints
Profiler
Profiler
- CPU profiling
- Memory heap snapshots
- Performance timeline
Network
Network
- HTTP request/response inspection
- WebSocket frame monitoring
- Timing analysis
VS Code Debugging
Integrate with Visual Studio Code:Launch Configuration
Create.vscode/launch.json:
.vscode/launch.json
Attach Configuration
Attach to running Bun process:Attach configuration
Debug Current File
Debug current file
Debugging Tests
Debug tests
Usage
- Set breakpoints: Click in the gutter next to line numbers
- Start debugging: Press
F5or click “Run and Debug” - Step through: Use
F10(step over),F11(step into),Shift+F11(step out) - Inspect variables: Hover over variables or use the Variables panel
- Evaluate expressions: Use the Debug Console
Breakpoints
Line Breakpoints
Line breakpoints
Conditional Breakpoints
Conditional breakpoint
Logpoints
Log without stopping:Logpoint
Programmatic Breakpoints
Debugger statement
Debugging Features
Call Stack
Navigate function call hierarchy:Call stack
Variable Inspection
Inspect variables
Watch Expressions
Monitor expressions across breakpoints:Watch expressions
Console Evaluation
Evaluate code while paused:Console evaluation
Source Maps
Bun automatically generates source maps for TypeScript:Original TypeScript
Inline Source Maps
Bun embeds source maps by default:Generated output
External Source Maps
Generate separate.map files:
External source maps
Async Debugging
Debug async code:Async debugging
- Step through promises
- Inspect promise state
- View async call stack
Exception Breaking
Pause on thrown exceptions:DevTools
- Open Sources panel
- Click “Pause on exceptions” button (⏸)
- Choose:
- Pause on caught exceptions
- Pause on uncaught exceptions
VS Code
Breakpoints on exceptions
Performance Profiling
CPU Profile
Profile CPU usage:- Start Bun with
--inspect - Open Chrome DevTools
- Go to Profiler tab
- Click Record
- Run your code
- Click Stop
- Analyze flame graph
Memory Profiling
Analyze memory usage:- Open Chrome DevTools
- Go to Memory tab
- Select Heap snapshot
- Click Take snapshot
- Inspect objects and allocations
Remote Debugging
Debug Bun running on remote server:SSH Tunnel
SSH tunnel
localhost:6499 from Chrome DevTools or VS Code.
Network Access
Allow network access
Implementation
Debugger implementation:- Inspector:
src/js/internal/debugger.ts- WebSocket inspector server - Protocol: Chrome DevTools Protocol (CDP)
- Source maps:
src/sourcemap/- Source map generation - Runtime:
src/runtime.zig:176- Set breakpoint on first line flag
Debugger flag (src/runtime.zig:176)
Advanced Debugging
Multi-Process Debugging
Debug multiple Bun processes:Multiple processes
Debugging Workers
Worker debugging
--inspect to debug workers.
Debugging Tests
Debug tests
Common Workflows
Debug HTTP Server
Debug server
Debug CLI Tool
Debug CLI
Debug Build Script
Debug build
Troubleshooting
Debugger Won’t Connect
- Check port: Ensure port 6499 is not in use
- Check firewall: Allow connections to inspector port
- Check URL: Verify
ws://localhost:6499in DevTools
Check port
Breakpoints Not Hitting
- Check source maps: Ensure TypeScript files map correctly
- Verify file path: Use absolute paths in launch.json
- Clear cache: Remove
.buncache directory
Clear cache
Source Maps Not Working
- Check inline maps: Bun generates inline maps by default
- Verify tsconfig: Check
sourceMapoption - Check paths: Ensure file paths are absolute
VS Code Can’t Find Source
Source map locations
Debugging Tips
1. Use Conditional Breakpoints
Instead of:i === 50
2. Logpoints Over console.log
Avoid modifying code:- Set logpoint instead of
console.log - Message:
User {user.id} - {user.name}
3. Watch Expressions
Monitor complex expressions:user?.profile?.settingsitems.filter(x => x.active).length
4. Copy Value
Right-click variable → Copy Value (in VS Code)5. Restart Frame
Right-click call stack frame → Restart Frame (re-execute function)Performance
Inspector overhead:- Minimal when not attached: <1% overhead
- When attached: ~5-10% depending on breakpoints
- Profiling active: ~20% overhead
Security
Security best practices:- Bind to localhost:
--inspect=127.0.0.1:6499 - Use SSH tunnels: For remote debugging
- Firewall rules: Block inspector port from internet
- Disable in production: Remove
--inspectflag
Related
- Watch Mode - Auto-reload during debugging
- TypeScript - Source map configuration
- Chrome DevTools Protocol - Inspector protocol docs
- VS Code Debugging - VS Code debug docs