1. 程式人生 > >使用VisualStudioCode遠端除錯NodeJS程式

使用VisualStudioCode遠端除錯NodeJS程式

Kagula

2018-08-02

環境:
[1]NodeJS v8.9.1
[2]Visual Studio Code 1.25.1
[3]有兩臺計算機:
   第一臺計算機上裝了linux系統, 執行nodeJS程式.
   我們稱之為遠端計算機,  ip地址為192.168.168.168.
   第二臺計算機上裝了windows系統, 執行Visual Studio Code, 要遠端除錯第一臺計算機上的NodeJS程式.
   我們稱之為本地計算機.

第一步:在遠端計算機上啟動遠端Listen


node --inspect=XX:9229  xxx.js
其中XX是ip地址,  不能用127.0.0.1必須要用192.168.168.168這種形式的,  否則其它計算機會遠端不到你執行NodeJS的計算機.
如果你的Node.JS是多程序程式, 會打印出類似下面的資訊
[[email protected] bimServer]# ./run_app test
Debugger listening on ws://192.168.168.168:9229/0f2f6b22-3deb-4a23-b148-e5bfbcf56bad
For help see https://nodejs.org/en/docs/inspector
Debugger listening on ws://192.168.168.168:9230/3aa39861-0d96-404e-a075-62bbcf825c4e
For help see https://nodejs.org/en/docs/inspector
...
第一個程序在9229埠listen, 第二個埠在9230埠listen.


第二步:在本地計算機上檢視遠端除錯功能是否已經啟動了.
http://192.168.168.168:9229/json/version
如果遠端除錯功能正確啟動的話, 會打印出下面的資訊
[ {
  "description": "node.js instance",
  "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=192.168.168.168:9229/0f2f6b22-3deb-4a23-b148-e5bfbcf56bad",
  "faviconUrl": "https://nodejs.org/static/favicon.ico",
  "id": "0f2f6b22-3deb-4a23-b148-e5bfbcf56bad",
  "title": "3drepo.js",
  "type": "node",
  "url": "file:///Zdata/wwwroot/bimServer/3drepo.js",
  "webSocketDebuggerUrl": "ws://192.168.168.168:9229/0f2f6b22-3deb-4a23-b148-e5bfbcf56bad"
} ]


第三步:
Visual Studio Code中啟動遠端除錯launch.json清單
注意這裡用了9230埠,而不是9229埠,是因為我們的Node程式比較特殊,會啟動兩個程序,
這裡我是要跟蹤NodeJS的第二個程序,
第一個程序在9229埠偵聽,  第二個程序在9230埠偵聽.
{
    // Use IntelliSense to learn about possible 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": "attach",
            "name": "遠端除錯",
            "address": "192.168.168.168",
            "port": 9230,
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "/Zdata/wwwroot/bimServer"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "啟動程式_1_12_9",
            "program": "${workspaceFolder}/3drepo.js",
            "cwd": "${workspaceRoot}",
            "env":{"NODE_ENV":"test","NODE_CONFIG_DIR":"config"},
            "autoAttachChildProcesses": true
        }
    ]
}


Reference

[1]

https://nodejs.org/en/docs/guides/debugging-getting-started/

[2]

除錯chrome中前端程式碼的Launch.json參考

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9223,
            "sourceMaps": true,
            "url": "http://bim.v/Project/Progress/plan",
            "webRoot": "${workspaceFolder}/public"
        }
    ]
}