Chrome DevTools source file not focusing when breakpoint hits in Angular 19 with Webpack 4.47.0
02:51 03 Apr 2026

Environment:

- Angular Version: 19.2.6

- Angular CLI: 19.2.7

- Chrome Version: 146.0.7680.165

- Node: 20.17.0

- OS: Windows 10 x64

- Webpack: 4.47.0

Problem:

When debugging Angular 19 project in Chrome DevTools:

- Source file not auto-focusing in Sources panel

- Scope panel shows "Not paused" when breakpoint hits

- Call Stack shows "Not paused"

- Bottom bar shows "From main.js" instead of .ts filename

- Same configuration works in another Angular 19 project

Steps to Reproduce:

1. Run ng serve

2. Open Chrome DevTools → Sources

3. Set breakpoint in any component

4. Trigger the action

5. Breakpoint hits but file does not focus

Expected Behavior:

Sources panel should auto-focus the .ts file

and show scope variables when breakpoint hits

Actual Behavior:

Sources panel focuses main.js instead of .ts file

Scope and Call Stack show "Not paused"

Already Tried:

- sourceMap: true in angular.json

- inlineSources: true in tsconfig.json

- optimization: false

- buildOptimizer: false

- Cleared node_modules and reinstalled

- Installed webpack@4.47.0

- Tried Microsoft Edge — same issue

angular webpack google-chrome-devtools source-maps angular19