node js 調試方法

1. node-debug tutorial

你們對nodejs調試應該都比較頭疼，至少我這個不用IDE寫js的人很頭疼這個，其實node的生態圈很是好 有很是好的工具和很是潮的開發方式

這裏總結了3法3例，但願能對你們有所幫助

變成3種境界

• 打日誌
• 斷點調試
• 測試驅動開發（tdd | bdd）

3種方法

• console.log
• 斷點調試：node debugger 或node inspector 或vscode
• 測試驅動開發

3個例子

• hello world
• 繼承例子
• express helloworld

2種模式

• Launch Program
• Attach to Process

2. 打日誌

瞭解console上的方法，好比dir等

雖然很low，但很實用

3. 斷點調試

中規中矩，對大部分程序員應該都是比較熟悉的。不管是chrome仍是eclipse，仍是idea、webstorm等，只要會一種，熟悉起來就很是容易。

3.1. node debug

V8 提供了一個強大的調試器，能夠經過 TCP 協議從外部訪問。Nodejs提供了一個內建調試器來幫助開發者調試應用程序。想要開啓調試器咱們須要在代碼中加入debugger標籤，當Nodejs執行到debugger標籤時會自動暫停（debugger標籤至關於在代碼中開啓一個斷點）。

3.1.1. hello world例子

代碼以下：

see helloword-debug.js

var hello = 'hello'; var world = 'nodejs'; debugger; var hello_world = hello + ' ' + world; console.log(hello_world); 

執行命令：node debug helloword-debug.js 就能夠進入調試模式。

固然，首先須要在程序代碼中手動添加中斷debugger; ， 這樣當以調試模式運行時，程序會自動中斷，而後等候你調試，就像GDB同樣，能夠用help命令查看本身均可以使用哪些調試命令。

node-debug-tutorial git:(master) ✗ node debug helloword-debug.js < debugger listening on port 5858 connecting... ok break in helloword-debug.js:1  1 var hello = 'hello';  2 var world = 'nodejs';  3 debug> help Commands: run (r), cont (c), next (n), step (s), out (o), backtrace (bt), setBreakpoint (sb), clearBreakpoint (cb), watch, unwatch, watchers, repl, restart, kill, list, scripts, breakOnException, breakpoints, version debug> debug> n break in helloword-debug.js:2  1 var hello = 'hello';  2 var world = 'nodejs';  3  4 debugger; debug> repl Press Ctrl + C to leave debug repl > hello 'hello' 

此時repl打開js上下文即時求值環境，和chrome的debug的console是同樣的。

若是想退出，請按下ctrl + c,這樣就能夠返 到debug模式

debug> n break in helloword-debug.js:4  2 var world = 'nodejs';  3  4 debugger;  5  6 var hello_world = hello + ' ' + world; debug> n break in helloword-debug.js:6  4 debugger;  5  6 var hello_world = hello + ' ' + world;  7 console.log(hello_world);  8 debug> n break in helloword-debug.js:7  5  6 var hello_world = hello + ' ' + world;  7 console.log(hello_world);  8  9 }); debug> repl Press Ctrl + C to leave debug repl > hello_world 'hello nodejs' > end 

若是想終止調試，請按下2次ctrl + c鍵

3.1.2. 命令說明

可選項	用途
run	執行腳本,在第一行暫停
restart	從新執行腳本
cont, c	繼續執行,直到遇到下一個斷點
next, n	單步執行
step, s	單步執行並進入函數
out, o	從函數中步出
setBreakpoint(), sb()	當前行設置斷點
setBreakpoint(‘f()’), sb(...)	在函數f的第一行設置斷點
setBreakpoint(‘script.js’, 20), sb(...)	在 script.js 的第20行設置斷點
clearBreakpoint, cb(...)	清除全部斷點
backtrace, bt	顯示當前的調用棧
list(5)	顯示當前執行到的先後5行代碼
watch(expr)	把表達式 expr 加入監視列表
unwatch(expr)	把表達式 expr 從監視列表移除
watchers	顯示監視列表中全部的表達式和值
repl	在當前上下文打開即時求值環境
kill	終止當前執行的腳本
scripts	顯示當前已加載的全部腳本
version	顯示v8版本

這裏就和gdb等調試器如出一轍了

迴歸一下，debug的2種模式：

• js上下文即時求值環境模式
• debug斷點模式

八卦一下啊，你瞭解vi的3種工做模式麼？

• 普通(normal)模式，又稱命令模式
• 插入(insert)模式
• 命令行(cmdline)模式

化用一下更容易理解

node debugger官方文檔

上面有更多的例子和api，有了上面的基礎，學習會很是簡單。

3.1.3. FAQ

注意,若是出現

< Failed to open socket on port 5858, waiting 1000 ms before retrying 

請結束掉全部debug進程

ps -ef|grep debug-brk|awk '{print $2}'|xargs kill -9 

3.2. node inspector

上面這種方式稍微有些麻煩，做爲前端開發人員，咱們寫JS代碼調試的時候通常都用FireBug或Chrome瀏覽器內置的調試工具，其實nodejs程序也能夠這樣子來調試，可是首先須要安裝一個node-inspector的模塊。

node-inspector是經過websocket方式來轉向debug輸入輸出的。所以，咱們在調試前要先啓動node-inspector來監聽Nodejs的debug調試端口。

3.2.1. 安裝

這個須要用npm來安裝，只須要執行下列語句：

npm install -g node-inspector 

安裝完成以後，一般能夠直接這樣啓動在後臺：

node-inspector & 

默認會監聽8080端口，固然，也可能經過使用--web-port參數來修改。而後，在執行node程序的時候，多加個參數：--debug-brk, 以下：

node --debug-brk app.js 

或者

node-debug app.js 

控制檯會返回「debugger listening on port 5858」， 如今打開瀏覽囂，訪問http://localhost:8080/debug?port=5858，這時候就會打開一個很像Chrome內置調試工具的界面，而且代碼斷點在第一行，下面就可使用這個來調試了。

經常使用調試功能

• 增長斷點，查看調用棧，變量等
• 使用console打印查看日誌

使用方法和chrome的inspect element調試web開發是同樣的。

調試仍是很方便的，並且能夠遠程調試。其實原理很簡單，它啓動的是一個web server，咱們要作的就是把localhost換成對應ip便可，要注意服務器的防火牆哦。

3.2.2. 測試extend.js

測試一下繼承是否ok，首先執行命令，打印出結果，但這種辦法才挫了

➜ node-debug-tutorial git:(master) node extend.js node debug hello node debug 

開始使用node-inspector調試

3.2.2.1. 啓動

➜ node-debug-tutorial git:(master) node-debug extend.js Node Inspector is now available from http://localhost:8080/debug?port=5858 Debugging `extend.js` debugger listening on port 5858 

3.2.2.2. 界面說明

mac系統大部分人都記不住這些按鍵，下面給出說明

Symbol	Key
⌘	Command Key
⌃	Control Key
⌥	Option Key
⇧	Shift Key

斷點操做

• resume script execution（F8） 掛起斷點，也能夠理解爲放棄當前斷點，若是有下一個斷點，會自動斷住得
• step over（F10） 跳過這行，到下一行，若是當前函數結束，會跳到調用棧的上一級的下一行
• step into（F11） 進入當前行代碼裏的函數內部
• step out（Shift + F11） 從當前函數退出到以前進入的代碼處

控制檯操做

• 不能使用var，直接打印變量傑克

3.2.2.3. 增長斷點，並打印出this

3.2.2.4. 斷點下一步，並打印出this

3.2.2.5. 結論

經過

base.call(this); 

這行代碼，明顯看到test對象的this被改變了，即便test擁有了base的全部屬性和方法，這是最簡單的實現繼承的方法，固然多重繼承mixin也能夠是這樣的原理

3.2.3. 測試express helloworld

這種測試通常都是看request裏的params，query和body等

準備工做

npm init . npm install --save express touch express-helloworld.js 

測試express-helloworld.js代碼

var express = require('express'); var app = express(); app.get('/',function(req,res){  res.send('hello,world'); }); app.listen(5008); 

執行,安裝服務器自動重載模塊

npm install -g supervisor supervisor express-helloworld.js 

打開瀏覽器訪問http://127.0.0.1:5008/就會看到helloworld返回

此時終止supervisor express-helloworld.js,使用ctrl + c終止。

而後使用node-inspect調試

➜ node-debug-tutorial git:(master) ✗ node-debug express-helloworld.js Node Inspector is now available from http://localhost:8080/debug?port=5858 Debugging `express-helloworld.js` debugger listening on port 5858 

