利用Visual Studio Code 進行 Web development 越來越常見, 除了它開源外, 其大量extension 亦帶來很大的彈性. 在示範中, 會設定利用chrome 作為angular project 的預設debugger.
- 修改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}/*" } } ] }
- 執行專案.
於Visual Studio Code 中, 選取View > Integrated Terminal, 並於Terminal 中輸入以下指令.ng serve
- 啟動debugger.
於Visual Studio Code 中, 選取Debug > Start Debugging, 或直接按F5 執行. 若見到Chrome 自動啟動並去到專案的index page, 代表設定成功.
Leave a Reply