Angular vscode 调试

1、首先安装 （​​Debugger for chrome​​ ）

在 Visual Studio Code 中打开扩展面板（快捷键 ​​Ctrl+Shift+X​​​），搜索安装 ​​Debugger for chrome​​ 插件）。

二、配置启动参数

在 Visual Studio Code 中快捷键 ​​Ctrl+Shift+D​​ 打开调试面板。

点击右上角 “齿轮” 按钮，打开 ​​launch.json​​ 文件，添加如下配置：

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "trace": true,
            "userDataDir": "${workspaceRoot}/.vscode/chrome"
        }
    ]
}

三、配置 TypeScript

打开项目中的 ​​tsconfig.json​​ 文件，修改如下配置：

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "../dist/", // 注意这个路径
    "rootDir": ".",
    "baseUrl": "src",
    "sourceMap": true, // 这个必须要启用，重要
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

五、开始调试

1、添加调试断点位置。

2、终端运行 ​​ng serve​​ ，先启动宿主。

3、在 VS Code 调试面板，选择刚刚配置的 ​​Launch localhost with sourcemaps​​​，
点击启动调试。