我有个气人的同事……

我正在参加「掘金·启航计划」

曾经，我有个气人的同事，总是喜欢用 console.error() 来调试代码，搞得我和他合作，看到控制台老难受了，就为他特殊定制了一个工具库 console-custom。沉寂在个人仓库很久，前段时间看到别人也有类似仓库，也就想着把自己的也发出来。其实，我个人不是很推荐在代码里 写 console.log 之类的来调试代码，更推荐去浏览器控制台去打断点来调试，更好的理清数据的流转，事件的先后顺序等。

背景

官方背景：

• 方便大家调试代码的时候，在浏览器控制台输出自定义个性化日志。
• 防止控制台输出密密麻麻的 console.log，一眼看不到想看的。
• 防止某个气人的小伙伴老是使用 console.error，强迫症不允许。
• ……

真实背景：

其实，是我之前有个小伙伴同事——“小白菜”（也是为啥函数名叫 blog 的原因之一，下边会看到），他调试代码，打印输出总是喜欢 console.error()，用完了还不自己清理，大家协同开发的时候，git pull 他的代码后，总是让人就很难受！看着一堆报错，一时半会看不清是程序自己的报错，还是调试的输出！强迫症就犯了！想骂街……

不……不……要冷静！

• 编码千万行
• 调试要输出
• log不规范
• 同事两行泪

效果

浏览器页面 page

浏览器控制台 console

有个重点、痛点是这个， console.log(111, 222, 333, 444, 555, 666, 777, 888, 999, 1111, 2222, 3333); 打印的数据多的时候不换行，需要找半天，我专门给处理成 分行， 一行一行展示了，这样好看清数据。

安装

npm install @you-want/console-custom -D



# or
yarn add @you-want/console-custom -D

# or
pnpm install @you-want/console-custom -D

API

唯一API BLogClass（对！简单！易用！用起来没有负担！）

import BLogClass from '@you-want/console-custom';



const myLog = new BLogClass(config)

配置 config: Object

一次配置，全局使用。

基本用法 default

也是默认用法（default），同时也是最推荐大家用的一种方法。

vue2 版本

// main.js

import BLogClass from '@you-want/console-custom';



const myLog = new BLogClass({

  username: "bigger",
  logName: "data",
  usernameColor: "orange",
  logNameColor: "#000000",
  padding: 6,
  borderRadius: 12,
  fontColor: "#aaa",
});



// 不需要使用时单独自定义 logName 的全局绑定
Vue.prototype.$blog = myLog.log;

// 需要使用时单独自定义 logName 的全局绑定
Vue.prototype.$nlog = (logName, ...data) => {
  myLog.logName = logName;
  myLog.log(...data);
};


// vue2 组件里边使用
// 同时输入多个日志数据，可帮用户按照行的形式分开，好一一对应看清 log
this.$blog(111, 222, 333, 444, 555, 666, 777, 888, 999, 1111, 2222, 3333);
this.$blog(111231231231231);

this.$nlog("logName", 2212121212122);

vue3 版本

// main.ts
import BLogClass from '@you-want/console-custom';



const myLog = new BLogClass({

  username: "bigger", // log 第一个文字内容
  logName: "data", // log 第二个文字内容
  usernameColor: "orange", // 第一个颜色，接受 CSS background 的其他书写形式，例如渐变
  logNameColor: "#000000", // 第二个颜色，接受 CSS background 的其他书写形式，例如渐变
  padding: 6, // 单位 px，决定了 button 的大小
  borderRadius: 12, // 单位 px
  fontColor: "#aaa", // 字体颜色
});



app.config.globalProperties.$blog = myLog.log;

// vue3 组件里边使用
import { getCurrentInstance } from 'vue'

export default {
  setup () {
    const { proxy } = getCurrentInstance()


    proxy.$blog(111, 222, 333, 444, 555, 666, 777, 888, 999, 1111, 2222, 3333);
    proxy.$blog(111231231231231);

    proxy.$nlog("logName", 2212121212122);
  }
}

自定义用法 custom

这部分主要全靠用户自己扩展 css 样式了。做一套自己喜欢的样式。

// main.js




// ....
Vue.prototype.$clog = (logName, ...data) => {
  myLog.logType = "custom";
  myLog.logName = logName;
  myLog.usernameStyle = `text-align: center;
    padding: 10px;
    background-image: -webkit-linear-gradient(left, blue,
        #66ffff 10%, #cc00ff 20%,
        #CC00CC 30%, #CCCCFF 40%,
        #00FFFF 50%, #CCCCFF 60%,
        #CC00CC 70%, #CC00FF 80%,
        #66FFFF 90%, blue 100%);`;
  myLog.logNameStyle = `background-color: #d2d500;
    padding: 10px;
    text-shadow: -1px -1px 0px #e6e600,-2px -2px 0px #e6e600,
    -3px -3px 0px #e6e600,1px 1px 0px #bfbf00,2px 2px 0px #bfbf00,3px 3px 0px #bfbf00;`;
  myLog.log(...data);
};

// 提供的其他 css 样式
myLog.usernameStyle = `background-color: darkgray;
    color: white;
    padding: 10px;
    text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;`;
myLog.logNameStyle = `background-color: gray;
  color: #eee;
  padding: 10px;
  text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;`;

myLog.usernameStyle = `background-color: darkgray;
    color: white;
    padding: 10px;
    text-shadow: 1px 1px 0px #0000FF,2px 2px 0px #0000FF,-1px -1px 0px #E31B4E,-2px -2px 0px #E31B4E;`;
myLog.logNameStyle = `font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    text-transform: uppercase;/* 全开大写 */
    padding: 10px;
    color: #f1ebe5;
    text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
    font-weight: bold;
    letter-spacing: -4px;
    background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);`;
// ....

其中渐变色的玩法

myLog.usernameStyle = `background-image: linear-gradient(to right, #ff0000, #ff00ff); padding: 6px 12px; border-radius: 2px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600;`;
myLog.logNameStyle = `background-image: linear-gradient(to right, #66ff00	, #66ffff); padding: 6px 12px; border-radius: 2px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 600;`;

其中输出 emoji 字符

this.$nlog("?", 2212121212122);
this.$nlog("?", 2212121212122);
this.$nlog("?", 2212121212122);
this.$nlog("?", 2212121212122);
this.$nlog("?", 2212121212122);
this.$nlog("?", 2212121212122);

最后

还是想极力劝阻那些用 console.error() 调试代码的人，同时也能尽量少用 console 来调试，可以选择控制台断点、编译器断点等。