斷點調(diào)試

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

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

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

安裝 node-inspector

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

啟動 node-inspector 服務(wù)

通過命令 node-inspector & 來啟動 node-inspector 服務(wù)。

啟動 Node.js 服務(wù)

使用 node --debug www/production.js 來啟動 Node.js 服務(wù)。

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

調(diào)試

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

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

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

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

在 VS Code 下斷點調(diào)試

打開項目

通過 VS Code 菜單 File -> Open 來打開 ThinkJS 2015+ 項目，如：

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

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

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

啟動服務(wù)

點擊上面的調(diào)試按鈕來啟動服務(wù)。如果已經(jīng)在命令行啟動了 Node.js 服務(wù)，需要關(guān)掉，否則會因為端口被占用導(dǎo)致錯誤。

開始調(diào)試

回到代碼模式，在 app/ 目錄下的文件里加上斷點（一定要是在 app/ 目錄下的文件，不能是 src/ 下的文件）。如：

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

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

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

配置 WebStorm

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

點擊右上角的 Edit Configurations，然后新建個項目，項目類型選擇 Node.js。如：

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

調(diào)試

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

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

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

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