给大家分享一下console的简单优化。让你的控制台顺眼一点点

uuorz

如题，一般情况下，打开控制台引入眼帘的是一些难以描述的东西，为了让眼睛舒服一点。利用hook改了一下常用的几个console方法。

  /** 自定义控制台 */
  !(function () {
    const icons = { log: "✅", info: "☑️", warn: "⚠️", error: "❌" };
    const Color = { log: "#42CA8C;", info: "#37C5D6;", warn: "#EFC441;", error: "#FF6257;" };
    ["log", "info", "warn", "error"].forEach((m) => (console[m] = console[m].bind(console, `%c${icons[m]} ${m} >  `, `color:${Color[m]}; padding-left:${["log", "info"].includes(m) ? 1.2 : 0}em; line-height:1.5em;`)));
  })();

使用后：

李恒道

这个好玩！

Su.

诶嘿？还能这么玩啊

shabby

这会导致控制台右侧的代码行列错乱

uuorz

李恒道 发表于 2024-1-26 22:37
这个好玩！

uuorz

Su. 发表于 2024-1-26 23:01
诶嘿？还能这么玩啊

哈哈哈哈，实在是忍不了控制台密密麻麻且辨识度低的日志了

uuorz

Su. 发表于 2024-1-26 23:01
诶嘿？还能这么玩啊

哈哈哈哈，实在是忍不了控制台密密麻麻且辨识度低的日志了

uuorz

shabby 发表于 2024-1-27 19:30
这会导致控制台右侧的代码行列错乱

如果你说的是代码行号的话，并不会哦。如果单纯的只是替代，那只会打印固定的行号，但我这里用了hook，并且bind参数，和正常的console一样，能正确显示行号，需要注意的是，如果用于油猴的话，需要保证全局唯一，否则会重复bind，导致样式出现问题

greatYear

你这样会修改所有 console。且 console 输出行号不是想要的位置
我这样，几乎完美

1. /** 自定义控制台 */
   
2. const icons = { log: "✅", info: "☑️", warn: "⚠️", error: "❌" };
   
3. const Color = { log: "#42CA8C;", info: "#37C5D6;", warn: "#EFC441;", error: "#FF6257;" };
   
4. export const C = {
   
5.   log: console.log.bind(console, `%c${icons.log} log > `, `color:${Color.log}; padding-left:1.2em; line-height:1.5em;`),
   
6.   info: console.info.bind(console, `%c${icons.info} info > `, `color:${Color.info}; padding-left:1.2em; line-height:1.5em;`),
   
7.   warn: console.warn.bind(console, `%c${icons.warn} warn > `, `color:${Color.warn}; padding-left:1.2em; line-height:1.5em;`),
   
8.   error: console.error.bind(console, `%c${icons.error} error > `, `color:${Color.error}; padding-left:1.2em; line-height:1.5em;`)
   
9. }

复制代码

greatYear

shabby 发表于 2024-1-27 19:30
这会导致控制台右侧的代码行列错乱

https://bbs.tampermonkey.net.cn/forum.php?mod=redirect&goto=findpost&ptid=5899&pid=77134
我这样完美