VS Code 調試 Angular 和 TypeScript 的配置

一、安裝插件

在 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，
點擊啟動調試。

注意事項

1、使用 tsc -v 命令檢查 ts 版本是否高於 2.1.x 。

2、運行下面命令

cd src

tsc

在 src 文件夾運行 tsc 命令，觀察在項目的 dist 文件夾 是否會生成 src 目錄和目錄中是否存在 *.js.map 文件。

3、如果沒有命中斷點，點擊 VS Code 中的重啟（快捷鍵 Ctrl+Shift+F5）, 再嘗試。

---

本文地址：http://www.cnblogs.com/savorboard/p/vscode-debugging-angular.html
作者博客：Savorboard
歡迎轉載，請在明顯位置給出出處及鏈接