對Node.js應用調試的方法

時間 2020-05-11

原文原文鏈接

啓動Node應用

使用--inspcet選項啓動，Node進程會開始監聽調試器客戶端/代理。默認狀況下監聽127.0.0.1:9229，每一個進程都有一個惟一的UUID標識符。可使用的選項包括：html

選項	做用
--inspect	(1)啓動調試代理; (2)監聽默認地址和端口(127.0.0.1:9229)
--inspect=[host:port]	(1)啓動調試代理; (2)監聽指定的地址和端口
--inspect-brk	(1)啓動調試代理; (2)監聽默認地址和端口(127.0.0.1:9229); (3)用戶代碼啓動前斷點(此時將咱們的代碼包裹在一個函數中)
--inspect-brk=[host:port]	(1)啓動調試代理; (2)監聽指定地址和端口; (3)用戶代碼啓動前斷點
node inspect script.js	(1)使用--inspect選項spawn一個子進程，使用主進程運行CLI調試器。效果與 node-inspect script.js相同
node inspect --port=xx script.js	與上一個功能相同，增長了端口的指定功能(默認9229)

使用--inspcet選項啓動會後有下面的輸出內容：node

$ node --inspect index.js 
Debugger listening on ws://127.0.0.1:9229/f87bdaa8-0575-4bf5-9066-000a61c8f1cb 
For help, see: https://nodejs.org/en/docs/inspector

注意：
上面的地址(ws://host:port/UUID)並非直接在瀏覽器中訪問的調試地址，而是Node.js和調試器代理之間進行通訊的地址，它們經過webScoket進行通訊，從而將調試結果實時展現在瀏覽器中。git

使用chrome調試

(1)使用--inspect(或上面的其餘選項)啓動Node應用
(2)在chrome中調試, 有兩種方式：github

方式一

訪問http://[IP]:[port]/json/list （http://[IP]:[port]/json也能夠），會返回http請求的元數據(以下)，其中web

webScoketDebuggerUrl就是Node.js和Chrome的通訊地址
UUID是一個特定標識，每個進程都會分配一個UUID，所以每次啓動調試都會有不一樣的結果
devtoolsFrontendUrl就是須要訪問的調試地址

而後訪問devtoolsFrontendUrl就能夠進行調試了。或者在這個頁面打開開發者工具面板，點擊「Open dedicated Detools for Node.js」，就會彈出一個Node調試頁面。chrome

[ {
  "description": "node.js instance",
  "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js\_app.html?experiments=true&v8only=true&ws=127.0.0.1:9222/5be49fe4-5d50-41b4-a68e-fed5cf2a2f38",
  "devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9222/5be49fe4-5d50-41b4-a68e-fed5cf2a2f38",
  "faviconUrl": "https://nodejs.org/static/favicon.ico",
  "id": "5be49fe4-5d50-41b4-a68e-fed5cf2a2f38",
  "title": "node/index.js",
  "type": "node",
  "url": "file:///Users/mac/work/test/node/index.js",
  "webSocketDebuggerUrl": "ws://127.0.0.1:9222/5be49fe4-5d50-41b4-a68e-fed5cf2a2f38"
} ]

方式二

在Chrome地址欄輸入 about:inspect，將會重定向到chrome://inspect/#devices。點擊「Configure」按鈕，查看Node應該監聽的地址和端口是否已配置。點擊‘inspect’，也會打開Node調試頁面

此時，Chrome DevTools已鏈接到了Node應用，而後就可使用Chrome調試Node了。
json

使用VS Code調試

這個文檔描述的比較清楚，具體的操做能夠參考。下面主要說明基本的操做：瀏覽器

在VS Code裏，有兩種調試方式：Launch 和 Attach。兩種方式都區別在因而否先啓動代碼的調試模式。Launch就是直接在VS Code中以調試模式啓動應用，並鏈接調試工具；Attach就是手動以調試模式啓動應用，再運行VS Code的調試工具並鏈接應用。app

In VS Code, there are two core debugging modes, Launch and Attach, which handle two different workflows and segments of developers. Depending on your workflow, it can be confusing to know what type of configuration is appropriate for your project.
If you come from a browser Developer Tools background, you might not be used to "launching from your tool," since your browser instance is already open. When you open DevTools, you are simply attaching DevTools to your open browser tab. On the other hand, if you come from a server or desktop background, it's quite normal to have your editor launch your process for you, and your editor automatically attaches its debugger to the newly launched process.ide

The best way to explain the difference between launch and attach is to think of a launch configuration as a recipe for how to start your app in debug mode before VS Code attaches to it, while an attach configuration is a recipe for how to connect VS Code's debugger to an app or process that's already running.