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