這篇文章將為大家詳細講解有關如何實現Node的Inspector代理,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
創新互聯公司于2013年創立,是專業互聯網技術服務公司,擁有項目成都做網站、網站建設網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元沾益做網站,已為上家服務,為沾益各地企業和個人服務,聯系電話:028-86922220
背景
平時做 node 開發的時候,通過 node inspector 來進行斷點調試是一個很常用的 debug 方式。但是有幾個問題會導致我們的調試效率降低。
問題一:當使用 vscode 進行斷點調試時,如果應用是通過 cluster 啟動的 inspector,那么每次當 worker 掛了重啟后,inspector 的端口都會自增。雖然在 node8.x 版本中可以指定 inspectPort 固定調試端口,但是在 node6.x 中是不支持的。這樣會導致每次 worker 重啟了就得在 vscode 中重新指定調試端口。
問題二:當使用 devtools 調試的時候,每次調試都需要拷貝 devtools 鏈接到 chrome 上調試,而上面說的端口變更問題則會導致 devtools 的鏈接變更,除此之外,每次重新啟動 inspector 也會導致 devtools 的鏈接變更,因為 websocket id 變了。
而把上面的兩個問題簡化一下就是:
在 vscode 中調試,在 inspector 端口變更或者 websocket id 變更后能夠重連。
在 devtools 中調試,在 inspector 端口變更或者 websocket id 變更后能夠重連。
解決方案
目前業界已經有解決方案就是 chrome 插件 Node Inspector Manager(Nim)
,不過這個只能解決在同個 inspector 端口下的應用重啟后鏈接更改的問題,卻無法解決 cluster 啟動導致的端口自增問題,除非在 Nim 中提前指定好多個端口,再者 Nim 是 chrome 上的插件,對于在 vscode 中的調試卻無能為力了。
所以最佳的解決方案自然是使用 node 來做 inspector 代理,解決方案如下:
對于第一個問題,在 vscode 上,它是會自己去調用 /json 接口獲取最新的 websocket id,然后使用新的 websocket id 連接到 node inspector 服務上。因此解決方法就是實現一個 tcp 代理功能做數據轉發即可。
對于第二個問題,由于 devtools 是不會自動去獲取新的 websocket id 的,所以我們需要做動態替換,所以解決方案就是代理服務去 /json 獲取 websocket id,然后在 websocket 握手的時候將 websocket id 進行動態替換到請求頭上。
畫了一張流程圖:
實現步驟
一、Tcp 代理
首先,先實現一個 tcp 代理的功能,其實很簡單,就是通過 node 的 net 模塊創建一個代理端口的 Tcp Server,然后當有連接過來的時候,再創建一個連接到目標端口即可,然后就可以進行數據的轉發了。
簡易的實現如下:
const net = require('net'); const proxyPort = 9229; const forwardPort = 5858; net.createServer(client => { const server = net.connect({ host: '127.0.0.1', port: forwardPort, }, () => { client.pipe(server).pipe(client); }); // 如果真要應用到業務中,還得監聽一下錯誤/關閉事件,在連接關閉時即時銷毀創建的 socket。 }).listen(proxyPort);
上面實現了比較簡單的一個代理服務,通過 pipe 方法將兩個服務的數據連通起來。client 有數據的時候會被轉發到 server 中,server 有數據的時候也會轉發到 client 中。
當完成這個 Tcp 代理功能之后,就已經可以實現 vscode 的調試需求了,在 vscode 中項目下 launch.json 中指定端口為代理端口,在 configurations 中添加配置
{ "type": "node", "request": "attach", "name": "Attach", "protocol": "inspector", "restart": true, "port": 9229 }
那么當應用重啟,或者更換 inspect 的端口,vscode 都能自動重新通過代理端口 attach 到你的應用。
二、獲取 websocketId
這一步開始,就是為了解決 devtools 鏈接不變的情況下能夠重新 attach 的問題了,在啟動 node inspector server 的時候,inspector 服務還提供了一個 /json 的 http 接口用來獲取 websocket id。
這個就相當簡單了,直接發個 http 請求到目標端口的 /json,就可以獲取到數據了:
[ { description: 'node.js instance', devtoolsFrontendUrl: '...', faviconUrl: 'https://nodejs.org/static/favicon.ico', id: 'e7ef6313-1ce0-4b07-b690-d3cf5274d8b0', title: '/Users/wanghx/Workspace/larva-team/vscode-log/index.js', type: 'node', url: 'file:///Users/wanghx/Workspace/larva-team/vscode-log/index.js', webSocketDebuggerUrl: 'ws://127.0.0.1:5858/e7ef6313-1ce0-4b07-b690-d3cf5274d8b0' } ]
上面數據中的 id 字段,就是我們需要的 websocket id 了。
三、Inspector 代理
拿到了 websocket id 后,就可以在 tcp 代理中做 websocket id 的動態替換了,首先我們需要固定鏈接,因此先定一個代理鏈接,比如我的代理服務端口是 9229,那么 chrome devtools 的代理鏈接就是:
chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/__ws_proxy__
上面除了最后面的 ws=127.0.0.1:9229/__ws_proxy__
其他都是固定的,而最后這個也一眼就可以看出來是 websocket 的鏈接。其中 __ws_proxy__
則是用來占位的,用于在 chrome devtools 向這個代理鏈接發起 websocket 握手請求的時候,將 __ws_proxy__
替換成 websocket id 然后轉發到 node 的 inspector 服務上。
對上面的 tcp 代理中的 pipe
邏輯的代碼做一些小修改即可。
const through = require('through3'); ... client .pipe(through.obj((chunk, enc, done) => { if (chunk[0] === 0x47 && chunk[1] === 0x45 && chunk[2] === 0x54) { const content = chunk.toString(); if (content.includes('__ws_proxy__')) { return done(null, Buffer.from(content.replace('__ws_proxy__', websocketId))); } } done(null, chunk); })) .pipe(server) .pipe(client); ...
通過 through3 創建一個 transform 流來對傳輸的數據進行一下更改。
簡單判斷一下 chunk 的頭三個字節是否為GET
,如果是 GET 說明這可能是個 http 請求,也就可能是 websocket 的協議升級請求。把請求頭打印出來就是這個樣子的:
GET /__ws_proxy__ HTTP/1.1 Host: 127.0.0.1:9229 Connection: Upgrade Pragma: no-cache Cache-Control: no-cache Upgrade: websocket Origin: chrome-devtools://devtools Sec-WebSocket-Version: 13 ...
然后將其中的路徑/__ws_proxy替換成對應的 websocketId,然后轉發到 node 的 inspector server 上,即可完成 websocket 的握手,接下來的 websocket 通信就不需要對數據做處理,直接轉發即可。
接下來就算各種重啟應用,或者更換 inspector 的端口,都不需要更換 debug 鏈接,只需要再 inspector server 重啟的時候,在下圖的彈窗中
點擊一下 Reconnect DevTools 即可恢復 debug。
關于“如何實現Node的Inspector代理”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
分享題目:如何實現Node的Inspector代理
地址分享:http://m.newbst.com/article10/ijphgo.html
成都網站建設公司_創新互聯,為您提供網站策劃、、建站公司、定制開發、動態網站、標簽優化
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