Visual Studio Code前端調試

在 Build 2015 大會上，微軟宣佈推出免費跨平臺的 Visual Studio Code 編輯器!Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。 如今已經代替 Sublime，成為前端工程師們最喜愛的代碼編輯器。同時，軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之作……

下面源碼時web前端小編跟大家分享一下通過VS Code來提升調試代碼的幸福度。接下來的內容將從以下幾方面進行展開：

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。簡要步驟概括為：

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 的調試模式推薦的端口，可以根據需要進行修改。

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 參數。同時大家可能注意到了，這裡給出了兩種模式，大家可能根據以下區別來選擇合適自己的協議：

通俗來說，舊版 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

瞭解更多有關web前端信息：http://www.itsource.cn

轉載文章：咀嚼之味