vscode 調(diào)試 node.js的方法步驟
引言
作為前端工程師經(jīng)常打交道的開發(fā)工具無非 IDE 編輯器 和 Chrome，在 Chrome 中調(diào)試是非常方便的，直接在 開發(fā)者工具的 source 欄打斷點(diǎn)就可以了。那么，如果遇到需要寫 node 相關(guān)的代碼，比如 webpack 配置項(xiàng)，應(yīng)該怎么調(diào)試來實(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問: 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 ，這樣才可以開啟 node 的調(diào)試功能。
VS Code 調(diào)試菜單點(diǎn)擊執(zhí)行按鈕，我們就可以愉快的調(diào)試 webpack.dev.js 代碼了。
可以看到，webpack 內(nèi)部的數(shù)據(jù)結(jié)構(gòu)盡收眼底。
Chrome 開發(fā)者工具風(fēng)格
剛才的 launch.json 中，有 port: 9229 這個(gè)屬性，我們可以在瀏覽器訪問 chrome://inspect ，就能以我們熟悉的 chrome 風(fēng)格來調(diào)試 node 程序了。
總結(jié)
調(diào)試程序能夠幫助我們對(duì)代碼有更深刻的了解，能夠提供運(yùn)行時(shí)的執(zhí)行上下文、調(diào)用棧等信息。此外，在調(diào)試線上混淆后的代碼時(shí)，對(duì)各種 a、o、f 等難以理解的變量名參數(shù)名也能通過運(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解nodejs 開發(fā)企業(yè)微信第三方應(yīng)用入門教程
這篇文章主要介紹了詳解nodejs 開發(fā)企業(yè)微信第三方應(yīng)用入門教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
搭建一個(gè)Koa后端項(xiàng)目腳手架的方法步驟
這篇文章主要介紹了搭建一個(gè)Koa后端項(xiàng)目腳手架的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在Node.js中操作MongoDB常見的庫有mongodb原生驅(qū)動(dòng)和mongoose等,本文將使用mongodb官方驅(qū)動(dòng)包來進(jìn)行示例,在開始之前,請(qǐng)確保已經(jīng)安裝了MongoDB數(shù)據(jù)庫并且在本地啟動(dòng)了MongoDB服務(wù),需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關(guān)于nodejs的錯(cuò)誤處理過程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了NodeJS中Buffer模塊詳解，十分的詳細(xì),需要的朋友可以參考下2015-01-01
node微信開發(fā)之獲取access_token+自定義菜單
這篇文章主要介紹了node微信開發(fā)之獲取access_token+自定義菜單，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
node.js實(shí)現(xiàn)批量修改git項(xiàng)目的數(shù)據(jù)源(步驟詳解)
文章介紹了如何使用Node.js腳本批量修改大型項(xiàng)目中各個(gè)項(xiàng)目的Git地址域名,通過引入模塊、聲明域名常量、定義遍歷函數(shù)和修改目錄等步驟,實(shí)現(xiàn)一次性批量修改,從而節(jié)省時(shí)間和精力2024-11-11
這篇文章主要介紹了Nodejs抓取html頁面內(nèi)容的關(guān)鍵代碼，另外還給大家附上了nodejs抓取網(wǎng)頁內(nèi)容，非常不錯(cuò)，對(duì)node.js抓取頁面內(nèi)容感興趣的朋友一起學(xué)習(xí)吧2016-08-08
這篇文章主要介紹了Node.js之刪除文件夾(含遞歸刪除)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
Node.js+express+socket實(shí)現(xiàn)在線實(shí)時(shí)多人聊天室
這篇文章主要為大家詳細(xì)介紹了Node.js+express+socket實(shí)現(xiàn)在線實(shí)時(shí)多人聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07