Question

我有一个默认的Angular 4 cli项目。我已经设置了Visual Studio Code和Chrome扩展程序，以便能够调试它并在vendor.bundle.js文件中添加一些断点。

当我在该文件中设置断点时，我收到了评论Breakpoint ignored because generated code not found (source map problem?).源地图就在那里。

我一直在尝试launch.json中的每个可能的配置，但没有运气。

我在跟踪日志中看到以下内容：

SourceMap: creating for http://localhost:4200/vendor.bundle.js
SourceMap: sourceRoot: webpack:///
SourceMap: sources: ["C:/GIT/c24/apps/C24/c24-my-app/src/$_gendir/node_modules/@ng-bootstrap/ng-bootstrap/alert/alert.ngfactory.ts", ...]
SourceMap: webRoot: c:\GIT\c24\apps\C24\c24-my-app
SourceMap: resolved sourceRoot webpack:/// -> c:\GIT\c24\apps\C24\c24-my-app\webpack:\
SourceMaps.scriptParsed: http://localhost:4200/vendor.bundle.js was just loaded and has mapped sources: ["c:\\GIT\\c24\\apps\\C24\\c24-my-app\\src\\$_gendir\\node_modules\\@ng-bootstrap\\ng-bootstrap\\alert\\alert.ngfactory.ts", ...]

我的launch.json配置

{
    "version": "0.2.0",
    "protocol": "inspector",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}",
            "sourceMaps": true,
            "trace": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }
    ]
}

我的Angular CLI配置

@angular/cli: 1.4.5
node: 6.11.4
os: win32 x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/platform-server: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4`

Chrome版权

62.0.3202.75

在VS Code和Chrome中调试angular-cli TS

0 个答案: