新學習一種技術,確定會遇到不少坑,咱們須要找到這些坑,弄清楚這些坑出現的緣由和其中的原理。這種操做就叫作調試。html
程序調試的方法和工具多種多樣,在這裏我總結一下我在學習nodejs的過程當中,學到的和用到的調試方法。node
在JavaScript代碼中直接console.log,能夠在控制檯中打印信息。可是這樣的功能太單調,項目中模塊不少,功能繁雜,若是沒有一個約定好的console.log方法,很容易就致使打印的信息十分雜亂,可讀性不好。linux
nodejs有一個debug模塊,提供:git
定義log模塊,選擇特定模塊log輸出github
模塊文字顏色高亮web
log時間記錄chrome
輸出log到文件等功能express
首先npm
npm init、npm install debug --save 新建一個nodejs項目並安裝debug模塊windows
而後新建
app.js
var debug=require("debug")("mydebug:http"), work=require("./work"), http=require("http"); http.createServer(function(req,res){ debug(req.method + ' ' + req.url); res.end('hello\n'); }).listen(3000,function(){ debug("listening"); });
work.js
var debug=require("debug")("mydebug:work"); setInterval(function(){ debug("doing some work @ %s —— %s",new Date().getTime(),"with supervisor"); },2000);
上面兩個文件中分別建立了 mydebug:http 和 mydebug:work 兩個log模塊,在啓動項目的時候能夠配置要打印的log模塊,這個配置是支持通配符匹配的
在linux中啓動: DEBUG=mydebug:* node app.js 在windows中啓動 set DEBUG=mydebug:* & node app.js
這樣就能夠看到不一樣模塊的日誌打印了,同時也能夠看到日誌輸出時間。
在瀏覽器中訪問 localhost:3000 也能夠看到打印出的訪問信息
此外debug模塊還提供把日誌輸出到文件的功能
set DEBUG=mydebug:* & node app.js mydebug:work> debug.log
nodejs debug模塊文檔:https://github.com/visionmedia/debug
光有log還不夠,當程序出現問題時經過log能夠定位到錯誤位置,可是當咱們想查看錯誤現場的變量時,log就無能爲力了,通常狀況下咱們不會把全部的變量都打印出來。此時就須要斷點的功能了,在程序裏邊打上斷點,直接定位到錯誤位置,分析錯誤現場確認錯誤緣由。
nodejs內部提供一個debug機制,可讓程序進入debug模式,供開發者一步一步分析代碼發現問題。
共有3中啓動參數可讓程序進入debug模式
node debug app.js node --debug app.js node --debug-brk app.js
3種模式在調試形式上有必定區別。
node debug app.js
1.這種方式啓動程序,程序會進入debug模式,並運行到啓動文件的第1行就中止,等待開發者下發往下走的命令
2.這種方式啓動程序,直接在當前cmd中進入調試模式
node --debug app.js
1.這種方式啓動程序,程序會進入debug模式,並運行完全部代碼。這種啓動方式每每用於程序啓動的過程當中不須要調試,經過觸發時間進入回調函數的狀況,好比在某個http請求中打上斷點,等待客戶端訪問後進入斷點
2.這種方式啓動程序,會開啓一個TCP的端口監聽,在本cmd中不進入調試模式,須要另外開啓終端用node debug 命令鏈接調試端口
命令爲 node debug localhost debug端口
或者 node debug p node進程id
node --debug-brk app.js
1.這種方式啓動程序,程序會進入debug模式,可是不會運行代碼,直到有一個終端鏈接到了debug端口,纔開始執行代碼,並在第1行進入斷點
2.這種方式啓動程序,會開啓一個TCP的端口監聽,在本cmd中不進入調試模式,須要另外開啓終端用node debug 命令鏈接調試端口
進入debug模式後,能夠經過一些命令來設置斷點、取消斷點以及控制程序執行流程
命令文檔:https://nodejs.org/api/debugger.html#debugger_commands_reference
流程控制相關
cont
, c
- Continue executionnext
, n
- Step nextstep
, s
- Step inout
, o
- Step outpause
- Pause running code (like pause button in Developer Tools)斷點設置取消相關
setBreakpoint()
, sb()
- Set breakpoint on current linesetBreakpoint(line)
, sb(line)
- Set breakpoint on specific linesetBreakpoint('fn()')
, sb(...)
- Set breakpoint on a first statement in functions bodysetBreakpoint('script.js', 1)
, sb(...)
- Set breakpoint on first line of script.jsclearBreakpoint('script.js', 1)
, cb(...)
- Clear breakpoint in script.js on line 1變量查看相關
backtrace
, bt
- Print backtrace of current execution framelist(5)
- List scripts source code with 5 line context (5 lines before and after)watch(expr)
- Add expression to watch listunwatch(expr)
- Remove expression from watch listwatchers
- List all watchers and their values (automatically listed on each breakpoint)repl
- Open debugger's repl for evaluation in debugging script's contextrepl模式下能夠輸入變量名查看變量內容
node debug
從第一行代碼開始進入斷點,命令n進入下一行
node --debug
cmd1 開啓調試端口
cmd2 鏈接調試端口
設置斷點,取消斷點
cmd1 過了一分鐘才繼續打印
用進程id的方式鏈接調試模塊
上圖能夠看到pid爲4436
repl模式
上面的調試過程仍是略顯麻煩,有一些工具和node模塊能夠用來輔助調試。
supervisor是一個node模塊,用來啓動node項目。
supervisor能夠監控一些文件,當這些文件發生變化時自動刷新程序,不用從新啓動node程序。
npm install -g supervisor
監控work.js的變化並啓動node程序
把work中的debug信息修改一下
在任務管理器中結束app.js的node進程,能夠看到supervisor自動重啓了app.js的進程
webstorm提供了比較方便的debug工具
在菜單中 run-debug-app.js
能夠直接在行號的地方點擊,打上斷點
瀏覽器訪問 localhost:3000,進入斷點
能夠看到webstorm提供的一些調試工具
實際上webstorm的調試功能也是基於 --debug-brk來實現的,使用了63797端口來調試
若是不喜歡webstorm的調試工具,還可使用咱們熟悉的chrome調試工具來調試node代碼,不過須要安裝一個node模塊——node-inspector
npm install -g node-inspector
安裝完成後,開啓一個node調試端口 12345
而後新開一個cmd,開始一個node-inspector調試服務,鏈接到剛剛開啓的調試端口
根據提示訪問地址,便可使用咱們比較熟悉的chrome的調試工具來調試nodejs代碼
調試的技巧有不少,不少細節問題都須要不一樣的調試技巧來實現,之後用到新的了再補充吧~