js控制台 console.log 输出美化,及其他操作

news2024/11/24 11:01:37

1.格式美化

console.log('%c红色%c蓝色%c绿色', 'color: red;', 'color: blue;', 'color: green;')
console.log(`%c一段文字\n换行一下\n%c SmileSay %c 版本:1.0.0 `,
  'color: #3eaf7c; font-size: 16px;line-height:30px;',
  'background: #35495e; padding: 4px; border-radius: 3px 0 0 3px; color: #fff', 
  'background: #41b883; padding: 4px; border-radius: 0 3px 3px 0; color: #fff',
);

在遇到%c后,会将后面的样式作为%c后文字的样式,遇到下一个%c会结束,下一个%c还可以在下一个参数的位置写CSS样式,依次类推。

在这里插入图片描述

2. 输出表格

var user = [
    { name: '小军', age: 18, sex: '男' },
    { name: '小明', age: 19, sex: '男' },
    { name: '小红', age: 20, sex: '女' },
]
console.table(user)

在这里插入图片描述

3.分组

// 默认展开
console.group('分组一')
console.log('小明')
console.log('小红')
console.groupEnd()
// 默认折叠
console.groupCollapsed('分组二')
console.log('男')
console.log('女')
console.groupEnd()

在这里插入图片描述
参考:
5分钟教你使用 console.log 输出五彩斑斓的黑

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/644649.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数仓数据质量保障方法

一、有赞数据链路 1、数据链路介绍 首先介绍有赞的数据总体架构图: 自顶向下可以大致划分为应用服务层、数据网关层、应用存储层、数据仓库,并且作业开发、元数据管理等平台为数据计算、任务调度以及数据查询提供了基础能力。 以上对整体架构做了初步…

射频电路layout总结

射频电路板设计由于在理论上还有很多不确定性,因此常被形容为一种“黑色艺术”,但这个观点只有部分正确,RF电路板设计也有许多可以遵循的准则和不应该被忽视的法则。在实际设计时,真正实用的技巧是当这些准则和法则因各种设计约束…

OpenCV(图像处理)-基于Oython-滤波器(低通、高通滤波器的使用方法)

1.概念介绍2. 图像卷积filter2D() 3. 低通滤波器3.1 方盒滤波和均值滤波boxFilter()blur() 3.2 高斯滤波(高斯噪音)3.3 中值滤波(胡椒噪音)3.4 双边滤波 4. 高通滤波器4.1Sobel(索贝尔)(高斯&am…

软考A计划-系统架构师-知识点汇总-下篇

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列 👉关于作者 专注于Android/Unity和各种游戏开发技巧&#xff…

​Agile与Scrum的比较

作者| Deepali chadokar Agile和Scrum是软件开发中经常使用的两个相关概念。Agile是一个概括性的术语,包含了一组软件开发的价值观和原则,而Scrum是Agile方法中的一个特定框架。 Agile强调协作、灵活性和适应性,以及应对变化的能力。此外&…

Vue中 echarts响应式页面变化resize()

前言 Vue项目中开发数据大屏,使用echarts图表根据不同尺寸的屏幕进行适配 BUG:当页面进行缩放时图表大小没有变化 使用到的方法: resize() 调用echarts中内置的resize函数进行自适应缩放,然后添加监控,页面销毁时删掉…

Zabbix“专家坐诊”第195期问答汇总

问题一 Q:麻烦请教一下zabbix服务器总是上报这几个告警,需要处理嘛?怎么处理? A:同步历史数据进程负载过高的话会影响到server的性能,建议增加服务器硬件配置。 Q:是需要增加哪方面的配置&…

ISO21434 威胁分析和风险评估方法(十二)

目录 一、概述 二、目标 三、资产识别 3.1 输入 3.1.1 先决条件 3.1.2 进一步支持信息 3.2 要求和建议 3.3 输出 四、威胁场景识别 4.1 输入 4.1.1 先决条件 4.1.2 进一步支持信息 4.2 要求和建议 4.3 输出 五、影响等级 5.1 输入 5.1.1 先决条件 5.1.2 进一…

制造业如何进行数字化转型?这个解决方案能帮你!

制造业如何有效实现数字化?制造业企业数字化的趋势已成必然,那么,如何进行制造业企业的数字建设成为各传统制造业企业的探索方向。 于是,我们团队在调研了数百家企业之后,形成了这套制造业数字化从0到1,从…

一文让你用上Xxl-Job 顺带了解cron表达式

文章目录 1.定时任务框架-xxljob1.1 Xxljob介绍1)xxljob概述2)XXL-JOB特性3) 整体架构4)入门资料准备 1.2 xxljob快速入门1)导入xxljob工程2)配置数据库1.初始化SQL脚本2.配置数据库环境3.业务处配置任务注册中心 3&am…

【色度学】光学基础

1. 光的本质 (1)波长不同的可见光,引起人眼的颜色感觉不同。 (2)人们观察到的颜色是物体和特有色光相结合的结果,而不是物体产生颜色的结果。 2. 光度量 【ISP】光的能量与颜色(1&#xff0…

【学术探讨】万能密码原理剖析

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 【万能密码】,顾名思义,就是…

ArcGIS提取水系并进行生态敏感性分析

1、前言 ,这篇是用ArcGIS进行水系提取,与前者的区别是上篇一般是对遥感影像进行处理,准确性较高;这篇是讲在没有遥感影像的情况下,用DEM进行水系的提取,一般与实际水系有差别,准确性较低。但是…

rm 命令的使用以及指定不删除某些文件

目录 1、删除单个文件 2、强制删除文件,无需确认 3、删除文件夹 4、删除目录下全部文件,包括文件夹 5、删除全部文件,但保留readme.txt 6、删除全部文件,保留1.txt和2.txt 7、使用find grep xargs命令来删除 8、删除全部…

把手伸向大数据平台的云原生,是如何将大数据平台迁移至K8s上的?

我们正身处数据大爆炸的时代,据IDC数据显示,仅在2022年,人类就将创造超过97ZB的数据;要知道截至2012年,人类生产的所有印刷材料的数据量为200PB,仅为2022年一年所创造数据量的50万分之一。据预测&#xff0…

目标检测数据集---工业铝片表面缺陷数据集

✨✨✨✨✨✨目标检测数据集✨✨✨✨✨✨ 本专栏提供各种场景的数据集,主要聚焦:工业缺陷检测数据集、小目标数据集、遥感数据集、红外小目标数据集,该专栏的数据集会在多个专栏进行验证,在多个数据集进行验证mAP涨点明显,尤其是小目标、遮挡物精度提升明显的数据集会在该…

Echarts—根据地理坐标被标注的中国地图(标记可以自定义为图片)

中国地图 实现效果图创建echartChina.vue组件使用echartChina.vue组件修改标记图标为图片 实现效果图 这是一个有阴影的,并且根据坐标点被标记的地图展示,下面我们就把实现的代码贴出来,老样子,还是开袋即食! 创建echartChina.vu…

matlab求解方程和多元函数方程组

核心函数solve 一般形式 Ssolve(eqns,vars,Name,Value) ,其中: eqns是需要求解的方程组; vars是需要求解的变量; Name-Value对用于指定求解的属性(一般用不到); S是结果,对应于v…

【MySQL高级篇笔记-主从复制(下) 】

此笔记为尚硅谷MySQL高级篇部分内容 目录 一、主从复制概述 1、如何提升数据库并发能力 2、主从复制的作用 二、主从复制的原理 1、原理剖析 2、复制的基本原则 三、一主一从架构搭建 1、准备工作 2、主机配置文件 3、从机配置文件 4、主机:建立账户并…

如何通过CRM系统进行群发邮件?

CRM客户管理软件不仅可以记录客户的信息,还可以集成电子邮箱,实现在CRM中即可管理客户邮件的功能。那么,CRM系统可以群发邮件吗?当然可以!使用Zoho CRM即可轻松实现邮件群发。 1、通过Zoho CRM群发邮件的好处 1&…