分享一个彩色打印log封装

前言

在工作中我们经常会打印log去查看数据与关键逻辑。但这些log在项目log过多时寻找起来就会变得异常麻烦并且不规范的log打印让代码看起来不是那么的整洁与优雅，所以我想分享一个关于彩色打印log的封装方法。

console方法

在JS中我们可能最常使用的打印log方法就是console.log了。但其实console为我们提供了超多类型的打印方法。具体可以查看MDN的上关于console的介绍(传送门)。我这里主要使用的是console.log(), console.trace()，console.error()与console.warn()。具体还请参考MDN的介绍。这里不再过多介绍啦。

另外还需要一点的就是需要console属性的展位符。这里贴出了一个列表。具体请参考传送门。

image

代码

铺垫做完之后我们这里直接贴出代码。

<pre data-language="javascript" id="XSPGa" class="ne-codeblock" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">/**

• 彩色打印console

• @param {any} hint 提示内容

• @param {any} content 打印内容

• @param {any} type 打印类型（log,trace,warn，error）
  */
  function colorLog(hint, content, type = "info") {
  const color = {
  info: "#52c41a",
  warn: "#faad14",
  error: "#f5222d",
  trace: "#66ccff",
  };
  const hintContent = %c${hint};
  const hintStyle = vertical-align: middle; display: flex; height: 100%; line-height: 1.5; background: ${color[type]}; color: white; border-radius: 3px 0 0 3px; font-size: 14px; padding: 0 5px; box-sizing: border-box; background-clip: border-box;;

    console[type](`${hintContent}`, `${hintStyle}`, content);
  

}

// 调用
colorLog("test", "111", "info");
colorLog("test", "111", "error");
colorLog("test", "111", "warn");
colorLog("test", "111", "trace");</pre>

说明:

1. 这里使用log时它的调用指向都是指向这个封装方法的，并不能定位到调用这个方法的地方，所以我这边采用trace方法来追踪调用轨迹。
2. 这里建议在打印数据与一些无关调用定位时采用前log，如果需要打印一些关键逻辑并需要追踪调用栈的时候还是需要采用trace，而error与warn也可以追踪调用轨迹。

打印结果展示

image

结语

以上就是彩色打印方法的封装。希望可以帮助到大家对自己的log进行一些规范化处理，让代码看起来更简洁。