1. 设计你的 console.log
虽然这并不是必要的，但你想如果你在你的个人网站的控制台上留下一条彩蛋信息，会不会让访客眼前一亮？你永远不知道谁会在看，大家可以在haiyong.site上查看我的
想要完成上面的效果，你只需使用下面解释的字符串替换方法，在其中添加 %c 变量，然后作为变量参数添加如下所示的样式。
import { quotes } from "http://haiyong.site/wp-includes/js/quotes.js"; let randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; console.log( `%c✨ ${randomQuote}`, "font-size:20px; background:#FFF; color:#581845;padding:10px; border: 3px solid #581845;border-radius:10px;" );
下面是我quotes.js里的内容
export const quotes = [ `“纵使神明在此，我亦会胜他半子” ― 海拥`, `“努力是为了站在万人*，成为别人的光，加油” ― 海拥`, `“双手合十成为自己的神，自己所信念的就是信仰” - 海拥`, `“飞机飞行时所需动力只需要起飞时的十分之一不到，加油” ― 海拥`, `“无论你成为什么样的人，无论你把自己变成什么样，那都是你一直以来的样子” - 塔拉·韦斯托弗`, `“通常，当您认为自己处于某件事的尽头时，实际上您正处于另一件事的开始。” ― 弗雷德·罗杰斯`, ];
输出：
2. 警告、错误和信息
可能你经常在控制台中看到警告和错误，但不知道如何添加或者删除它们。信息图标不出现，因此 Chrome 中的 console.log 和 console.info 之间没有视觉差异。
// 4. WARNING console.warn("console.warn()"); // 5. ERROR console.error("console.error()"); // 6. INFO console.info("console.info()");
输出：
其实很简单，因为浏览器允许你根据这些类型进行过滤。
3.清除控制台
需要一个干净的控制台。你只需运行：
console.clear();
4. 将事物组合在一起
1. 扩展
console.group("控制台示例"); console.log("1"); console.log("2"); console.log("3"); console.groupEnd("控制台示例");
输出：
例如，当循环遍历一个对象并希望以更有条理的方式显示结果时会很有帮助，如下所示。
const dogs = [ { name: "小海", age: 5 }, { name: "小C", age: 2 }, { name: "小S", age: 8 }]; dogs.forEach((dog) => { console.group(`${dog.name}`); console.log(`这是${dog.name}`); console.log(`${dog.name}有${dog.age}岁了`); console.log(`${dog.name}年龄相当于人的${dog.age * 7}岁`); console.groupEnd(`${dog.name}`); });
2.折叠
要获得相同的结果，作为折叠列表，只需要将console.group更改为console.groupCollapsed即可.
输出：