Angular › Angular DevTools & Debugging

How do you use browser DevTools breakpoints together with Angular source maps to step through your actual TypeScript code?

Advanced

Answer

Angular's development build includes source maps, which map the compiled JavaScript back to your original TypeScript files, letting you set breakpoints directly in your real source code inside the browser's Sources tab and step through it exactly as written, instead of debugging confusing compiled output.

// No special code needed, source maps are enabled by default in development
// 1. Open browser DevTools, go to the Sources tab
// 2. Find your actual .ts file under webpack:// or similar
// 3. Click a line number to set a breakpoint, then trigger that code

Real-world example A developer sets a breakpoint directly on a specific line inside a component's TypeScript file, and the browser pauses exactly there when that code runs, letting them inspect variable values without ever looking at compiled JavaScript.

Common follow-ups: Why are source maps usually disabled or limited in a production build?;How would you also debug a component's template expressions, not just its TypeScript code?

Build Environments & Deployment;Testing with Jasmine & Karma