前言
在前端开发中，日志输出非常的常见和重要。在开发过程中，如果没有良好的调试手段，一旦发生错误就会非常棘手。这个时候一个好用的日志输出工具就显得非常重要。而 kool-logger 就是在这个背景下被打造的一个 npm 包，是一个简单易用的前端日志记录器。
kool-logger 功能
kool-logger 的主要功能就是在浏览器的控制台中输出一些有用的信息，例如当前时间、发生日志的文件名和行号、日志的类型、日志的内容等。
具体功能如下：
- 三种不同的日志类型：info、warn、error；
- 支持代码行和文件名输出；
- 支持日志输出时间；
- 支持自定义日志内容。
kool-logger 安装和使用
安装
使用 npm 安装 kool-logger：
--- ------- ----------- ----------
使用
在需要使用的 js 文件头部先引入 kool-logger，然后就可以使用 kool-log.info、kool-log.warn 和 kool-log.error 三个方法了：
------ ------- ---- ------------- -- ---- -- ------------------ ---- ---- -- ---- -- ------------------ ---- ---- -- ----- -- ------------------- ----- ----
上述代码会输出类似如下效果的日志：
---------- -------- ---------- ----- ---- ---- -- ---------- -------- ---------- ----- ---- ---- -- ---------- -------- ---------- ------ ---- ----- --
可以看到，在每一条日志信息前都加了时间、文件名、行号和日志类型的标识。
kool-logger 设置
设置日志等级
kool-logger 支持设置日志等级，即只输出等级大于或等于设置等级的日志。支持的等级有：log、info、warn 和 error，分别对应：0、1、2、3。默认日志等级为 0，即输出所有日志。
设置代码如下：
------------------- -- ------- ----
在下面的代码中，因为等级大于等于 warn，所有只有 warn 和 error 两条日志会被输出：
------ ------- ---- ------------- -- ---- -- ------------------ ---- ---- -- ----- -- ---- -- ------------------ ---- ---- -- ---- -- ----- -- ------------------- ----- ---- -- ----
设置自定义日志格式
默认情况下，kool-logger 的日志格式是：时间 文件名:行号 日志类型: 日志内容。当然你也可以通过 setOptions 方法传入自定义的配置项来修改日志格式。setOptions 方法支持以下参数：
- timeFormat：时间格式，默认为 'YYYY-MM-DD HH:mm:ss'；
- logFormat：日志格式，默认为 '%time% %filename%:%line% %type%: %msg%'。
例如下面的代码可以设置日志时间格式为 'YYYY/MM/DD HH:mm'：
-------------------- ----------- ----------- ------- --
再例如下面的代码可以去掉日志类型标识，仅输出日志内容：
-------------------- ---------- ------- ----------------- ------- --
黑白名单设置
你还可以使用 setWhiteList 和 setBlackList 方法设置日志的黑白名单。setWhiteList 方法用来设置白名单，只有在白名单中的文件名和行号下输出的日志会被记录下来，setBlackList 方法用来设置黑名单，只有不在黑名单中的文件名和行号下输出的日志会被记录下来。这两个方法都可以接受一个数组参数。默认情况下，kool-logger 不设置黑白名单。
例如下面的代码将只在文件名包含 'index' 的文件中输出日志：
----------------------- --------- ------- ---
总结
通过以上介绍，我们可以看到 kool-logger 是一个非常好用的前端日志记录器，拥有丰富的功能和可定制性。在开发过程中，加入 kool-logger 将会帮助我们更加方便地进行调试和错误处理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056b6981e8991b448e556a