启动Node应用
使用--inspcet选项启动,Node进程会开始监听调试器客户端/代理。默认情况下监听127.0.0.1:9229,每个进程都有一个唯一的UUID标识符。可以使用的选项包括:
选项 | 作用 |
---|---|
--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 --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进行通信,从而将调试结果实时展示在浏览器中。
使用chrome调试
(1)使用--inspect(或上面的其他选项)启动Node应用
(2)在chrome中调试, 有两种方式:
方式一
访问http://[IP]:[port]/json/list (http://[IP]:[port]/json也可以),会返回http请求的元数据(如下),其中
- webScoketDebuggerUrl就是Node.js和Chrome的通信地址
- UUID是一个特定标识,每一个进程都会分配一个UUID,因此每次启动调试都会有不同的结果
- devtoolsFrontendUrl就是需要访问的调试地址
然后访问devtoolsFrontendUrl就可以进行调试了。 或者 在这个页面打开开发者工具面板,点击 “Open dedicated Detools for Node.js”,就会弹出一个Node调试页面。
[ {
"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了。
使用VS Code调试
这个文档描述的比较清楚,具体的操作可以参考。下面主要说明基本的操作:
在VS Code里,有两种调试方式:Launch 和 Attach。两种方式都区别在于是否先启动代码的调试模式。Launch就是直接在VS Code中以调试模式启动应用,并连接调试工具;Attach就是手动以调试模式启动应用,再运行VS Code的调试工具并连接应用。
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.
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.
Launch模式
(1)打开Debug Tab,打开launch.json,增加配置 Node.js: Launch Program。里面的program
选项设置启动入口文件
(2)通过调试目标下拉列表,选择上一步指定的配置名称
(3) 按F5启动应用并调试,或者点击“Start Debugging”按钮(绿色三角按钮)
Attach模式
(1)打开Debug Tab,打开launch.json,增加配置 Node.js: Attach。注意,这个配置项里会有一个port选项,值就是Node进程监听的端口,默认是9229
(2)使用--inspect(或上面的其他选项)启动Node应用
(3)按F5启动调试工具,或者点击“Start Debugging”按钮(绿色三角按钮),此时会自动Attach到Node应用
Tip:当调试器客户端连接到Node应用时,在命令行中会输出“Debugger attached”。
热启动Node应用
使用nodemon可以在Node代码修改后自动重启,具体使用可以看文档。
Node应用热启动后,可能会导致debugger代理断开连接。这种情况在 使用VS Code调试 以及 在chrome中使用devtoolsFrontendUrl 会出现。
可以看下面的输出,nodemon重启应用导致Node.js和调试器客户端通信地址发生了变化,此时就需要debugger客户端重新连接应用。对于VS Code没有找到重启应用连接不断的方法(修改launch.json应该可以实现)。可以使用chrome调试。
参考资料
https://developers.google.com/web?hl=en
https://nodejs.org/en/docs/guides/debugging-getting-started/
https://www.jianshu.com/p/198a9cf83aae
http://www.ruanyifeng.com/blog/2018/03/node-debugger.html
https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27
https://blog.csdn.net/u010476739/article/details/89225416
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。