增長斷點

使用curl來模擬get請求，增長一個參數test，便於一會的debug

curl -G -d "test=string" http://127.0.0.1:5008/ 

此時瀏覽器頁面會停在斷點處，在console裏輸入req.query便可以查到參數

3.3. vscode

爲何選用vsc，一個緣由就是由於調試

• node-inspector雖好，項目已大特別慢，這方面vsc作了很多優化
• tdd/bdd雖好，還不能徹底實現

vsc官方說

We improved stepping performance by loading the scopes and variables of stack frames lazily. This improvement is based on a protocol change that affects all debug adapters. 

意思就是他們作了不少優化

使用中，確實比node-inspector快不少

vsc調試使用方法也很簡單,步驟以下：

• 打開要調試的文件，按f5,編輯器會生成一個launch.json
• 修改launch.json相關內容，主要是name和program字段，改爲和你項目對應的
• 點擊編輯器左側長得像蜘蛛的那個按鈕
• 點擊左上角DEBUG後面的按鈕，啓動調試
• 打斷點，盡情調試（只要你會chrome調試，如出一轍）

更多示例，參見https://github.com/i5ting/vsc

4. 測試驅動開發

和斷點調試思惟相反，先寫測試用例，知道本身要實現什麼效果，再去寫代碼。因此不是很容易接受。並且一旦重構，就要重寫測試，也是比較痛苦的。但測試對軟件的穩定性和質量是相當重要的。因此一旦習慣測試，你會愛不釋手。

• tdd
• bdd
• 代碼覆蓋率

4.1. 測試框架

• nodeunit
• mocha
• ava
• jest

4.1.1. 更多測試

npm install --save-dev chai npm install --save-dev sinon npm install --save-dev supertest npm install --save-dev zombie 

4.1.2. 代碼覆蓋率

修改Gulpfile.js

• auto test
• 代碼測試覆蓋率

npm install --save-dev gulp npm install --save-dev gulp-mocha npm install --save-dev gulp-istanbul 

建立gulpfilejs

var gulp = require('gulp'); var istanbul = require('gulp-istanbul'); var mocha = require('gulp-mocha'); gulp.task('test', function (cb) {  gulp.src(['db/**/*.js'])  .pipe(istanbul()) // Covering files  .on('finish', function () {  gulp.src(['test/*.js'])  .pipe(mocha())  .pipe(istanbul.writeReports()) // Creating the reports after tests runned  .on('end', cb);  }); }); gulp.task('default',['test'], function() {  gulp.watch(['./db/**/*','./test/**/*'], ['test']); }); gulp.task('watch',['test'], function() {  gulp.watch(['./db/**/*','./test/**/*'], ['test']); }); 

測試

node_modules/.bin/gulp 這時，你試試修改測試或源文件試試，看看會不會自動觸發測試

固然，若是你喜歡只是測試一次，能夠這樣作

node_modules/.bin/gulp test 若是你不熟悉gulp，能夠再這裏https://github.com/i5ting/js-tools-best-practice/blob/master/doc/Gulp.md學習

修改package.json

"scripts": { "start": "./node_modules/.bin/supervisor ./bin/www", "test": "./node_modules/.bin/mocha -u tdd" },

4.2. 資源

• debugger官方文檔

• node-inspector倉庫地址

• nodeunit

• mocha

• https://github.com/baryon/tracer

• http://www.habdas.org/node-js-debugging-primer/

• https://github.com/visionmedia/mocha

• http://visionmedia.github.io/mocha/

• http://mochajs.org/

• https://github.com/chaijs/chai

• http://chaijs.com/

• http://sinonjs.org/

• http://zombie.labnotes.org/

• https://github.com/tj/supertest（api test文檔）

• https://github.com/tj/superagent/blob/master/test/node/agency.js（api test示例）

• https://github.com/i5ting/js-tools-best-practice/blob/master/doc/Gulp.md

• https://github.com/SBoudrias/gulp-istanbul

5. 2種模式

5.1. Launch Program

簡單說，就是直接執行，上文最簡單的斷點調試都屬於這種模式

5.2. Attach to Process

簡單說，是調試某個已啓動的線程

好比，我在終端裏，node --debug啓動了某個程序，

node --debug app.js Debugger listening on 127.0.0.1:5858 

這樣就啓動了debugger，而後你就能夠在vscode或者node inspector裏attach裏