浏览器(cmd)控制台输出带有颜色

简介: 浏览器(cmd)控制台输出带有颜色

一般在浏览器中看到人家打印的带有颜色,所以咋也来实现一下。如下:


效果


在浏览器的效果


20210718214514761.png


使用方式


console.log('\x1B[3m%s\x1B[23m', 'italic')
console.log('\x1B[1m%s\x1B[22m', 'bold')


在cmd里面的效果


20210718214824664.png


使用方式


console.log('\x1B[3m%s\x1B[23m', 'italic')
console.log('\x1B[1m%s\x1B[22m', 'bold')


一些常用的颜色代码


    'bold'          : ['\x1B[1m%s\x1B[22m'],
    'italic'        : ['\x1B[3m%s\x1B[23m'],
    'underline'     : ['\x1B[4m%s\x1B[24m'],
    'inverse'       : ['\x1B[7m%s\x1B[27m'],
    'strikethrough' : ['\x1B[9m%s\x1B[29m'],
    'white'         : ['\x1B[37m%s\x1B[39m'],
    'grey'          : ['\x1B[90m%s\x1B[39m'],
    'black'         : ['\x1B[30m%s\x1B[39m'],
    'blue'          : ['\x1B[34m%s\x1B[39m'],
    'cyan'          : ['\x1B[36m%s\x1B[39m'],
    'green'         : ['\x1B[32m%s\x1B[39m'],
    'magenta'       : ['\x1B[35m%s\x1B[39m'],
    'red'           : ['\x1B[31m%s\x1B[39m'],
    'yellow'        : ['\x1B[33m%s\x1B[39m'],
    'whiteBG'       : ['\x1B[47m%s\x1B[49m'],
    'greyBG'        : ['\x1B[100m%s\x1B[49m'],
    'blackBG'       : ['\x1B[40m%s\x1B[49m'],
    'blueBG'        : ['\x1B[44m%s\x1B[49m'],
    'cyanBG'        : ['\x1B[46m%s\x1B[49m'],
    'greenBG'       : ['\x1B[42m%s\x1B[49m'],
    'magentaBG'     : ['\x1B[45m%s\x1B[49m'],
    'redBG'         : ['\x1B[41m%s\x1B[49m'],
    'yellowBG'      : ['\x1B[43m%s\x1B[49m']


相关文章
|
8月前
vue-cli 如何让Eslint 报错在浏览器控制台输出
vue-cli 如何让Eslint 报错在浏览器控制台输出
171 0
|
8月前
IntelliJ IDEA 自定义控制台输出多颜色格式功能 --- 安装Grep Console插件
IntelliJ IDEA 自定义控制台输出多颜色格式功能 --- 安装Grep Console插件
1391 0
|
3月前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
38 0
|
5月前
|
Web App开发
成功解决Chrome浏览器 控制台下看不到接口信息的问题
这篇文章提供了解决Chrome浏览器控制台不显示接口信息问题的方法,包括检查过滤设置和确保“保留日志”开关已打开。
成功解决Chrome浏览器 控制台下看不到接口信息的问题
|
8月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
87 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
7月前
|
Web App开发 JavaScript 前端开发
使用 JS 实现在浏览器控制台打印图片 console.image()
在前端开发过程中,调试的时候,我们会使用 console.log 等方式查看数据。但对于图片来说,仅靠展示的数据与结构,是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过 img 标签展示到页面上,或将图片下载下来进行预览。但这样的调试过程实在是复杂,何不实现一个 console.image() 呢?
147 1
使用 JS 实现在浏览器控制台打印图片 console.image()
若依颜色失效怎么办?F12刷新样式不管用,回到控制台,重新点击项目链接就好了
若依颜色失效怎么办?F12刷新样式不管用,回到控制台,重新点击项目链接就好了
Edge浏览器控制台(F12)中网络不显示接口信息
Edge浏览器控制台(F12)中网络不显示接口信息
|
8月前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
126 0
|
JavaScript
手机浏览器查看控制台
手机浏览器查看控制台
141 1