之前在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,

把它改成如下代碼：

 1 {
 2     // Use IntelliSense to learn about possible attributes.
 3     // Hover to view descriptions of existing attributes.
 4     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5     "version": "0.2.0",
 6     "configurations": [
 7         {
 8             "name": "Launch Chrome against localhost, with sourcemaps",
 9             "type": "chrome",
10             "request": "launch",
11             "url": "http://localhost:4200/*",            
12             "webRoot": "${workspaceRoot}"
13         },
14     ]
15 }

現在F5運行，已經直接斷在我們的斷點上了：

 ok,問題遭到解決，可以開心的Coding，debug在VSCode中了。

有一點註意，就是要想用這種方法，必須：

1.Npm start 先啟動項目

2.VSCode中F5運行

That's all, enjoy