跳到主要内容

debug 函数的一些常见用法

在开发过程中我们常常需要调试输出一些内容，以往为了省事你可能会使用 console.log 来输出信息，但是我们不推荐你这么做，原因如下：

  • 输出比较单一没有统一的命名前缀，需要你每次都添加一些字符串来标示
  • 添加了还得再删除或注释掉（大多数情况下你会忘记处理）
  • 你没办法控制哪些需要输出哪些无需输出
  • 如果想知道一个逻辑的过程耗时你也需要自己记录并计算

我们应该使用 debug 工具来解决这个问题。

在项目中使用 debug​

在你的代码中引入这个对象

src/test.ts
import { $debug } from 'zenweb';

// 打印信息
$debug('debug test');

// 创建命名空间
const serviceDebug = $debug.extend('service');
// 打印信息
serviceDebug('ns1 test');

// 创建命名空间
const chatDebug = $debug.extend('chat');
// 打印信息
chatDebug('ns2 test');

执行命令测试是否工作

DEBUG=* npx ts-node src/test.ts

输出内容：

app debug test +0ms
app:service ns1 test +0ms
app:chat ns2 test +0ms

控制输出​

只想看到的​

例如我们只想看到 app:chat 的信息而不想看到别的

DEBUG=app:chat npx ts-node src/test.ts

你可能已经注意到 DEBUG 环境变量的不同了

不想看到的​

再比如我们不想看到 app:chat 的信息，其他的都可以

DEBUG=*,-app:chat npx ts-node src/test.ts
提示

注意到多了个 - 号吗？ 并且控制规则支持通配符，例如：app:*

在 zenweb 项目中我们只需要修改 .env 文件中 DEBUG 环境变量即可

与业务代码的配合​

debug 工具不仅能输出信息，还能做到条件判断，例如我们有一个 debug 信息输出需要用到其他函数的调用，而不需要输出的时候又完全用不到，该怎么办呢？

// 可以使用条件判断
if (chatDebug.enabled) {
  chatDebug('current user: %o', getCurrentUser());
}