Visual Studio Code - 在 Visual Studio Code 上 Debug Chrome 執行的網頁程式

自從 Visual Studio Code(VSCode) 問世以後，漸漸取代了 Sublime 的地位。而在 Microsoft 與各個 Open Source 開發者背後的大力支持之下，好用的擴充功能不斷的推出。各種程式語言的開發人員紛紛投向 VSCode 的懷抱。而今天限量要介紹一個對 Web 開發人員而言較實用的一個擴充功能，Debugger For Chrome。

相信 Chrome 不管對一般使用者或者 Web 開發人員一點也不陌生，因為 Chrome 是瀏覽器市佔率最高的瀏覽器。先不說一般使用者，Web 開發人員最喜歡的就是 Chrome 的開發人員選項(F12)，寫網頁這個 Debug 已經變成是基本技能。然而 Debugger For Chrome 又幫了 Web 開發人員一個大忙，就是可以在 VSCode Run Debug Mode，將你的 VSCode 與 Chrome 進行 Binding，你只要在你的 VSCode 的程式碼上下中斷點，當網頁執行時就會像在開發人員選項裡設中斷點一樣，程式會停在 VSCode 上的中斷點，這樣就能更方便的 Debug 了。

再來限量要來教大家如何使用 Debugger For Chrome 的擴充功能：

首先打開 VSCode，點選左邊功能列的 [擴充功能]，搜尋 [Debugger for Chrome] 並安裝。

安裝好後我們還要針對我們的專案加入 launch.json 的組態檔。

點選左方工具列的偵錯，然後在上面的下拉列表下拉，選擇 [新增組態] 後，會跑出選擇要加入哪一種程式語言的組態檔。這邊我們選擇建立 Chrome 的 Debug 組態檔。

VSCode 會在專案目錄底下自動建立一個 .vscode 的資料夾，並在裏頭加入 launch.json 的組態檔。我們以 Angular 專案為例子，修改 launch.json 為以下範本的值：

{
    // 使用 IntelliSense 以得知可用的屬性。
    // 暫留以檢視現有屬性的描述。
    // 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "ng serve",
            "url": "http://localhost:4200/#",
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "ng test",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:9876/debug.html",
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "ng e2e",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
            "protocol": "inspector",
            "args": [
                "${workspaceRoot}/protractor.conf.js"
            ]
        }
    ]
}

(此範本為 Microsoft 提供(詳見參考來源))

再來就可以 Debug 了，我們點選剛剛偵錯頁面上方的綠色箭頭就開始偵錯了，這時候會打開新的視窗，但記得 Angular 要在偵錯前先執行 ng serve 啟動站台。

另外，如果我們不想用開新視窗的方式來 Debug，因為雖然開新視窗的好處在於新視窗完全沒有其他 Chrome 擴充功能的干擾，所以測效能會比較準確。但如果我們需要使用 Chrome 擴充功能來輔助，或者是我就不想開一個新視窗，你那可以考慮使用 Attach 的方式。

Attach 的方式就像 Visual Studio 的附加至執行續(Ctrl + Alt + P)的功能，可以讓你選擇要將偵錯與哪個頁面 Binding。要使用 Attach 的功能前，首先要在 launch.json 裏頭加入新的組態如下：

{
    "type": "chrome",
    "request": "attach",
    "name": "ng serve(attach)",
    "port": 9222,
    "webRoot": "${workspaceFolder}"
},

這樣就可以使用 Attach 的偵錯了。但是這裡要注意的地方是，要使用 Attach 的時候，你的 Chrome 必須要指定 remote debugging port 為 9222(這是預設的 attach port)。這裡有幾種方式可以設定：

1. 在 Chrome 的執行檔位置後面加上 --remote-debugging-port=9222。

注意，這種方式會讓每次 Chrome 開起來都會執行這個這段參數。

2. 使用命令列執行：[Win] + [R] 打開執行視窗，輸入chrome --remote-debugging-port=9222。

3. 撰寫 powershell script 來執行：

cd "C:\Program Files `(x86`)\Google\Chrome\Application"
Invoke-Expression "./chrome --remote-debugging-port=9222"

當然如果有其他方式也是可以的。再來 Angular 一樣要先執行 ng serve 啟動站台才可以。我們先開一個新的分頁然後導到要偵錯的網頁，接著選擇 Attach 的組態按下執行就可以選擇要 Attach 的分頁，一樣選擇下去就進入偵錯模式了。

就這樣，是不是非常的方便，另外如果你是其他程式語言的開發者，像 Node.js, Python, C#, C++...等有對應的 Debugger 擴充功能，大家一起來加入 VSCode 的家族吧。


參考來源
VS Code - Debugger for Chrome
Chrome Debugging with Angular CLI