[Visual Studio] 在Visual Studio Code 中利用Chrome 為預設debugger

 利用Visual Studio Code 進行 Web development 越來越常見, 除了它開源外, 其大量extension 亦帶來很大的彈性. 在示範中, 會設定利用chrome 作為angular project 的預設debugger.

1. 修改launcher 設定.
   開啟 %PROJECT_HOME%/.vsCode/launch.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": [
           {
               "type": "chrome",
               "request": "launch",
               "name": "Launch Chrome",
               "url": "http://localhost:4200",
               "preLaunchTask": "tsc: build - tsconfig.json",
               "sourceMaps": true,  
               "webRoot": "${workspaceRoot}",  
               "sourceMapPathOverrides": {  
                   "webpack:///./*": "${workspaceRoot}/*"  
               }
           }
       ]
   }

2. 執行專案.
   於Visual Studio Code 中, 選取View > Integrated Terminal, 並於Terminal 中輸入以下指令.

   ng serve

3. 啟動debugger.
   於Visual Studio Code 中, 選取Debug > Start Debugging, 或直接按F5 執行. 若見到Chrome 自動啟動並去到專案的index page, 代表設定成功.