相信有很多人和我一樣，習慣了使用chrome調(diào)試js程序，然而node剛開始提供的調(diào)試方式只用Debugger，只能通過node --debug xxx.js啟動命令行調(diào)試工具，及其的不方便。當然也有一些插件在此基礎上，使用websocket進行通信，使其可以在chrome瀏覽器中調(diào)試。體驗和直接在chrome上進行調(diào)試還是差了很多。
然而在Node v7.x.x后，Node有提供了一個Inspector，可以直接和Chrome DevTools進行通信，下面來詳細介紹進入調(diào)試的步驟，以及在使用過程中，我遇到的問題及解決辦法。
目錄
- 具體調(diào)試步驟詳細介紹
- 問題及解決方法
- 其他工具
- 相關文檔
具體調(diào)試步驟詳細介紹
1. Chrome DevTools和Node版本要求
-
Chrome DevTools： 55+
在地址欄中輸入chrome://settings/help，查看Chrome版本
Chroem版本 -
Node.js： v7.x.x+
在命令行中輸入node --version進行查看
Node.js版本
2. 運行腳本，并訪問調(diào)試頁面
總體步驟：先根據(jù)具體情況，選用不同的參數(shù)運行腳本；然后訪問相應的url獲取調(diào)試頁面的訪問地址；最后訪問這個地址，進入調(diào)試頁面。
在命令行中運行相應腳本，使用--inspect，或者--inspect-brk開啟調(diào)試開關，如node --inspect path/xxx.js 或者node --inspect-brk path/xxx.js。下面根據(jù)不同情況進行具體分析。
情況1
首先啟動腳本，如果你的腳本搭建http或者net服務器，你可以直接使用--inspect。如
let net = require('net');
// 創(chuàng)建一個net服務器
const server = net.createServer();
// 連接回調(diào)函數(shù)
server.on('connection', (conn) => {
console.log('connection');
});
// 監(jiān)聽8080端口
server.listen(8080);
// 監(jiān)聽回調(diào)函數(shù)
server.on('listening', () => {
console.log('listening')
});
注：
- 上圖是在v8.9.1版本時顯示的結果，后面會一次列舉出其他版本下的結果。
- Debugger listening on ws://127.0.0.1:9229/890b7b49-c744-4103-b0cd-6c5e8036be95，其中給定的url并不是提供給我們在Chrome瀏覽器中訪問的地址，而是Node.js和Chrome之間進行通信的的地址，它們通過websocket通過指定的端口進行通信，從而將調(diào)試結果實時展示在Chrome瀏覽器中。
然后，訪問http://IP:port/json/list（其中IP就是主機的IP地址，通常為127.0.0.1，port則是端口號，默認為9229，這是Node提供給任意調(diào)試工具鏈接調(diào)試的協(xié)議，可以通過命令行參數(shù)進行修改參數(shù)文檔地址），會返回相應http請求的元數(shù)據(jù)，包括WebSocket URL，UUID，Chrome DevTools URL。其中，WebSocket URL就是Node.js和Chrome之間的通信地址；UUID是一個特定的標識，每一個進程都會分配一個uuid，因此每一次調(diào)用會有出現(xiàn)不同的結果；Chrome DevTools URL就是我們的調(diào)試頁面的url。
如訪問http://127.0.0.1:9229/json/list，我們將會得到一下結果，其中devtoolsFrontendUrl就是我們需要訪問的地址。
最后，訪問這個地址后顯示頁面：
情況2（重要）
如果你的腳本運行完之后直接結束進程，那么你需要使用--inspect-brk來啟動調(diào)試器，這樣使得腳本可以代碼執(zhí)行之前break，否則，整個代碼直接運行到代碼結尾，結束進程，根本無法進行調(diào)試。如：
function sayHi(name) {
console.log('Hello, ' + name);
}
sayHi('yyp');
- 使用--inspect:
直接使用--inspect
直接使用--inspect，代碼執(zhí)行完畢后，進程直接結束，因此沒有辦法在進行調(diào)試。
- 使用--inspect-brk:
使用--inspect-brk
從上面三張圖中可以看出，此時該Node進程并沒有直接退出，并且我們可以通過訪問http://127.0.0.1:9229/json/list獲取頁面url，并且在調(diào)試頁面中我們也發(fā)現(xiàn)，程序在第一行break。
細心的你，可能還發(fā)現(xiàn)，與我們所寫的程序不同的是，調(diào)試頁面中，將我們的程序包裹在一個函數(shù)中，因為瀏覽器中不存在相應的對象（實際原因可以自行去研究）。
其他工具
node-inspector
在使用這個工具之前，我一直在使用node-inspector，只需要使用npm install -g node-inspector安裝node-inspector命令行工具，然后在使用node-inspector path/xxx.js即可啟動調(diào)試。
不足之處：調(diào)試體驗比較差，相對Chrome DevTools使用，感覺不夠流暢，并且在較高版本中，debugger被廢棄（v7.7.0+），進而無法使用，可能會報錯（v8.9.1版本直接報錯）。
vsCode + webStorm
提供直接調(diào)試功能（未使用過）。
問題及解決方法
1. 網(wǎng)上傳統(tǒng)的過時設置方法訪問地址
出現(xiàn)的問題，就是按照以上步驟操作之后，我們并沒有發(fā)現(xiàn)Node debugging的選項，此時，就不知道如何進行下去了。在這里給出的解釋是，在最新版的Chrome瀏覽器中，Node debugging不需要手動去啟動了，而是默認就是可以使用的。
1. 不同Node版本出現(xiàn)的問題
分別在三個大版本下進行了測試（v6.9.2，v7.3.0，v8.9.1）
v6.9.2 版本下使用情況
此時你會發(fā)現(xiàn)，命令行已經(jīng)給你訪問Chrome的url，并且這個url和訪問http://127.0.0.1:9229/json/list得到的devtoolsFrontendUrl屬性值一樣，但是，當你訪問這個url時，瀏覽器卻不能顯示調(diào)試頁面，此時，說明你的Node版本太低，需要使用更高版本。
v7.3.0 版本下使用情況
此時，命令行也提供了訪問調(diào)試頁面的鏈接。
v8.9.1 版本下使用情況
此時，命令行給定的的url并不是調(diào)試頁面的url，因此必須通過訪問http://127.0.0.1:9229/json/list來獲取調(diào)試頁面url。
