斷點(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 下斷點(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，都修改）,。

啟動(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/ 下的文件）,。如：

訪問(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)目類型選擇 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)試了，并且看到的是源代碼,。