[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, 代表設定成功.
About C.H. Ling 262 Articles
a .net / Java developer from Hong Kong and currently located in United Kingdom. Thanks for Google because it solve many technical problems so I build this blog as return. Besides coding and trying advance technology, hiking and traveling is other favorite to me, so I will write down something what I see and what I feel during it. Happy reading!!!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.