斷點(diǎn)調(diào)試

使用 ES2015+ 特性來(lái)開(kāi)發(fā) Node.js 項(xiàng)目可以帶來(lái)巨大的便利，但同時(shí)由于有些特性現(xiàn)在還不支持，需要借助 Babel 編譯，運(yùn)行的代碼實(shí)際上是編譯后的代碼，這樣給調(diào)試帶來(lái)很大的麻煩。

ThinkJS 從 2.2.0 版本開(kāi)始支持?jǐn)帱c(diǎn)調(diào)試源代碼，同時(shí)如果運(yùn)行時(shí)出現(xiàn)報(bào)錯(cuò)，錯(cuò)誤也是定位到源代碼下。

使用 node-inspector 斷點(diǎn)調(diào)試

安裝 node-inspector

可以通過(guò) npm install -g node-inspector 來(lái)全局安裝 node-inspector，如果是在 *unix 系統(tǒng)下，需要在命令前面添加 sudo 執(zhí)行。

啟動(dòng) node-inspector 服務(wù)

通過(guò)命令 node-inspector & 來(lái)啟動(dòng) node-inspector 服務(wù)。

啟動(dòng) Node.js 服務(wù)

使用 node --debug www/production.js 來(lái)啟動(dòng) Node.js 服務(wù)。

這里跟之前啟動(dòng)服務(wù)有些區(qū)別，由于啟動(dòng)時(shí)需要添加 --debug 參數(shù)，所以不能用 npm start 來(lái)執(zhí)行啟動(dòng)了。

調(diào)試

訪問(wèn) http://127.0.0.1:8080/debug?port=5858，會(huì)出現(xiàn)調(diào)試頁(yè)面。

然后在 app 目錄下找到對(duì)應(yīng)的編譯后的文件，在對(duì)應(yīng)的地方加上斷點(diǎn)(這里一定要是在 app/ 目錄，不能是源代碼 src/ 目錄)，如：

然后新建標(biāo)簽頁(yè)，訪問(wèn)對(duì)應(yīng)的接口。這時(shí)候頁(yè)面會(huì)一直卡在那里。這時(shí)候返回 node-inspector 的標(biāo)簽頁(yè)，會(huì)看到內(nèi)容已經(jīng)跳到 ES2015+ 的代碼，如：

然后就可以利用后側(cè)的斷點(diǎn)工具進(jìn)行調(diào)試了。

在 VS Code(v1.7+) 下斷點(diǎn)調(diào)試

打開(kāi)項(xiàng)目

通過(guò) VS Code 菜單 File -> Open 來(lái)打開(kāi) ThinkJS 2015+ 項(xiàng)目，如：

設(shè)置調(diào)試配置

點(diǎn)擊左側(cè)的調(diào)試菜單，點(diǎn)擊上面的調(diào)試按鈕，會(huì)調(diào)試選擇的環(huán)境，選擇 Node.js。如：

選擇 Node.js 后，會(huì)生成一個(gè) launch.json 文件。修改里面的配置，將 sourceMaps 值改為 true(注意：有 2 個(gè) sourceMaps key，都修改)。

編輯配置為

{

// Use IntelliSense to learn about possible Node.js debug attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "啟動(dòng)程序",

"program": "${workspaceRoot}\\www\\development.js",

"cwd": "${workspaceRoot}",

"sourceMaps": true,

"outFiles": [

"${workspaceRoot}/app/**"

]

},

{

"type": "node",

"request": "attach",

"name": "附加到進(jìn)程",

"port": 5858

}

]

}

即：修改program配置，添加sourceMaps和outFiles配置。

啟動(dòng)服務(wù)

點(diǎn)擊上面的調(diào)試按鈕來(lái)啟動(dòng)服務(wù)。如果已經(jīng)在命令行啟動(dòng)了 Node.js 服務(wù)，需要關(guān)掉，否則會(huì)因?yàn)槎丝诒徽加脤?dǎo)致錯(cuò)誤。

開(kāi)始調(diào)試

回到代碼模式，在 app/ 目錄下的文件里加上斷點(diǎn)(一定要是在 app/ 目錄下的文件，不能是 src/ 下的文件)。

在源碼中直接添加斷點(diǎn)即可調(diào)試。

訪問(wèn)對(duì)應(yīng)的頁(yè)面，就可以看到代碼顯示的已經(jīng)是源代碼了，然后利用頂部的調(diào)試按鈕就可以調(diào)試了。如：

這樣就可以很好的在 VS Code 下調(diào)試 ES2015+ 代碼了。

在 WebStorm 下斷點(diǎn)調(diào)試

配置 WebStorm

將新建的 ThinkJS 2015+ 項(xiàng)目導(dǎo)入到 WebStorm 中，然后在首選項(xiàng)的 JavaScript 版本設(shè)置為 ECMASCRIPT 6。如：

點(diǎn)擊右上角的 Edit Configurations，然后新建個(gè)項(xiàng)目，項(xiàng)目類(lèi)型選擇 Node.js。如：

在右側(cè)配置項(xiàng) JavaScript File 里填入 www/development.js，或者通過(guò)右側(cè)的按鈕選擇也可以。如：

調(diào)試

點(diǎn)擊右上角的調(diào)試按鈕，會(huì)啟動(dòng) Node.js 服務(wù)。如：

如果之前已經(jīng)在命令行下啟動(dòng)了服務(wù)，需要關(guān)掉，否則會(huì)出現(xiàn)端口被占用導(dǎo)致報(bào)錯(cuò)的情況。

在 app/ 目錄下的文件設(shè)置斷點(diǎn)(一定要在 app/ 目錄下，不能是 src/ 目錄下)，如：

打開(kāi)瀏覽器，訪問(wèn)對(duì)應(yīng)的接口。返回 WebStorm，點(diǎn)擊調(diào)試按鈕就可以進(jìn)行調(diào)試了，并且看到的是源代碼。

總結(jié)

以上是生活随笔為你收集整理的html文件设置断点调试,断点调试的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。