快捷導(dǎo)航

vscode 調(diào)試 node.js的方法步驟

更新時(shí)間：2020年09月15日 08:49:04 作者：Gatsby

這篇文章主要介紹了vscode 調(diào)試 node.js的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

引言

作為前端工程師經(jīng)常打交道的開(kāi)發(fā)工具無(wú)非 IDE 編輯器和 Chrome，在 Chrome 中調(diào)試是非常方便的，直接在開(kāi)發(fā)者工具的 source 欄打斷點(diǎn)就可以了。那么，如果遇到需要寫(xiě) node 相關(guān)的代碼，比如 webpack 配置項(xiàng)，應(yīng)該怎么調(diào)試來(lái)實(shí)現(xiàn)我們的需求呢？

VS Code 配置

在 VS Code 中單獨(dú)有 debug 的菜單，需要指定 launch.json 文件，該文件為 VS Code 提供啟動(dòng)調(diào)試所需的各項(xiàng)配置。

// launch.json
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387

{
 "version": "0.2.0",
 "configurations": [
  {
   "type": "node",
   "request": "launch",
   "name": "Launch via NPM",
   "runtimeExecutable": "npm",
   "runtimeArgs": ["run-script", "debug"],
   "cwd": "${workspaceFolder}/envloader/mobile",
   "port": 9229
  }
 ]
}

上面是我們項(xiàng)目的調(diào)試配置， runtimeExecutable 指明調(diào)試方式是 npm 方式， runtimeArgs 為執(zhí)行調(diào)試傳的參數(shù)， cwd 指定工作目錄。

// package.json

"scripts": {
  "debug": "node --max_old_space_size=12288 --inspect-brk node_modules/webpack/bin/webpack.js --config build/webpack.dev.js --watch"
 },

注意 debug 腳本要傳入 --inspect-brk ，這樣才可以開(kāi)啟 node 的調(diào)試功能。

VS Code 調(diào)試菜單點(diǎn)擊執(zhí)行按鈕，我們就可以愉快的調(diào)試 webpack.dev.js 代碼了。

可以看到，webpack 內(nèi)部的數(shù)據(jù)結(jié)構(gòu)盡收眼底。

Chrome 開(kāi)發(fā)者工具風(fēng)格

剛才的 launch.json 中，有 port: 9229 這個(gè)屬性，我們可以在瀏覽器訪問(wèn) chrome://inspect ，就能以我們熟悉的 chrome 風(fēng)格來(lái)調(diào)試 node 程序了。

總結(jié)

調(diào)試程序能夠幫助我們對(duì)代碼有更深刻的了解，能夠提供運(yùn)行時(shí)的執(zhí)行上下文、調(diào)用棧等信息。此外，在調(diào)試線上混淆后的代碼時(shí)，對(duì)各種 a、o、f 等難以理解的變量名參數(shù)名也能通過(guò)運(yùn)行時(shí)的變量數(shù)據(jù)輕易分析出代碼的基本邏輯。

到此這篇關(guān)于vscode 調(diào)試 node.js的方法步驟的文章就介紹到這了,更多相關(guān)vscode 調(diào)試 node.js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: