7 个让你的 console.log() 输出脱颖而出的提示和技巧(01)

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 7 个让你的 console.log() 输出脱颖而出的提示和技巧

1. 设计你的 console.log


虽然这并不是必要的,但你想如果你在你的个人网站的控制台上留下一条彩蛋信息,会不会让访客眼前一亮?你永远不知道谁会在看,大家可以在haiyong.site上查看我的


image.png


想要完成上面的效果,你只需使用下面解释的字符串替换方法,在其中添加 %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 = [
  `“纵使神明在此,我亦会胜他半子” ― 海拥`,
  `“努力是为了站在万人中央,成为别人的光,加油” ― 海拥`, 
  `“双手合十成为自己的神,自己所信念的就是信仰” - 海拥`,
  `“飞机飞行时所需动力只需要起飞时的十分之一不到,加油” ― 海拥`,   
  `“无论你成为什么样的人,无论你把自己变成什么样,那都是你一直以来的样子” - 塔拉·韦斯托弗`,
  `“通常,当您认为自己处于某件事的尽头时,实际上您正处于另一件事的开始。” ― 弗雷德·罗杰斯`, 
];


输出:


image.png


2. 警告、错误和信息


可能你经常在控制台中看到警告和错误,但不知道如何添加或者删除它们。信息图标不出现,因此 Chrome 中的 console.log 和 console.info 之间没有视觉差异。


// 4. WARNING
 console.warn("console.warn()");
// 5. ERROR
console.error("console.error()");
// 6. INFO
console.info("console.info()");


输出:

image.png

其实很简单,因为浏览器允许你根据这些类型进行过滤。

image.png


3.清除控制台


需要一个干净的控制台。你只需运行:


console.clear();

ae262fc5360142f0aa2d850cc78738ec.gif



4. 将事物组合在一起


1. 扩展


console.group("控制台示例");
 console.log("1");
 console.log("2");
 console.log("3");
 console.groupEnd("控制台示例");


输出:

image.png



例如,当循环遍历一个对象并希望以更有条理的方式显示结果时会很有帮助,如下所示。


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}`);
 });

image.png


2.折叠


要获得相同的结果,作为折叠列表,只需要将console.group更改为console.groupCollapsed即可.


输出:


image.png



相关实践学习
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
目录
相关文章
|
消息中间件 JSON druid
Druid:通过 Kafka 加载流数据
Druid:通过 Kafka 加载流数据
216 0
|
Java
Java面向对象编程(5)
Java面向对象编程(5)
68 0
|
11月前
|
JavaScript 前端开发 Java
2024 年顶级自动化测试工具
2024 年顶级自动化测试工具
405 0
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
612 1
|
SQL 存储 API
SqlAlchemy 2.0 中文文档(十三)(1)
SqlAlchemy 2.0 中文文档(十三)
79 0
|
消息中间件 监控 Kafka
【极数系列】Flink集成KafkaSink & 实时输出数据(11)
【极数系列】Flink集成KafkaSink & 实时输出数据(11)
183 0
|
算法 数据库 存储
概要设计与详细设计的区别
概要设计与详细设计的区别     概要设计就是设计软件的结构,包括组成模块,模块的层次结构,模块的调用关系,每个模块的功能等等。同时,还要设计该项目的应用系统的总体数据结构和数据库结构,即应用系统要存储什么数据,这些数据是什么样的结构,它们之间有什么关系。
12996 0
|
应用服务中间件 nginx Web App开发
用svg实现一个环形进度条
用svg实现一个环形进度条
158 0
|
监控 Java 测试技术
Web、移动端、桌面端自动化测试工具或框架推荐
目前自动化测试可谓是人人在提,而且自动化工具和一些开源框架也是层出不穷。截止现在,我也接触了一些自动化的知识,分享下。
778 0
Web、移动端、桌面端自动化测试工具或框架推荐