Sourcemaps generated by all versions >= 1.7.0-beta.2 do not work in the VS Code Chrome/Firefox Debuggers #9729
Description
Versions
Angular CLI: 1.7.1
Node: 9.5.0
OS: win32 x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
Other:
Yarn 1.3.2
Win 10 Professional x64
Chrome x64 64.0.3282.167
VS Code 1.20.1 x64
VS Code - Debugger for Chrome 4.1.0
VS Code - Debugger for Firefox 1.1.0
Repro steps
- ng new
- Add some test code:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<button (click)="onClicked()">TEST</button>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
onClicked() {
console.log('test');
}
}
- ng serve
- Start debugging using this config:
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200/",
"runtimeArgs": [
"--user-data-dir",
"--remote-debugging-port=9222"
],
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
- Set a breakpoint on the button click handler
- Click button
Observed behavior
Nothing happens.
After refreshing the page in chrome, breakpoints sometimes get hit, but VS Code shows them on the wrong line.
Using the Firefox debugger yields the same results.
Desired behavior
The breakpoint gets hit in VS Code.
Mention any other details that might be useful (optional)
Recent versions <= 1.7.0-beta.1 work as expected
All versions >= 1.7.0-beta.2 do not work (latest checked: v6.0.0-beta.5 / v1.7.3)
We use the same tools on all of our development machines. The observed behavior is the same on every one.
Breakpoints work as expected when set in the webpack sources using chrome dev tools.
Removing the runtimeArgs or webRoot entries from the launch config doesn't help.
Someone posted a similar issue on the VSCode Chrome Debugger repo here.
Workaround
Using
debugger;
works, see this comment.