如何使用DevTools调试Nodejs运行的Javascript

Posted 2023-04-02

目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。我们先来看IE的：

1、在F12开发人员工具中进行调试
打开IE浏览器，按下F12键，就会打开开发人员工具，这是IE内置的开发人员开发工具，方便开发人员对html、CSS、javascript等网页资源进行跟踪调试使用的。

如果你打开的时候没有固定在网页底部，可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页，分别是：HTML、CSS、控制台、脚本、探查器和网络，点开每一个标签，可以执行相应的任务。
在HTML标签窗口中，工具栏中的按钮所执行的操作如下图：

CSS标签是用来查看样式的；控制台显示网页中JS的各种输出信息，包括错误信息、用户日志等；打开脚本标签页，这里面才是我们想要的内容。

我在图中用黄色矩形选中连个控件，左侧的下拉列表用来选择文件，右侧的按钮用来启动调试。当点击启动调试后，调试程序会将窗口最大化，我们在选中的文件中找到需要调试的位置，点击左侧边栏添加断点即可进行调试。

当有程序运行到我们的断点处时，就可以进行调试了：

在这里，我们可以使用快捷键进行操作，常用的快捷键如下：
F9：添加/移除 断点
F10：逐过程，即跳过该语句中的方法、表达式等
F11：逐语句调试，即单步调试，会跳入方法、表达式，进行逐语句的跟踪调试

在执行过程中，如果我们要执行即时的代码，我们就需要在右侧的窗格中输入代码，按回车即可：

如果要执行多行代码，点击运行按钮右侧的双箭头，就会打开多行模式。我就不再截图片了。

这种直接在浏览器中调试的方法同样适用于Google浏览器Chrome和FireFox FireDebug，只不过在细枝末叶上面有些不同罢了，主体的功能都是一样的。
按F12键进入开发者工具，可以查看源代码、样式和js：

点击Scripts按钮，可以打开这个调试窗口，里面包含了网页中脚本文件源码，点击左侧的按钮可以打开选择文件的侧窗口。

2、使用debugger关键字进行调试
这种方法很简单，我们只需要在进行调试的地方加入debugger关键字，然后当浏览器运行到这个关键字的时候，就会中断：

设置以后就可以使用debugger关键字进行调试了；进过这样的设置，我们还可以捕获到意外的错误，进行跟踪调试。 参考技术A 目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。我们先来看IE的：

1、在F12开发人员工具中进行调试
打开IE浏览器，按下F12键，就会打开开发人员工具，这是IE内置的开发人员开发工具，方便开发人员对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

如果你打开的时候没有固定在网页底部，可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页，分别是：HTML、CSS、控制台、脚本、探查器和网络，点开每一个标签，可以执行相应的任务。
在HTML标签窗口中，工具栏中的按钮所执行的操作如下图：

CSS标签是用来查看样式的；控制台显示网页中JS的各种输出信息，包括错误信息、用户日志等；打开脚本标签页，这里面才是我们想要的内容。

我在图中用黄色矩形选中连个控件，左侧的下拉列表用来选择文件，右侧的按钮用来启动调试。当点击启动调试后，调试程序会将窗口最大化，我们在选中的文件中找到需要调试的位置，点击左侧边栏添加断点即可进行调试。

当有程序运行到我们的断点处时，就可以进行调试了： 参考技术B 1，Nodejs和Chrome版本： Nodejs 6.3+ 和 Chrome 55+
2，如何激活Chrome支持Nodejs调试：
在Chrome里打开 chrome://flags/#enable-devtools-experiments
激活 Developer Tools experiments
连续点击 SHIFT 6次
选择 “Node debugging”
重启Chrome
3，如何调试脚本
打开命令窗口，执行如下命令：node --debug-brk --inspect <your jsfile>
根据提示，在chrome里打开提示中的URL
点击F12打开DevTool，并且选择connect按钮，启动调试
设置断点，调试开始了本回答被提问者采纳

无法使用 Chrome DevTools 调试 node.js

【中文标题】无法使用 Chrome DevTools 调试 node.js

【英文标题】：Can't debug node.js using Chrome DevTools

【发布时间】：2019-08-14 08:35:19

【问题描述】：

当我运行node --inspect app.js 时，它显示“已连接调试器”。然后我打开 chrome://inspect，我看到我的应用程序在那里运行，所以我单击 Open dedicated DevTools 或 Inspect（在应用程序名称旁边）。不过，无论我如何打开 Node DevTools，它似乎都没有连接到任何东西（我在那里看不到源代码，调试器语句被忽略，没有任何日志记录到控制台等）。我还尝试通过打开常规 DevTools 并单击绿色节点图标来打开它。

这很奇怪，因为 Chrome 清楚地看到服务器正在运行，并且某些东西明显连接到 Node（而且我认为我的网络上没有其他任何东西可以做到这一点）但我仍然无法让 DevTools 甚至承认服务器的存在。

我还清楚地记得几周前以完全相同的方式调试了一些东西，当时一切正常（虽然我记得我也曾为此苦苦挣扎，但我最终还是让它工作了，我想附上名字将文件放在命令末尾而不是将其放在中间完成了最后的技巧）。从那以后唯一发生的事情是我从 v8 更新到 v10 (LTS)

我显然已经尝试过重新启动，并且还阅读了关于节点 --inspect 的所有手册和文章，但没有任何帮助。

【问题讨论】：

也许这可以帮助你@M。法尼克medium.com/the-node-js-collection/…

我已经读过它，并且完全按照它说的做了，没有帮助

@M.Farnik 你有没有想过这个问题？我有同样的问题 - 使用远程调试器/ssh 隧道，我在 chrome://inspect 页面上看到了我需要的远程目标，但是一旦我单击 DevTools 链接，我就看不到任何源，我无法访问“内存”选项卡中的 Javascript VM 实例。

【参考方案1】：

Chrome 版本：92

对我来说，问题是 Chrome DevTools 没有寻找我的 Node.js 进程正在使用的连接端口。

我做了以下事情：

使用--inspect 标志启动节点进程。它在端口9239 上启动了进程。 在 Chrome 地址栏中输入 chrome://inspect/#devices。 在设备页面点击“Open dedicated DevTools for Node”。 它会打开“DevTools-Node.js”窗口。 点击“连接”标签。 点击“添加连接”按钮。 在文本框中输入localhost:9239，然后点击“添加”。

添加正确的端口后，DevTools 连接到 Node.js 进程并且我能够对其进行调试。

【参考方案2】：

使用命令代替节点 --inspect:-

节点 --inspect-brk

【参考方案3】：

我遇到了同样的问题，我已经解决了

1) 将 chrome 更新到最新版本并重新启动

2) 重启节点--inspect server.js

3) 注意端口号，如下所示 port number

4) 打开 chrome://inspect 并添加 localhost: 步骤 3 中记录的端口号 update connection in chrome

【参考方案4】：

似乎是一个新的 chrome 问题：https://github.com/nodejs/node/issues/26887