芋圆社区 > 编程 > JavaScript > 定制Console.log

定制Console.log

622
0
2023-08-30
2023-08-30
Hey、小怪兽

  • • 从芋圆社区v3.0.5开始，打开F12控制台就可以看到定制的Console.log了：
  • • 首先需要了解Console.log的几个占位符：
  • - %o / %O：用于输出一个 JavaScript 对象的可展示形式。可以将 JavaScript 对象传递给 console.log 方法，并使用 %o 控制符以可读性更高的方式显示对象的内容
  • - %s：用于输出字符串。可以将字符串传递给 console.log 方法，并使用 %s 控制符将其插入到指定位置，作为字符串的展示形式
  • - %f：用于输出浮点数。可以将一个浮点数传递给 console.log 方法，并使用 %f 控制符进行格式化输出
  • - %c：用于设置输出文本的样式。可以通过在 %c 后面添加 CSS 样式规则来改变输出文本的样式
  • - %d / %i：打印整数。支持数字格式化。例如，console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字：Foo 01（由于 1.1 不是一个整数，而是一个带有小数部分的浮点数，因此 %d 会截取其整数部分，并在输出时添加前导零，最后输出结果为 "Foo 01"）
  • - \n：换行符，用于在输出中创建新的一行
  • • 了解完就可以写出芋圆社区这样的打印，首先先搞前面的芋头图标，将图片转成base64，用apply函数（可以直接复制下面的代码在控制台打印）：
  • console.log.apply(console, ["\n%c  %c 芋圆社区 v" + "3.0.9" + " ✨\n",
`background:url('data:image/png;base64,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') no-repeat; padding:1px 1px;background-size: 100% 100%;background-position: center;`, "color: #90430a;padding:5px 0;",]);
  • • 由此可以定制好多样子的Console.log，创建三个文件：console.js，index.js，index.html
  • • index.html引入这两个js：
  • <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./console.js"></script>
    <script src="./index.js"></script>
  </head>
  <body></body>
</html>
  • • console.js写定制Console.log：
  • - 有三种类型的Console.log，分别是logN，logC，logB
  • - 接着是定义颜色，6种颜色：primary，success，default，info，warning，danger
  • - 然后是创建三个Console.log的方法
  • - 最后通过keys函数获取颜色的key值来遍历，创建每个类型不同颜色的Console.log
  • const logN = {};
const logC = {};
const logB = {};

const CONSOLE_LOG_TYPE = {
  primary: "#50b5ff",
  success: "#19be6b",
  default: "#a09e9e",
  info: "#d592ff",
  warning: "#ff9900",
  danger: "#ff4729",
};

const createLogN = (color, ns, msg, ...args) => [`%c ${ns} %c ${msg} %c ${args.length ? "%o" : ""}`, `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`, `border:1px solid ${color}; padding: 1px; border-radius: 0 4px 4px 0; color: ${color};`, "background:transparent", ...args];

const createLogC = (color, msg, ...args) => [`%c ${msg} ${args.length ? "%o" : ""}`, `color: ${color};`, ...args];

const createLogB = (color, msg, ...args) => [`%c ${msg} ${args.length ? "%o" : ""}`, `background:${color}; padding: 2px; margin-right: 5px; border-radius: 4px; color: #fff;`, ...args];

Object.keys(CONSOLE_LOG_TYPE).map((type) => {
  const color = CONSOLE_LOG_TYPE[type];
  logN[type] = (ns, msg, ...args) => createLogN(color, ns, msg, ...args);
  logC[type] = (msg, ...args) => createLogC(color, msg, ...args);
  logB[type] = (msg, ...args) => createLogB(color, msg, ...args);
});
  • • 注意console.js里面并没有直接使用Console.log，因为考虑到要定位到打印的定位，需要外部调用，而这个JS文件只是创建样式而已，就是这个东西，好像叫SouceMap：
  • • 在index.js就可以直接调用了：
  • const obj = {
  name: "Taro",
  url: "www.inhami.com",
};

console.log(...logC.primary("Taro", obj));
console.log(...logC.success("Taro", obj));
console.log(...logC.default("Taro", obj));
console.log(...logC.info("Taro", obj));
console.log(...logC.warning("Taro", obj));
console.log(...logC.danger("Taro", obj));

console.log(...logN.success("v3.0.9", "Taro", obj));
console.log(...logN.default("v3.0.9", "Taro", obj));
console.log(...logN.info("v3.0.9", "Taro", obj));
console.log(...logN.warning("v3.0.9", "Taro", obj));
console.log(...logN.danger("v3.0.9", "Taro", obj));
console.log(...logN.primary("v3.0.9", "Taro", obj));

console.log(...logB.success("Taro", obj));
console.log(...logB.default("Taro", obj));
console.log(...logB.warning("Taro", obj));
console.log(...logB.info("Taro", obj));
console.log(...logB.danger("Taro", obj));
console.log(...logB.primary("Taro", obj));
  • • 看到控制台成功打印，三种类型logN（Normal，最普通的），logC（Color，改变颜色的Console），logB（BackGround，改变背景的Console）
  • • 这里就会感觉到了，平时只需要打印一小串，而且有快捷指令clg，log啥的：
  • console.log()
  • • 现在要打印这么多：
  • console.log(...logN.success("v3.0.9", "Taro", obj));
  • • 没关系！也可以用快捷指令，用户代码片段，具体可以参考这篇博客：用户代码片段快速生成代码
  • • 我也贴上了代码片段，直接复制粘贴就可以：
  • {
  "console.log normal": {
    "prefix": "logn",
    "body": ["console.log(...logN.primary('$1', '$2', ${3}));"],
    "description": "vue3 ts snippet"
  },
  "console.log color change": {
    "prefix": "logc",
    "body": ["console.log(...logC.primary('$1', ${2}));"],
    "description": "vue3 ts snippet"
  },
  "console.log background-color change": {
    "prefix": "logb",
    "body": ["console.log(...logB.primary('$1', ${2}));"],
    "description": "vue3 ts snippet"
  },
}
  • • 使用方法就输入logn，或者logc，或者logb
  • • 接着用tab键快速填充内容，如果需要修改颜色的话就去前面把primary改掉，默认是蓝色

上一篇：获取视频的第一帧

下一篇：WebAssembly简单案例
Message Board