前端开发中，我们常常需要进行调试工作。浏览器提供了一些调试工具，但是他们并不能满足所有的需求。这时候，npm 包 devtool 就很好用了。
devtool 是什么？
devtool 是一个命令行工具，它可以帮助我们解决开发中常见的调试问题。使用 devtool，我们可以很方便地在浏览器中调试代码，同时也能够捕获和重新启动 Node.js 进程，使得开发和调试更加高效。devtool 可以与 node.js 和 Chrome 调试器配合使用，具有很高的灵活性和定制性。
安装 devtool
使用 npm 就可以轻松地安装 devtool：
npm install -g devtool
devtool 的使用
devtool 提供了以下命令：
devtool open <file>：用 Chrome 打开指定的文件，并在浏览器中调试。devtool listen <port>：在指定端口上启动 devtool，等待 Chrome 连接来自 Node.js 应用的调试消息。devtool ps：列出目前正在运行的 Node.js 进程。devtool connect <pid>：连接到给定的 Node.js 进程，以便进行调试。devtool -h：显示帮助信息。
使用 devtool 调试 Node.js 应用
首先，在要调试的文件开头添加以下代码：
debugger;
然后执行 devtool listen 命令，指定端口号：
devtool listen 5000
接着启动 Node.js 应用：
node --inspect-brk index.js
选项 --inspect-brk 意味着在应用启动时停止在第一行。这个时间节点非常重要，因为它会让执行流走到要调试的代码行的位置。如果不在 debugger 行附近停止的话，就不会看到调试界面。
然后在 Chrome 输入地址 chrome://inspect，就可以看到所有正在监听的端口。点击 inspect 连接到指定端口，就可以开始调试了。
使用 devtool 调试前端代码
同样，在要调试的代码行添加上 debugger;，然后执行以下命令：
devtool open index.html
会打开 Chrome 并使用 Chrome DevTools 调试前端代码。
结尾
使用 devtool，我们可以在开发和调试过程中更加高效和方便地解决问题。这个工具非常灵活，可以让我们更好地适应各种环境和需求。如果你还没有使用过 devtool，赶快尝试一下吧！
示例代码：
-- -------------------- ---- -------
-- ------
----- ---- - ----------------
----- ------ - ----------------------- ---- -- -
---------------- ------------
----------
---
------------------- -- -- -
------------------- -- ------- -- ---- -------
---
-- ----------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
--------
-- ------ --------
--- - - --
---------------
-- ----- --------
---------
- - --
---------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64448