你知道怎么给console.log添加样式吗

最新推荐文章于 2025-07-02 18:12:43 发布
最新推荐文章于 2025-07-02 18:12:43 发布
阅读量568 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39936746/article/details/122001591
本文介绍如何在控制台中打印带有样式的文本，包括背景色、字体颜色和边框圆角等样式属性。通过使用特殊的占位符%c及CSS样式的字符串作为参数传递给console.log()方法实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

众所周知，console.log能在控制台打印出信息，常用于代码调试，我们都用烂了。
但是，你可能不知道如何打印出带有样式的信息。

打开百度首页的控制台，文本颜色是红色的

京东的控制台也有样式

如何制作哟样式的控制台信息

直接上代码

console.log('%c 好好学习，天天向上', 'background:#41b883;color:#fff;border-radius: 3px')

效果预览

笔记 （阅读这篇文章的收获）

给 console添加样式，需要使用到占位符：%c
第二个参数可以设置样式

赶快去试试吧

JavaScript - console.log 输出文字加样式（炫酷图案输出）
资深程序员
09-03 2352
效果图 实现方法 控制台输出，允许自定义输出样式，实现如上图所示效果代码： //清空控制台 console.clear(); //输出样式文字 console.log("%cLKXD\n工控平台\n", "text-shadow:01px0#ccc,02px0#c9c9c9,03px0#bbb,04px0#b9b9b9,05px0#aaa,06px1pxrgba(0,0,0,.1),005pxrgba(0,0,0,.1),01px3pxrgba(0,
如何使用JS console.log()技巧提高工作效率
10-14
通过掌握一些高级技巧，你可以更有效地使用`console.log()`，从而提高工作效率。以下是五个实用的`console.log()`技巧： 1. **打印全名变量**： 当你需要在控制台中区分多个变量时，可以使用花括号包裹变量名，以...
神奇的console.log()加样式
ct5211314的博客
11-16 1001
console.log()是我们常用的语法，用于在控制台输出我们需要查看的数据格式。那么当页面console.log()过多时，可能一瞬间找不到我们需要查看的数据，这个时候我们就可以通过给输出添加样式来突出我们需要查看的数据。
定制console.log的样式
最新发布
weixin_42333548的博客
07-02 380
本文介绍了在浏览器控制台中自定义console.log输出的多种方法。主要技术包括：1)使用%c占位符配合CSS样式实现彩色文本、背景高亮、字体样式等效果；2)利用console.group、console.table等特殊方法格式化输出；3)通过重写console.log函数添加统一样式；4)结合Unicode字符和Emoji增强可视化效果；5)自定义错误和警告样式。文章还列举了console对象的主要API，包括日志方法、计时功能、分组输出等调试工具，并提供了具体应用示例。这些技巧可以帮助开发者创建更直
给console.log添加样式
qq_41531604的博客
01-26 1344
示例 1.console.log("%c需要输出的信息 ", "color:red"); 2.console.log("%c需要输出的信息 ", "color:red;font-size:30px;width:200px;height:200px;background-color:green"); 3.console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://www.iconpng.com/png/tai.
console.log()控制台输出各种字体样式
狼丶宇先森的网络科技空间
08-18 5450
1、3D文字 console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px ...
学习到一些花式console.log
m0_54241909的博客
06-01 853
console是一个用于调试和记录信息的内置对象，提供了多种方法，可以帮助开发者输出各种信息，进行调试和分析。
在vue中使用console.log无效的解决
11-20
在Vue.js开发过程中，我们经常使用`console.log()`来调试代码，查看数据的变化。然而，有时在Webpack开发环境下，可能会遇到`console.log()`输出无效的情况。这并不是因为Webpack本身的问题，而是由于某些配置或者...
js console.log打印对像与数组用法详解
10-22
此外，还可以通过在console.log后添加一个换行符(\n)来使输出的内容更加清晰易读。 最后，文章还建议读者参考“JavaScript数组操作技巧总结”这篇专题，来了解更多关于JavaScript数组操作的技巧，以提高编程效率和...
colorterm_:console.log 的彩色终端输出
07-19
在JavaScript编程环境中，终端输出通常是黑白的，但通过利用`console.log`的扩展功能，我们可以为输出添加颜色，使得日志信息更易于阅读和理解。`colorterm_`是针对这一需求的一个工具或概念，它允许开发者在控制台...
console.log写样式
切图仔
10-09 513
js: window.onload = function () { console.log("%c秋名山上行人稀，常有车手较高低。\n如今车道依旧在，不见当年老司机！"," color:#000;font-weight:bold;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0...
日志：带有样式的Console.log
02-26
日志 带有样式的Console.log 特征 在任何浏览器中安全地调用log （而不是console.log ）。 使用markdown语法进行快速格式化： 斜体— log('this is *italic*') 粗体— log('this word _bold_') code — log('this word `code`') 使用自定义语法为文本设置样式，例如： log('this is [c="color: red"]red[c]') 。 支持 以下浏览器支持程式化日志： Chrome26+ Firefox 31+或或更高版本 眨眼歌剧（15岁以上） Safari Nightly（537.38+） 截屏 实作 Ruby on Rails —
给console加样式
weixin_43167546的博客
01-05 2077
刚刚发现一个比较好玩的东西 在console里边加图片, 然后试了一下果然可以, 先放下源代码 console.log( "%c ", "background: url(https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lpqpflo/ixigua_logo.svg) no-repeat;font-size:130px;line-height: 50px" ) 其实要说也不难, 只是在console里边加了一些css样式. 注意:
console.log样式定义
SYYling的专栏
02-26 944
大家都知道百度的控制台里有相关的招聘信息，还特意用红色字体标明了投递邮箱等。 那么如何在控制台里用红色字体输出呢，我们都知道console.warn和 console.error可以实现不单单是简单字体的样式，但是如果样式更多一点呢，比如说我想输出的文字有背景图片呢，官方文档提供了：console.log("%c要输出的信息","样式")的用法，如果不加%c就是简单的把前面和后面的文字一起输出了
带css样式的console.log() ，进来了解一下
qq_36320160的博客
09-26 575
无聊的时候，喜欢打开一些无聊的网页，搞一下chrome爸爸的控制台。 常规操作 开发前端页面过程中，少不了的就是开启控制台，打印一些定义的东西，看看到底输出是什么； 打个断点，让代码飞慢一点，一步步的...
重写并自定义console.log()输出样式
ice_bear221的博客
06-11 1824
在开发的实践过程中对于控制台内容的输出情况有一些特殊的需求，然而，普通的console.log()函数不能提供很好的支持，因此需要探索一些自定义的实现方式，以便满足开发需求
console.log 样式
weixin_43814775的博客
06-17 229
console.log 样式
JS_console.log()的进阶使用_console打印控制台样式_编码图案
小歪博客
09-14 3052
1. 基本语法： console.log(object [, object, …]) 2. 占位符: console上述的集中度支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）: 占位符 作用 %s 字符串 %d or %i 整数 %f 浮点数 %o 可展开的DOM %O 列出DOM的属性 %c 根据提供的css样式格式化字符串 图片输出 console.log("%c","background:url
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

勇敢快乐的风筝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值