Visual Studio Code 前端調試不徹底指南

本文最初發佈於個人我的博客：咀嚼之味

Visual Studio Code (如下簡稱 vscode) 現在已經代替 Sublime，成爲前端工程師們最喜好的代碼編輯器。它做爲一個大型的開源項目，不斷推陳出新；社區中涌現出大量優質的插件，以支持咱們更加舒服地進行開發工做。在近期的工做中，我嘗試經過 vscode 來提高調試代碼的幸福度，積累了一點點當心得在此與你們分享一下。

接下來的內容將從如下幾方面進行展開：

1. launch / attach

2. 調試前端代碼

3. 調試經過 Nodemon 啓動的 Node 服務器

1. launch / attach

要使用 vscode 的調試功能，首先就得配置 .vscode/launch.json 文件。以最簡單的 Node 調試配置爲例：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "program": "${workspaceRoot}/index.js"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 5858
        }
    ]
}

其中最重要的參數是 request ，它的取值有兩種 launch 和 attach。

• launch模式：由 vscode 來啓動一個獨立的具備 debug 模式的程序

• attach模式：附加於（也能夠說「監聽」）一個已經啓動的程序（必須已經開啓 Debug 模式）

這兩種大相徑庭的模式到底有什麼具體的應用場景呢？且看後文。

2. 調試前端代碼

經過 vscode 調試前端代碼主要依賴於一個插件：Debugger for Chrome，該插件主要利用 Chrome 所開放出來的接口 來實現對其渲染的頁面進行調試。能夠經過 Shift + Cmd + X 打開插件中心，搜索對應插件後直接安裝。安裝完成並從新加載 vscode 後，能夠直接點擊調試按鈕並建立新的啓動配置。若是你以前已經建立過啓動配置了，就能夠直接打開 .vscode/launch.json 進行修改。

其中調試 Chrome 頁面的配置以下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "啓動一個獨立的 Chrome 以調試 frontend",
            "url": "http://localhost:8091/frontend",
            "webRoot": "${workspaceRoot}/frontend"
        }
    ]
}

如以前所述，經過第一個 launch 配置就能啓動一個經過 vscode 調試的 Chrome。你們能夠直接使用我組織好的項目 zry656565/vscode-debug-sample 進行測試，測試方法在該項目的 README 裏面寫得很清楚了。簡要步驟歸納爲：

1. npm run frontend

2. 啓動調試配置：「啓動一個獨立的 Chrome 以調試 frontend」

3. 在 frontend/index.js 中加斷點

4. 訪問 http://localhost:8091/frontend/

延伸問題

使用 launch 模式調試前端代碼存在一個問題，就是 vscode 會以新訪客的身份打開一個新的 Chrome 進程，也就是說你以前在 Chrome 上裝的插件都無法在這個頁面上生效（以下圖所示）。

在這種狀況下 attach 模式就有它存在的意義了：對一個已經啓動的 Chrome 進行監聽調試。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "監聽一個已經啓動調試模式的 Chrome",
            "port": 9222,
            "url": "http://localhost:8091/frontend",
            "webRoot": "${workspaceRoot}/frontend"
        }
    ]
}

其中 9222 是 Chrome 的調試模式推薦的端口，能夠根據須要進行修改。不過目前我並無成功實施這個設想，對此有興趣的同窗能夠從下面這兩個連接入手去研究一下：

• Chrome DevTools Protocol Viewer

• Debugger for Chrome / Attach

有一部分遇到的問題能夠直接在 Debugger for Chrome 的 FAQ 中獲得解答。

3. 調試經過 Nodemon 啓動的 Node 服務器

現在，使用 Node 服務器開發一些中間層的服務也慢慢歸入了所謂「大前端」的範疇。而在開發 Node 服務時，咱們一般要藉助相似於 nodemon 這樣的工具來避免頻繁手動重啓服務器。在這種狀況下，咱們又如何利用 vscode 來進行斷點調試呢？先來看看示例配置文件：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "附加於已啓動的 Node 服務器（debug模式）",
            "port": 5858,
            "restart": true
        },
        {
            "type": "node",
            "request": "attach",
            "name": "附加於已啓動的 Node 服務器（inspect模式）",
            "port": 9229,
            "restart": true
        }
    ]
}

首先，爲了配合 nodemon 在監聽到文件修改時重啓服務器，此處須要添加一個 restart 參數。同時你們可能注意到了，這裏給出了兩種模式，你們可能根據如下區別來選擇合適本身的協議：

Runtime	'Legacy Protocol'	'Inspector Protocol'
io.js	all	no
node.js	< 8.x	>= 6.3 (Windows: >= 6.9)
Electron	all	not yet
Chakra	all	not yet

通俗來講，舊版 Node (< 6.3) 推薦使用 Legacy Protocol (--debug模式，默認 5858 端口)，而新版的 Node (>= 6.3) 推薦使用 Inspector Protocol (--inspect模式，默認 9229 端口)。

須要注意的是，在啓動 nodemon 程序時，也要添加對應的參數，好比：

nodemon --debug server/app.js
nodemon --inspect server/app.js

詳細的例子一樣能夠在 zry656565/vscode-debug-sample 中找到。

參考資料

• VS Code - Debugger for Chrome - README

• Debugging in VS Code

• Chrome DevTools Protocol Viewer

• bdspen/nodemon_vscode

• Node.js Debugging in VS Code