在前端开发中，对于调试代码是必不可少的。在 JavaScript 中，我们可以通过 console.log() 来输出调试信息，但是在一些复杂的场景中，这种方法往往不够灵活、高效。这时，使用专门为调试而生的工具会是更好的选择。其中，@jden/debug 就是一个非常好用的 npm 包。
什么是 @jden/debug？
@jden/debug 是一个为 Node.js 和浏览器提供调试支持的工具库。通过使用它，我们可以以类似于 console.log() 的方式来输出调试信息，不过它更加灵活、可配置，还支持多个 debug 实例之间的独立管理。
安装
要安装 @jden/debug 包，我们只需要使用 npm 命令即可：
npm install @jden/debug
使用
基础用法
首先，我们需要引入 @jden/debug：
const debug = require('@jden/debug')('myapp')上面这行代码中，'myapp' 参数表示创建一个名为 myapp 的调试实例，在后续的输出调试信息中它将起到重要的作用。
接下来，我们就可以愉快地开始调试了。比如，我们可以用下面的代码输出一个简单的调试信息：
debug('Hello, World!')这时，我们就可以在控制台中看到类似于下面的输出：
myapp Hello, World! +0ms
上面的输出信息中，'myapp' 就是我们前面创建的调试实例名称；'Hello, World!' 就是我们传入的调试信息字符串；'+0ms' 表示输出信息的时间戳。
动态开启和关闭调试
当我们在开发时，要频繁地切换调试信息输出是否开启是很常见的需求。@jden/debug 提供了一种很方便的方式来实现动态开启和关闭调试输出。
首先，在创建调试实例的时候，我们可以通过环境变量来控制是否关闭调试输出：
// 如果 DEBUG 环境变量中包含 'myapp' 字符串，则会开启调试输出
const debug = require('@jden/debug')('myapp')
// 如果需要关闭调试输出，只需要将 DEBUG 环境变量的值设为 '!myapp' 即可
process.env.DEBUG = '!myapp'接下来，我们可以使用 debug.enable() 和 debug.disable() 方法来动态开启和关闭调试：
// 判断调试是否开启
if (debug.enabled) {
// 开启调试
debug('Hello, World!')
}上面这段代码中，如果调试输出被开启，则会输出 "myapp Hello, World!" 消息。如果调试输出被关闭，则不会输出任何信息。
对象输出
与 console.log() 不同的是，@jden/debug 提供了一种方便的方式来输出对象信息。我们只需要在调用 debug() 方法时传入一个对象，就可以看到对象中包含的信息了。
举个例子：
const debug = require('@jden/debug')('myapp')
const user = {
name: 'Tom',
age: 18,
}
debug('Current user:', user)运行上面的代码，我们就可以看到控制台中输出了类似于下面的信息：
myapp Current user: { name: 'Tom', age: 18 } +0ms实例
在实际的开发中，我们可能需要创建多个调试实例。比如，在一个 Node.js 服务中，我们需要为 HTTP 服务和 WebSocket 服务分别创建不同的调试实例；在一个前端应用中，我们需要为模块化加载器和路由器分别创建不同的调试实例。
@jden/debug 提供了多个实例之间相互独立的支持。我们只需要在调用 require('@jden/debug') 方法时传入不同的参数，就可以创建不同的调试实例了。
举个例子，我们可以像下面这样为 Node.js 的 HTTP 服务和 WebSocket 服务分别创建调试实例：
const httpDebug = require('@jden/debug')('http')
const wsDebug = require('@jden/debug')('ws')在使用这些实例时，我们只需要将它们传递给对应的代码模块即可：
-- -------------------- ---- ------- ----- ---- - --------------- ----- --------- - ------------- ----- ------ - ----------------------- ---- -- - -- -- ---- ---- --------------------- -------- -- ----- -------- - --- ------------------ ----- ---- -- ------------------------- ---- -- - -- -- --------- ---- ------------ ------------ --
上面这段代码中，在为 HTTP 服务和 WebSocket 服务分别创建了调试实例之后，我们就可以通过像下面这样的方式来分别使用它们：
httpDebug(req.method, req.url)
wsDebug('New connection')总结
在本文中，我们介绍了如何使用 @jden/debug 包来进行前端调试工作。我们先介绍了 @jden/debug 的基础用法，随后讲解了如何动态开启和关闭调试输出、输出对象信息，最后讲解了如何创建多个独立的调试实例。
@jden/debug 不仅仅是一个调试工具，而且它展现了模块化思想的重要性。通过将不同的模块分别创建独立的调试实例，我们可以方便地区分不同模块的调试信息，从而更加高效地进行调试工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc6967216659e2443e0