Chrome DevTools 中的 Node.js 调试
上周我和我的同事结对。他们的调试风格与我截然不同。我知道 我可以在 DevTools 中做一些奇特的事情，比如在 DevTools 中设置断点等，并使用适当的debugger;语句来停止 JavaScript 执行并在此时检查事物。
但我几乎从不这样做。
我很确定我什至不知道 所有很酷的技巧。我是一个console.log()类型。我只是把代码乱扔在里面，直到我学会了我需要学的东西。我承认这有点业余。我已经做到了这一步，但现在还没有时间升级。
我尤其 不知道 Node.js 调试的任何技巧。首先，我什至不知道可以将 Chrome DevTools 与 Node.js 结合使用。这有点有意义，因为 Node.js就像 Chrome 一样使用 v8 ，但它从来没有让我同意使用浏览器工具来处理服务器代码。这不是什么新鲜事！
我和我的同事所做的调试非常复杂，使用 DevTools 来帮助我们真的很有效。我想我是一个信徒。不过，在本文中，我将通过一个简单的示例向您展示如何做到这一点。您可能不需要 DevTools，但重点是学习如何做到这一点。
1 打开 Chrome
然后前往chrome://inspect/.第一个选项卡"设备"包含您要查找的链接。
这些设置对我有用，但如果您在某个特定端口或本地 URL 运行 Node，则应该在此处添加它。
2 执行Node代码
这是不言而喻的，但是您将需要执行一些 Node 代码（可能是从您的终端执行），以便实现预期的效果。可能是 npm 脚本之类的。假设我们有一个名为 的文件app.js，我们将执行node app.js.
遇到问题
我使用这段代码的目标是......
Hello World
... 变成：
Hello 👋 World!!!
也就是说，在每个单词之间放置一个波浪表情符号。但我得到的输出是：
undefinedHello 👏 World 👏 !!!。
这是一个问题，因为：
- 我不想
undefined在那里 - 最后也掀起了波澜
- "！！！"之前有一个空格。
我们必须修复这个超级做作的例子！
4 使用检查标志执行节点代码
像这样：
css
node --inspect-brk app.js 重击 那面--inspect-brk旗帜才是这里真正的魔力。
当我这样做时，终端输出将告诉我 Node 正在哪里运行以及调试器已附加：
它会在开始执行之前自动暂停。
5 仔细阅读代码
这些按钮特别令人感兴趣：
如果您在此处按"播放"（第一个蓝色的），代码将直接运行并完成，而没有太多机会检查任何内容。
您可以使用下一个按钮（上面有一个向上的小弯曲箭头的点）来开始"单步执行"代码。但 Node 很复杂，你很快就会发现自己在 Node 的内部做着天知道的事情。
诀窍是debugger;在代码中放置一条您开始关心的内容的语句。所以...
现在，当我再次跑步时，我可以点击蓝色的"播放"按钮，并在它第一次到达那里时跳到这个确切的点。现在我可以开始"单步执行"代码来查看值。当我逐步执行时，我可以看到相关变量的值。
我还可以将鼠标悬停在变量上以查看值以及右侧边栏中的本地范围变量。
在这里我了解到，当我声明变量然后向其附加一个字符串时，我得到了不需要的结果。让我以空白字符串开头。
我们本质上还想跳过循环的最后一次迭代。因此，我们将使用一个老式的for循环，并在所有单词的长度减一的情况下运行它。然后将最后一个单词（和！！！）分别放在最后。
6 随时重新启动
当我更改代码时，我始终可以Control-C退出 Node 进程并再次运行它，DevTools（感谢上帝）将自动重新附加。
在这里，我可以重新开始并逐步执行代码，查看我的更改产生正确的输出。
其他调试器按钮（如向下箭头和向上箭头）允许您通过快进到下一个函数调用或完成当前所在的函数来更快地单步调试代码。
当事情变得复杂时，这感觉像是一种更成熟的调试代码的方式。特别是对于在大量文件之间跳转的应用程序，您可以在左侧的 DevTools 文件资源管理器中看到发生的所有情况。