Visual Studio Code 前端調試不完全指南

dongfangyiyu 發布于2019-08-20 16:44 / 1492人閱讀

摘要：接下來的內容將從以下幾方面進行展開調試前端代碼調試通過啟動的服務器要使用的調試功能，首先就得配置文件。調試前端代碼通過調試前端代碼主要依賴于一個插件，該插件主要利用所開放出來的接口來實現對其渲染的頁面進行調試。

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

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

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

launch / attach

調試前端代碼

調試通過 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 里面寫得很清楚了。簡要步驟概括為：

npm run frontend

啟動調試配置：“啟動一個獨立的 Chrome 以調試 frontend”

在 frontend/index.js 中加斷點

訪問 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83123.html

Node.js 指南（入門指南）

摘要：調試指南本指南將幫助你入門調試應用程序和腳本。這樣做可能會給你帶來潛在的重大安全威脅，我們建議你確保適當的防火墻和訪問控制措施，以防止安全風險。不再維護或記錄調試協議。入門指南安裝Node之后，讓我們嘗試構建我們的第一個Web服務器，創建名為app.js的文件，并粘貼以下代碼： const http = require(http); const hostname = 127.0....

ybak 2019-08-23 13:02 評論0 收藏0
Visual Studio Code前端開發使用之旅

摘要：更好的斷點控制啟用禁用重新啟用可以在調試視圖中的斷點區域設置。編輯器邊距中的斷點一般用紅色的實心圓表示。前端開發必備插件功能性插件匹配標簽，關閉對應的標簽。這可以使得團隊內的書寫更為規范且具有一致性。 Visual Studio Code是個現下比較流行的編輯器，啟動非常快，完全可以用來代替其他文本文件編輯工具。又可以用來做開發，支持各種語言，相比其他IDE，輕量級完全可配置還集成Gi...

stormjun 2019-08-21 18:46 評論0 收藏0
小技巧 - 收藏集 - 掘金

摘要：然而學習布局，你只要學習幾個手機端頁面自適應解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應解決方案布局，意外受到很多朋友的關注和喜歡。十分鐘學會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級，上手簡單，因為只能抓http和https數據...

A Loity 2019-08-20 17:45 評論0 收藏0
專為 Laravel 定制的 Visual Studio Code 編輯器

摘要：此擴展使用安裝在已打開的工作區文件夾內的庫。此擴展由開發，是一個與之間的調試適配器。它具有零依賴性，并可以極大程度地工作于任何規模的項目里。查看先前文件的拷貝或者將其與工作區版本或先前版本進行比較，查看編輯器里對活動行的更改。 showImg(https://segmentfault.com/img/remote/1460000018002818?w=1223&h=630); 嗨工匠...

Mertens 2019-07-01 11:16 評論0 收藏0
Top 10 JavaScript編輯器，你在用哪個？

摘要：在這個編輯器中，和是其中排名靠前的兩個。是一個免費的輕量級編輯器和，用于和開發。對于免費的代碼編輯器來說，是一個很好的選擇。可以安裝兩個命令行實用程序，用于從啟動編輯器，用于管理的軟件包。對于JavaScript程序員來說，目前有很多很棒的工具可供選擇。本文將會討論10個優秀的支持javascript，HTML5和CSS開發，并且可以使用Markdown進行文檔編寫的文本編輯器。為什...

zombieda 2019-08-21 11:45 評論0 收藏0