给大家分享一下console的简单优化。让你的控制台顺眼一点点
> 如题，一般情况下，打开控制台引入眼帘的是一些难以描述的东西，为了让眼睛舒服一点。利用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 = console.bind(console, `%c${icons} ${m} >`, `color:${Color}; padding-left:${["log", "info"].includes(m) ? 1.2 : 0}em; line-height:1.5em;`)));
})();
```
#### 使用后：
!(data/attachment/forum/202401/26/221229j24gzo4q7ar527a7.png) 这个好玩！ 诶嘿？还能这么玩啊 这会导致控制台右侧的代码行列错乱 李恒道 发表于 2024-1-26 22:37
这个好玩！
{:4_110:}{:4_110:}{:4_110:} Su. 发表于 2024-1-26 23:01
诶嘿？还能这么玩啊
哈哈哈哈，实在是忍不了控制台密密麻麻且辨识度低的日志了 Su. 发表于 2024-1-26 23:01
诶嘿？还能这么玩啊
哈哈哈哈，实在是忍不了控制台密密麻麻且辨识度低的日志了 shabby 发表于 2024-1-27 19:30
这会导致控制台右侧的代码行列错乱
如果你说的是代码行号的话，并不会哦。如果单纯的只是替代，那只会打印固定的行号，但我这里用了hook，并且bind参数，和正常的console一样，能正确显示行号，需要注意的是，如果用于油猴的话，需要保证全局唯一，否则会重复bind，导致样式出现问题 本帖最后由 greatYear 于 2024-1-28 11:14 编辑
你这样会修改所有 console。且 console 输出行号不是想要的位置
我这样，几乎完美
/** 自定义控制台 */
const icons = { log: "✅", info: "☑️", warn: "⚠️", error: "❌" };
const Color = { log: "#42CA8C;", info: "#37C5D6;", warn: "#EFC441;", error: "#FF6257;" };
export const C = {
log: console.log.bind(console, `%c${icons.log} log > `, `color:${Color.log}; padding-left:1.2em; line-height:1.5em;`),
info: console.info.bind(console, `%c${icons.info} info > `, `color:${Color.info}; padding-left:1.2em; line-height:1.5em;`),
warn: console.warn.bind(console, `%c${icons.warn} warn > `, `color:${Color.warn}; padding-left:1.2em; line-height:1.5em;`),
error: console.error.bind(console, `%c${icons.error} error > `, `color:${Color.error}; padding-left:1.2em; line-height:1.5em;`)
} shabby 发表于 2024-1-27 19:30
这会导致控制台右侧的代码行列错乱
https://bbs.tampermonkey.net.cn/forum.php?mod=redirect&goto=findpost&ptid=5899&pid=77134
我这样完美
页:
[1]
2