如何 Debug Node APP 配合 Docker 與 VsCode

透過 vscode Debug 利用中斷點 (breakpoints) 讓開發、偵錯更聰明。

加快除錯速度，而不是用傳統的 console log 方式查看變數、物件內容找問題。

本篇教你如何用 vscode + node + docker 進行 runtime debug!

index

在 docker container 內啟動 node APP
確認本機與 docker container 監聽是否串接成功
與 vscode Debug 串接
- vs code configuration – launch.json
Conclusion 結語
Ref 參考內容

Foreword & Why

(理論上非 docker 也可以用這個方式)

不論是 pm2 或是 node 直接啟動 JS APP 都可以使用~

在 docker container 內啟動 node APP

(選擇你的 app 啟動方法)

方法1: 透過 pm2 啟動
- target script: ‘/var/www/express-test/bin/www’
- node_args: “–inspect-brk=0.0.0.0”
方法2: node 直接啟動
- node app.js –inspect-brk=0.0.0.0
port 預設: 9229

ref.
https://nodejs.org/en/docs/guides/debugging-getting-started/#command-line-options

成功啟動 app 並進入 debug 監聽模式

可以看到 app 啟動後，debugger listening 提示訊息(如下圖)

(訊息開頭 NODE_1 後半段部份)

確認本機與 container 監聽是否串接成功

回到本機

在 chrome 瀏覽器，網址列輸入

chrome://inspect/

Discover network targets Configure…
新增監聽 localhost:9229

如果串接成功
下方
Remote Target 區塊，將出現 node 版本與相應 .js

與 vscode Debug 串接

於 vscode menu bar -> Debug -> open configuration 或 add configuration

編輯 vscode debug 監聽設定 launch.json

{
    'version': '0.2.0',
    'configurations': [
        {
            'name': 'Docker: Attach to Node',
            'type': 'node',
            'request': 'attach',
            'port': 9229,
            'address': 'localhost',
            'localRoot': '${workspaceFolder}',
            'remoteRoot': '/var/www/express-test',
            'protocol': 'inspector'
          }
    ]
}

以上需要注意並調整~

port 變更為前面 node inspect-brk 指定的 port
remoteRoot 變更為 docker container 內 node 啟用的時目錄位置(也就是專案根目錄)
e.g.
啟動時用的路徑為
/var/www/express-test/bin/www
或
/var/www/express-test/app.js
專案根目錄則為: /var/www/express-test

.
.
.

vscode 內按 F5 Start Debugging

接著對程式碼下中斷點 (breakpoints)
https://code.visualstudio.com/docs/editor/debugging#_breakpoints