console.log 样式

已于 2022-06-20 21:40:27 修改
阅读量229 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Intereting Computer 文章标签： css css3 html
于 2022-06-17 18:47:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43814775/article/details/125338709
本文介绍了在JavaScript中利用console.log的 `%c` 标记进行颜色定制的方法，通过设置字体大小、内边距和背景色，可以使得控制台输出更加醒目。学习此技巧，能提升代码调试时的视觉效果。

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

console.log(
        `%ccsdn\n名字: TOKYO`,
        "font-size: 16px;padding: 3px 10px; background: #00a933; color: #fff;"
      )

在这里插入图片描述

注意
%c 这个一定要加

打印东西的时候特别好用，学到了！

日志：带有样式的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 —
colorterm_:console.log 的彩色终端输出
07-19
在JavaScript编程环境中，终端输出通常是黑白的，但通过利用`console.log`的扩展功能，我们可以为输出添加颜色，使得日志信息更易于阅读和理解。`colorterm_`是针对这一需求的一个工具或概念，它允许开发者在控制台...
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的样式
weixin_42333548的博客
07-02 377
本文介绍了在浏览器控制台中自定义console.log输出的多种方法。主要技术包括：1)使用%c占位符配合CSS样式实现彩色文本、背景高亮、字体样式等效果；2)利用console.group、console.table等特殊方法格式化输出；3)通过重写console.log函数添加统一样式；4)结合Unicode字符和Emoji增强可视化效果；5)自定义错误和警告样式。文章还列举了console对象的主要API，包括日志方法、计时功能、分组输出等调试工具，并提供了具体应用示例。这些技巧可以帮助开发者创建更直
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()加样式
ct5211314的博客
11-16 1000
console.log()是我们常用的语法，用于在控制台输出我们需要查看的数据格式。那么当页面console.log()过多时，可能一瞬间找不到我们需要查看的数据，这个时候我们就可以通过给输出添加样式来突出我们需要查看的数据。
学习到一些花式console.log
m0_54241909的博客
06-01 852
console是一个用于调试和记录信息的内置对象，提供了多种方法，可以帮助开发者输出各种信息，进行调试和分析。
在vue中使用console.log无效的解决
11-20
在Vue.js开发过程中，我们经常使用`console.log()`来调试代码，查看数据的变化。然而，有时在Webpack开发环境下，可能会遇到`console.log()`输出无效的情况。这并不是因为Webpack本身的问题，而是由于某些配置或者...
从console.log说起(console.log详细介绍)
10-19
console.trace同样可以打印调用栈，但输出样式和位置与console.log相同。这些函数在不同场景下有特定的用途，比如错误追踪和调试。 最后，控制台输出还可以根据样式进行过滤。开发者可以根据不同类型的输出选择不同...
js console.log打印对像与数组用法详解
10-22
在JavaScript编程中，console.log是一个非常常用的调试函数，它可以帮助开发者在控制台中输出信息。该函数不仅可以打印基本数据类型（如字符串、数字），还可以打印复杂的对象和数组数据类型。在这篇文章中，我们将...
给console.log添加样式
qq_41531604的博客
01-26 1343
示例 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的样式
m0_49440146的博客
06-10 1124
如何在控制台上打印有样式的文字了？
console.log样式定义
SYYling的专栏
02-26 944
大家都知道百度的控制台里有相关的招聘信息，还特意用红色字体标明了投递邮箱等。 那么如何在控制台里用红色字体输出呢，我们都知道console.warn和 console.error可以实现不单单是简单字体的样式，但是如果样式更多一点呢，比如说我想输出的文字有背景图片呢，官方文档提供了：console.log("%c要输出的信息","样式")的用法，如果不加%c就是简单的把前面和后面的文字一起输出了
你知道怎么给console.log添加样式吗
分享前端干货
12-17 567
众所周知，console.log能在控制台打印出信息，常用于代码调试，我们都用烂了。 但是，你可能不知道如何打印出带有样式的信息。 打开百度首页的控制台，文本颜色是红色的 京东的控制台也有样式 如何制作哟样式的控制台信息 直接上代码 console.log('%c 好好学习，天天向上', 'background:#41b883;color:#fff;border-radius: 3px') 效果预览 笔记 （阅读这篇文章的收获） 给 console添加样式，需要使用到占位符：%c 第二个参数可以设
美化console.log打印样式
lfYexun的博客
01-30 573
使用%c为打印内容定义样式,再输出信息前加上%c，后面写上标准的css样式，就可以为输出的信息添加样式了
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
重写并自定义console.log()输出样式
ice_bear221的博客
06-11 1823
在开发的实践过程中对于控制台内容的输出情况有一些特殊的需求，然而，普通的console.log()函数不能提供很好的支持，因此需要探索一些自定义的实现方式，以便满足开发需求
改变console.log()输出的样式
weixin_42324665的博客
04-26 239
console.log('%c 哈哈哈啊哈','color:red') %c 后面跟的是输出内容 后面跟的是css样式 console.log('%c afjsdfjks','color:green;background:url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fyouimg1.c-ctrip.com%2Ftarget%2Ftg%2F035%2F063%2F726%2F3ea4031f045945e1843ae5156749d64
console.debug和console.log区别
最新发布
08-01
引用[2]则展示了console.log可以使用占位符和样式进行输出。 但是，实际上在浏览器环境中，console.debug和console.log在默认情况下可能具有不同的日志级别，并且在某些环境中（如Node.js）可能有不同的行为。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值