什么是 Chrome DevTools？
Chrome DevTools 是一组内置于 Google Chrome 浏览器中的开发者工具，旨在帮助开发者更高效地进行 Web 应用程序开发和调试。它提供了包括元素检查器、网络分析器和 JavaScript 控制台等多个功能模块，可以帮助开发者深入了解和优化他们的代码。
除了可以调试浏览器端的 JavaScript 代码外，Chrome DevTools 还支持直接调试 Node.js 程序，这让前端开发者可以更方便地进行全栈开发和调试。
如何使用 Chrome DevTools 调试 Node.js 程序？
步骤如下：
在命令行中启动要调试的 Node.js 程序，并指定 --inspect 或 --inspect-brk 参数，例如：
node --inspect-brk app.js
--inspect参数会启动一个调试服务，允许 Chrome DevTools 连接到该服务；而--inspect-brk参数则会在程序开始执行时暂停，等待 Chrome DevTools 连接后再执行。打开 Chrome 浏览器，进入开发者工具界面，切换到「Node.js」选项卡。
点击「Add Connection」按钮，输入要连接的调试地址，例如
localhost:9229，点击「Add Connection」按钮连接。在 Chrome DevTools 中找到要调试的 Node.js 程序文件，在 Sources 标签页中打开该文件。
在代码中设置断点并运行程序，在 Chrome DevTools 中即可开始对程序进行调试。
如何使用 Chrome DevTools 调试 JavaScript 代码？
步骤如下：
打开 Chrome 浏览器，并进入要调试的页面。
按下 F12 键或右键点击页面并选择「检查」选项打开开发者工具界面。
在开发者工具界面中找到要调试的 JavaScript 文件，在 Sources 标签页中打开该文件。
在代码中设置断点并刷新页面，在 Chrome DevTools 中即可开始对页面上的 JavaScript 代码进行调试。
需要注意的是，在进行 JavaScript 调试时，由于代码是在浏览器端执行的，因此可能会受到浏览器本身的限制和差异。例如，某些浏览器可能不支持某些特性，导致调试时出现一些奇怪的问题。因此，建议在进行 JavaScript 开发时，尽量使用符合标准的语法和 API，并针对不同的浏览器进行充分的测试和优化。
示例代码
以下是一个简单的 Node.js 程序示例：
-- -------------------- ---- ------- -- ------ --- ------- - -- -------- ----------- - ---------- - --- ---- - - -- - - --- ---- - ------------ - ---------------------
在命令行中执行：
node --inspect-brk app.js
然后在 Chrome DevTools 中打开该文件进行调试即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1997