html文件设置断点调试,断点调试
斷點調試
使用 ES2015+ 特性來開發 Node.js 項目可以帶來巨大的便利，但同時由于有些特性現在還不支持，需要借助 Babel 編譯，運行的代碼實際上是編譯后的代碼，這樣給調試帶來很大的麻煩。
ThinkJS 從 2.2.0 版本開始支持斷點調試源代碼，同時如果運行時出現報錯，錯誤也是定位到源代碼下。
使用 node-inspector 斷點調試
安裝 node-inspector
可以通過 npm install -g node-inspector 來全局安裝 node-inspector，如果是在 *unix 系統下，需要在命令前面添加 sudo 執行。
啟動 node-inspector 服務
通過命令 node-inspector & 來啟動 node-inspector 服務。
啟動 Node.js 服務
使用 node --debug www/production.js 來啟動 Node.js 服務。
這里跟之前啟動服務有些區別，由于啟動時需要添加 --debug 參數，所以不能用 npm start 來執行啟動了。
調試
訪問 http://127.0.0.1:8080/debug?port=5858，會出現調試頁面。
然后在 app 目錄下找到對應的編譯后的文件，在對應的地方加上斷點(這里一定要是在 app/ 目錄，不能是源代碼 src/ 目錄)，如：
然后新建標簽頁，訪問對應的接口。這時候頁面會一直卡在那里。這時候返回 node-inspector 的標簽頁，會看到內容已經跳到 ES2015+ 的代碼，如：
然后就可以利用后側的斷點工具進行調試了。
在 VS Code(v1.7+) 下斷點調試
打開項目
通過 VS Code 菜單 File -> Open 來打開 ThinkJS 2015+ 項目，如：
設置調試配置
點擊左側的調試菜單，點擊上面的調試按鈕，會調試選擇的環境，選擇 Node.js。如：
選擇 Node.js 后，會生成一個 launch.json 文件。修改里面的配置，將 sourceMaps 值改為 true(注意：有 2 個 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": "啟動程序",
"program": "${workspaceRoot}\\www\\development.js",
"cwd": "${workspaceRoot}",
"sourceMaps": true,
"outFiles": [
"${workspaceRoot}/app/**"
]
},
{
"type": "node",
"request": "attach",
"name": "附加到進程",
"port": 5858
}
]
}
即：修改program配置，添加sourceMaps和outFiles配置。
啟動服務
點擊上面的調試按鈕來啟動服務。如果已經在命令行啟動了 Node.js 服務，需要關掉，否則會因為端口被占用導致錯誤。
開始調試
回到代碼模式，在 app/ 目錄下的文件里加上斷點(一定要是在 app/ 目錄下的文件，不能是 src/ 下的文件)。
在源碼中直接添加斷點即可調試。
訪問對應的頁面，就可以看到代碼顯示的已經是源代碼了，然后利用頂部的調試按鈕就可以調試了。如：
這樣就可以很好的在 VS Code 下調試 ES2015+ 代碼了。
在 WebStorm 下斷點調試
配置 WebStorm
將新建的 ThinkJS 2015+ 項目導入到 WebStorm 中，然后在首選項的 JavaScript 版本設置為 ECMASCRIPT 6。如：
點擊右上角的 Edit Configurations，然后新建個項目，項目類型選擇 Node.js。如：
在右側配置項 JavaScript File 里填入 www/development.js，或者通過右側的按鈕選擇也可以。如：
調試
點擊右上角的調試按鈕，會啟動 Node.js 服務。如：
如果之前已經在命令行下啟動了服務，需要關掉，否則會出現端口被占用導致報錯的情況。
在 app/ 目錄下的文件設置斷點(一定要在 app/ 目錄下，不能是 src/ 目錄下)，如：
打開瀏覽器，訪問對應的接口。返回 WebStorm，點擊調試按鈕就可以進行調試了，并且看到的是源代碼。
總結
以上是生活随笔為你收集整理的html文件设置断点调试,断点调试的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 神经网络人口预测matlab,BP神经网
- 下一篇： 单片机c语言 外部中断,单片机C语言代码