使用ng serve 在Vs Code里調試 anguar 項目

ng serve 是@angular/cli 下的運行命令

我們可以通過下載@angular/cli來生成angular2的模板

npm install -g @angular/cli

ng new Anguar-Example --默認會下載依賴包

cd Angura-Example

npm install --如果下載了依賴包這步可以不做

ng serve --運行angular 或 npm start 運行項目

默認通過http://localhost:4200/ 訪問。

如果我們想用VScode調試，我們先要下載Debugger for chrome 插件到VSCode

然后在工程的launch.jon添加

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

主意，sourceMapPathOverrides 是真正起作用的地方，放他指向正確的map文件。

接下來我們就可以在VSCode的ts文件里設置斷點了