Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用有颜色的 Console 信息

使用有颜色的 Console 信息

作者头像
dys
发布于 2018-12-24 08:47:02
发布于 2018-12-24 08:47:02
91200
代码可运行
举报
文章被收录于专栏:性能与架构性能与架构
运行总次数:0
代码可运行

开发JS时经常会使用 console 来输出调试信息,其实 console 支持一个非常有意思的功能,就是可以设置信息的样式。

这有什么用呢?主要就是帮助我们在控制台中更好的识别输出信息。

尤其是应用中有大量日志的场景中,有样式的日志就会让你快速找到你所关注的内容,不至于淹没在日志海洋中。

示例:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
console.log('%cHello', 'color: green; background: yellow; font-size: 30px');

%c 用于把指定的样式应用到输出字符串上。

可以定义更加复杂的样式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const styles = [
  'color: green', 
  'background: yellow', 
  'font-size: 30px',
  'border: 1px solid red',
  'text-shadow: 2px 2px black',
  'padding: 10px',
].join(';'); 

console.log('%cHello There', styles);

还可以使用 %s 作为字符串占位符:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const styles = ['color: green', 'background: yellow'].join(';');
const message = 'Some Important Message Here';

console.log('%c%s', styles, message);

一个小小的样式功能就可以提高我们开发调试时的效率。

本文翻译整理自:

https://medium.com/@samanthaming/colorful-console-message-2e8203786838

