使用ng serve 在Vs Code里调试 anguar 项目

Posted 2020-09-01 计划着变化的计划

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文件里设置断点了