Visual Studio Code 經過 Chrome插件Type Script斷點調試Angular 2

時間 2019-11-20

標籤 visual studio code 經過 chrome 插件 type script 斷點調試 angular 欄目 Visual Studio 简体版

原文原文鏈接

一、下載Visual Studio Code （https://code.visualstudio.com/）node

二、安裝插件Debugger for chromeweb

三、肯定tsconfig.json配置 "sourceMap": truechrome

{

  "compileOnSave": false,

  "compilerOptions": {

    "outDir": "./dist/out-tsc",

    "sourceMap": true,

    "declaration": false,

    "moduleResolution": "node",

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "target": "es5",

    "typeRoots": [

      "node_modules/@types"

    ]

  }

}

四、生成調試配置文件launch.jsonnpm

{

    // 使用 IntelliSense 瞭解相關屬性。

    // 懸停以查看現有屬性的描述。

    // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [

    {

        "type": "chrome",

        "request": "launch",

        "name": "Launch Chrome",

        "url": "http://localhost:4200",

        "webRoot": "${workspaceRoot}"

    },

        {

            "type": "chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:4200",

            "webRoot": "${workspaceRoot}"

        }

    ]

}

五、設置斷點進行調試快捷鍵和C#語言一致 F十、F11json

注：調試前請先npm start程序url