console 还有更多有用的小功能,有兴趣可以看下“console.log() 之外的调试技巧”。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-12-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 JAVA高性能架构 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
给console来的样式
比如vue的开发者,通常会在chrome浏览器装上 Vue.js devtools 这款插件。在开发过程中,这款插件会在控制台打印以下内容。
德育处主任
2022/04/15
3760
给console来的样式
学累了?进来玩一玩 console.log 吧!
玩一玩console.log样式 前几天看到有人在浏览器的控制台打印出来了具有css样式的文字,感觉还挺好玩的,然后我自己也去试了一下😁,确实可以打印出来,其实很简单,这里分享给大家: 打印一个天蓝色的 “Hello word!”: 代码: console.log( '%cHello word!', 'color:skyblue;font-size:20px;font-weight:700' ); 其实整理一下打印的格式,就是: console.log('%c内容','css样式') 只要
用户9999906
2022/09/26
3430
玩转console
console.log不支持直接图片输出,但我们可以用背景图曲线救国。但你没法像平时那样输出背景图,原因呢,就是你没法直接设置 width 和 height 样式。所以我们要要输出一张 300x200 的图片的话,要用 padding 来把整个区域撑开到我们需要的大小,然后还要设置 line-height 才行。
老猫-Leo
2023/12/11
2220
那些你熟悉而又陌生的函数
我们最常用的是语法中的第二种 var timeoutID = scope.setTimeout(function[, delay]); 举个例子
苏南
2021/07/29
7440
Chrome 控制台新玩法console显示图片以及为文字加样式
在正常模式下,一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读,除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息,在控制台中出来的效果如下:
用户1065635
2019/03/21
1.6K0
console.log新玩法
console.log支持多样化玩法,这里以console.log的css内容输出为例,也就是console.log()输入多样化内容
十月梦想
2018/08/29
6830
console.log新玩法
个性的Console输出
现在的浏览器都有开发者工具,想必F12是我们常按的键,其中有一个相当重要的面板——Console,用它可以实现查看错误信息、打印调试信息、调试js代码等功能,但我们也可以用Console备注一些特殊信
qiangzai
2021/12/21
1.2K0
个性的Console输出
Javascript调试命令——你只会Console.log() ?
Console 对象提供对浏览器控制台的接入(如:Firefox 的 Web Console)。不同浏览器上它的工作方式是不一样的,但这里会介绍一些大都会提供的接口特性。Console对象可以在任何全局对象中访问,如 Window,WorkerGlobalScope 以及通过属性工作台提供的特殊定义。它被浏览器定义为 Window.Console,也可被简单的 Console 调用。 最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log
崔庆才
2018/04/04
1.1K0
Javascript调试命令——你只会Console.log() ?
console 命令详解。打印公司logo、表格、有趣动图、堆栈信息、自定义样式
小伙伴们在开发的时候应该都用过 console.log() 打印来调试程序代码,有些小伙伴可能所有不知,其实 console 对象还有很多方法非常实用,比如可以把后台传给前端的类数组对象已表格的形式打印,也可以给打印的信息增加 css 样式,你甚至可以在控制台里打印图片!在封装组件时也经常用它的方法打印警告信息,错误信息。那本文就记录一下 console 对象的其他方法的应用场景和注意事项、以及好玩的地方。
andyhu
2023/08/14
2.3K0
console 命令详解。打印公司logo、表格、有趣动图、堆栈信息、自定义样式
别只用 console.log() 调试 js 代码了
JavaScript中的 console 对象可用于访问浏览器调试控制台,可以用它在控制台中输出代码中变量的值。
疯狂的技术宅
2020/12/31
1.5K0
别只用 console.log() 调试 js 代码了
console.log的炫酷用法
今天使用 chrome 浏览器打开百度首页(https://www.baidu.com),打开开发者工具,windows 下的快捷键是 F12,MAC 上的快捷键通常是option+cmd+i,接着点击 console tab,看到了下面一幕。
猿哥
2019/07/25
1.7K0
在console面板打印有样式的字体
前端的同学一定都很熟悉console命令。我们经常会用到console.log()来打印一些调试信息,当然console还有其他很多妙用,如
用户6808043
2022/02/25
1.1K0
【程序猿硬核科普】Chrome控制台的基本操作 | 谷歌浏览器控制台格式错乱解决方法
写前端页面时候肯定用得到Chrome的控制台,在Console下调试各种bug是常有的事,话不多说,上干货。文末有彩蛋哦(*^▽^*)。
浩Coding
2020/02/21
7.4K0
【程序猿硬核科普】Chrome控制台的基本操作 | 谷歌浏览器控制台格式错乱解决方法
js逐步教你实现原生古诗匹配系统
第一步html: <form action=" " class="search-form"> <input type="text" class="search" placeholder="诗人
贵哥的编程之路
2020/10/28
1.4K0
js逐步教你实现原生古诗匹配系统
console实用调试技巧console实用调试技巧
这里将后面的变量赋值给了前面的占位符的位置,他们是一一对应的。这种写法在复杂的输出时,能保证模板和数据分离,结构更加清晰。不过如果是简单的输出,就没必要这样写了。在console.log中,支持的占位符格式如下:
贺贺V5
2021/11/24
1.1K0
console实用调试技巧console实用调试技巧
javaScript console用法
谈到javaScript 的 console,通常能说的就是console.log/info/warning等等,比如,console.time(test){….fn….}console.endTime(test)算个程序跑的时间啦什么鬼的。。这有什么用。没用!而我们追求的是什么?当然是好看! 以前的日志是这样的:
j_bleach
2019/05/26
5080
umi+electron开始一个桌面应用
theme: channing-cyan highlight: androidstudio
用户4793865
2023/02/03
5.4K0
你不知道的console.log
对于前端开发者,使用console.log() 次数绝对很多,但是大部分人认识的 console 对象还不是很全面,其实深入了解这些后,你会发现给开发过程带来很多便利,而且还很有趣。
游魂
2018/08/30
1.3K0
Chrome Devtools 高级调试指南(新)
前言 本文暂未涉及Performance面板的内容。 后续会单独出一篇,以下是目录: 常用命令和调试 黑盒脚本:Blackbox Script 控制台内置指令 远程调试WebView 1. Chrome Devtools 的用处 前端开发:开发预览、远程调试、性能调优、bug跟踪、断点调试等 后端开发:网络抓包、开发调试Response 测试:服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试 其他:安装扩展插件,如AdBlock、Gliffy、Axure等 2. 菜单面板拆解
前端劝退师
2019/10/13
2.9K0
亿点点玩 CSS | 水平渐变 linear-gradient
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body
张风捷特烈
2021/02/26
5330
亿点点玩 CSS | 水平渐变 linear-gradient
相关推荐
给console来的样式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档