国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

dongfangyiyu / 1481人閱讀

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

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

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

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

launch / attach

調(diào)試前端代碼

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

1. launch / attach

要使用 vscode 的調(diào)試功能，首先就得配置 .vscode/launch.json 文件。以最簡(jiǎn)單的 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 來(lái)啟動(dòng)一個(gè)獨(dú)立的具有 debug 模式的程序

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

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

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

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

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

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

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

npm run frontend

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

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

訪問(wèn) http://localhost:8091/frontend/

延伸問(wèn)題

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

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

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

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

Chrome DevTools Protocol Viewer

Debugger for Chrome / Attach

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

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

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

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

首先，為了配合 nodemon 在監(jiān)聽(tīng)到文件修改時(shí)重啟服務(wù)器，此處需要添加一個(gè) restart 參數(shù)。同時(shí)大家可能注意到了，這里給出了兩種模式，大家可能根據(jù)以下區(qū)別來(lái)選擇合適自己的協(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

通俗來(lái)說(shuō)，舊版 Node (< 6.3) 推薦使用 Legacy Protocol (--debug模式，默認(rèn) 5858 端口)，而新版的 Node (>= 6.3) 推薦使用 Inspector Protocol (--inspect模式，默認(rèn) 9229 端口)。

需要注意的是，在啟動(dòng) nodemon 程序時(shí)，也要添加對(duì)應(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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83123.html

相關(guān)文章

  • Node.js 指南（入門指南）

    摘要：調(diào)試指南本指南將幫助你入門調(diào)試應(yīng)用程序和腳本。這樣做可能會(huì)給你帶來(lái)潛在的重大安全威脅，我們建議你確保適當(dāng)?shù)姆阑饓驮L問(wèn)控制措施，以防止安全風(fēng)險(xiǎn)。不再維護(hù)或記錄調(diào)試協(xié)議。 入門指南 安裝Node之后，讓我們嘗試構(gòu)建我們的第一個(gè)Web服務(wù)器，創(chuàng)建名為app.js的文件，并粘貼以下代碼： const http = require(http); const hostname = 127.0....

    ybak 評(píng)論0 收藏0

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

    摘要：更好的斷點(diǎn)控制啟用禁用重新啟用可以在調(diào)試視圖中的斷點(diǎn)區(qū)域設(shè)置。編輯器邊距中的斷點(diǎn)一般用紅色的實(shí)心圓表示。前端開(kāi)發(fā)必備插件功能性插件匹配標(biāo)簽，關(guān)閉對(duì)應(yīng)的標(biāo)簽。這可以使得團(tuán)隊(duì)內(nèi)的書(shū)寫(xiě)更為規(guī)范且具有一致性。 Visual Studio Code是個(gè)現(xiàn)下比較流行的編輯器，啟動(dòng)非常快，完全可以用來(lái)代替其他文本文件編輯工具。又可以用來(lái)做開(kāi)發(fā)，支持各種語(yǔ)言，相比其他IDE，輕量級(jí)完全可配置還集成Gi...

    stormjun 評(píng)論0 收藏0

  • 小技巧 - 收藏集 - 掘金

    摘要：然而學(xué)習(xí)布局，你只要學(xué)習(xí)幾個(gè)手機(jī)端頁(yè)面自適應(yīng)解決方案布局進(jìn)階版附源碼示例前端掘金一年前筆者寫(xiě)了一篇手機(jī)端頁(yè)面自適應(yīng)解決方案布局，意外受到很多朋友的關(guān)注和喜歡。 十分鐘學(xué)會(huì) Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個(gè)http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級(jí)，上手簡(jiǎn)單，因?yàn)橹荒茏ttp和https數(shù)據(jù)...

    A Loity 評(píng)論0 收藏0

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

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

    Mertens 評(píng)論0 收藏0

  • Top 10 JavaScript編輯器，你在用哪個(gè)？

    摘要：在這個(gè)編輯器中，和是其中排名靠前的兩個(gè)。是一個(gè)免費(fèi)的輕量級(jí)編輯器和，用于和開(kāi)發(fā)。對(duì)于免費(fèi)的代碼編輯器來(lái)說(shuō)，是一個(gè)很好的選擇。可以安裝兩個(gè)命令行實(shí)用程序，用于從啟動(dòng)編輯器，用于管理的軟件包。 對(duì)于JavaScript程序員來(lái)說(shuō)，目前有很多很棒的工具可供選擇。本文將會(huì)討論10個(gè)優(yōu)秀的支持javascript，HTML5和CSS開(kāi)發(fā)，并且可以使用Markdown進(jìn)行文檔編寫(xiě)的文本編輯器。為什...

    zombieda 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<