vscode调试angular

之前在Asp.net MVC + Angular1 的项目中，要调试前台代码都是用浏览器的开发者工具，使用正常，也没有感觉太大的不方便。

后来接触Angular2项目，因为它是要经过编译的，所以在浏览器中看到的代码并不是我们写的代码，这就很不方便调试了。

 

下面开始试验：

 

1.我用常规方法创建一个Angular项目，添加一个hero模块，

 

 注意，我在Line17打了一个断点，试图调试。

npm start运行起来，VS没有截获断点，浏览器得到

我的代码起作用了，但VSCode没有断上，浏览器的开发工具看的代码、文件都是编译过的，看不懂。。。。

我需要让它断在VS里，断在我能看懂（没有编译过）的代码上。

 

2.断在VSCode中

首先给VSCode安装一个插件：Debugger for Chrome

 

安装好之后，可以看下它的介绍，会有使用方法，或者像我比较懒，直接网上找到现成代码。

现在直接在VSCode中按F5运行（选择Chrome）：

 

然后，你会发现左侧目录树中增加了一个.vscode的文件夹，里边有一个launch.json

现在我们来编辑这个lanuch.json,

把它改成如下代码：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:4200/*",            
            "webRoot": "${workspaceRoot}"
        },
    ]
}

现在F5运行，已经直接断在我们的断点上了：

 

 ok,问题遭到解决，可以开心的Coding，debug在VSCode中了。

 

有一点注意，就是要想用这种方法，必须：

1.Npm start 先启动项目

2.VSCode中F5运行

That's all, enjoy