Visual Studio Code 前端調(diào)試不完全指南

dongfangyiyu 發(fā)布于2019-08-20 16:44 / 1522人閱讀

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

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

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

接下來的內(nèi)容將從以下幾方面進(jìn)行展開：

launch / attach

調(diào)試前端代碼

調(diào)試通過 Nodemon 啟動的 Node 服務(wù)器

1. launch / attach

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

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

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

launch模式：由 vscode 來啟動一個獨(dú)立的具有 debug 模式的程序

attach模式：附加于（也可以說“監(jiān)聽”）一個已經(jīng)啟動的程序（必須已經(jīng)開啟 Debug 模式）

這兩種截然不同的模式到底有什么具體的應(yīng)用場景呢？且看后文。

2. 調(diào)試前端代碼

通過 vscode 調(diào)試前端代碼主要依賴于一個插件：Debugger for Chrome，該插件主要利用 Chrome 所開放出來的接口來實(shí)現(xiàn)對其渲染的頁面進(jìn)行調(diào)試?？梢酝ㄟ^ Shift + Cmd + X 打開插件中心，搜索對應(yīng)插件后直接安裝。安裝完成并重新加載 vscode 后，可以直接點(diǎn)擊調(diào)試按鈕并創(chuàng)建新的啟動配置。如果你之前已經(jīng)創(chuàng)建過啟動配置了，就可以直接打開 .vscode/launch.json 進(jìn)行修改。

其中調(diào)試 Chrome 頁面的配置如下所示：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "啟動一個獨(dú)立的 Chrome 以調(diào)試 frontend",
            "url": "http://localhost:8091/frontend",
            "webRoot": "${workspaceRoot}/frontend"
        }
    ]
}

如之前所述，通過第一個 launch 配置就能啟動一個通過 vscode 調(diào)試的 Chrome。大家可以直接使用我組織好的項(xiàng)目 zry656565/vscode-debug-sample 進(jìn)行測試，測試方法在該項(xiàng)目的 README 里面寫得很清楚了。簡要步驟概括為：

npm run frontend

啟動調(diào)試配置：“啟動一個獨(dú)立的 Chrome 以調(diào)試 frontend”

在 frontend/index.js 中加斷點(diǎn)

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

延伸問題

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

在這種情況下 attach 模式就有它存在的意義了：對一個已經(jīng)啟動的 Chrome 進(jìn)行監(jiān)聽調(diào)試。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "監(jiān)聽一個已經(jīng)啟動調(diào)試模式的 Chrome",
            "port": 9222,
            "url": "http://localhost:8091/frontend",
            "webRoot": "${workspaceRoot}/frontend"
        }
    ]
}

其中 9222 是 Chrome 的調(diào)試模式推薦的端口，可以根據(jù)需要進(jìn)行修改。不過目前我并沒有成功實(shí)施這個設(shè)想，對此有興趣的同學(xué)可以從下面這兩個鏈接入手去研究一下：

Chrome DevTools Protocol Viewer

Debugger for Chrome / Attach

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

3. 調(diào)試通過 Nodemon 啟動的 Node 服務(wù)器

如今，使用 Node 服務(wù)器開發(fā)一些中間層的服務(wù)也慢慢納入了所謂“大前端”的范疇。而在開發(fā) Node 服務(wù)時，我們通常要借助類似于 nodemon 這樣的工具來避免頻繁手動重啟服務(wù)器。在這種情況下，我們又如何利用 vscode 來進(jìn)行斷點(diǎn)調(diào)試呢？先來看看示例配置文件：

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

首先，為了配合 nodemon 在監(jiān)聽到文件修改時重啟服務(wù)器，此處需要添加一個 restart 參數(shù)。同時大家可能注意到了，這里給出了兩種模式，大家可能根據(jù)以下區(qū)別來選擇合適自己的協(xié)議：

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模式，默認(rèn) 5858 端口)，而新版的 Node (>= 6.3) 推薦使用 Inspector Protocol (--inspect模式，默認(rèn) 9229 端口)。

需要注意的是，在啟動 nodemon 程序時，也要添加對應(yīng)的參數(shù)，比如：

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

詳細(xì)的例子同樣可以在 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

GPU云服務(wù)器云服務(wù)器 Visual Studio Code visual-studio-code visual studio調(diào)試異常 visual studio調(diào)試iis

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83123.html

發(fā)表評論

登陸后可評論

0條評論

dongfangyiyu

男|高級講師

我要關(guān)注我要私信

TA的文章

開課吧web全棧架構(gòu)師30期

閱讀 3715·2021-11-25 09:43
【Linux】linux環(huán)境基礎(chǔ)開發(fā)工具使用

閱讀 2683·2021-11-25 09:43
【開發(fā)工具學(xué)習(xí)之旅-JMeter】- JMeter簡介以及HTTP協(xié)議使用測試

閱讀 3891·2021-11-24 09:38
第一個安卓app應(yīng)用的開發(fā)--環(huán)境配置和第一項(xiàng)目創(chuàng)建

閱讀 720·2021-11-18 10:02
有了域名和主機(jī)怎么解決-主機(jī)名和域名如何填寫？

閱讀 2271·2021-09-22 15:53
簡單實(shí)現(xiàn)背景圖片碎片動畫

閱讀 3037·2019-08-30 15:44
實(shí)踐中的垂直居中

閱讀 2796·2019-08-30 14:01
什么是CSS Modules ？我們?yōu)槭裁葱枰麄?/a>

閱讀 2792·2019-08-29 15:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Visual Studio Code 前端調(diào)試不完全指南

相關(guān)文章

Node.js 指南（入門指南）

Visual Studio Code前端開發(fā)使用之旅

小技巧 - 收藏集 - 掘金

**專為 Laravel 定制的 Visual Studio Code 編輯器**

Top 10 JavaScript編輯器，你在用哪個？

發(fā)表評論

0條評論

dongfangyiyu

男|高級講師

TA的文章

開課吧web全棧架構(gòu)師30期

【Linux】linux環(huán)境基礎(chǔ)開發(fā)工具使用

【開發(fā)工具學(xué)習(xí)之旅-JMeter】- JMeter簡介以及HTTP協(xié)議使用測試

第一個安卓app應(yīng)用的開發(fā)--環(huán)境配置和第一項(xiàng)目創(chuàng)建

有了域名和主機(jī)怎么解決-主機(jī)名和域名如何填寫？

簡單實(shí)現(xiàn)背景圖片碎片動畫

實(shí)踐中的垂直居中

什么是CSS Modules ？我們?yōu)槭裁葱枰麄?/a>

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Visual Studio Code 前端調(diào)試不完全指南

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！