Chrome 控制台新玩法-console显示图片以及为文字加样式

最新推荐文章于 2024-05-03 13:38:11 发布
最新推荐文章于 2024-05-03 13:38:11 发布
阅读量156 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_39570717/article/details/82505530
版权
本文介绍了如何使用Chrome控制台输出更丰富的信息，包括使用console.warn()和console.error()显示警告和错误信息，以及如何通过CSS样式为文字添加3D效果、彩色背景和彩虹文字。此外，还展示了在控制台中输出图片的方法。
摘要由CSDN通过智能技术生成

在正常模式下，一般只能向console 控制台输出简单的文字信息。其实现在chrome可以输出更多。

下面这张是我无意之中打开天猫的console看到的。

2885405-f38583984a4699e0.png
Paste_Image.png

为了把信息输出得更优雅更便于阅读，除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息，在控制台中出来的效果如下：

2885405-22cc0b2a44575401.png
Pa
最低0.47元/天 解锁文章
gz-郭小敏
关注
console.img：:party_popper:在Chrome浏览器控制台中显示图片
01-31
:party_popper: 在Chrome浏览器控制台中显示图片 快速开始 var script = document . createElement ( 'script' ) script . src = '//unpkg.com/console.img/dist/console.img.min.js' script . onload = ( ) => ...
使用console.log输出特殊字符图案或自定义图片
前端小白的学习分享小世界
07-15 4372
如何通过控制台输出特殊字符图案，一起来学习吧
自定义Chrome的浏览器开发者工具DevTools界面的字体和样式
流萤的专栏
02-23 4574
通过自定义的扩展程序修改Chrome浏览器开发者工具的样式和字体
玩转console.log 如何在console.log里面插入图片
热门推荐
greed
10-13 1万+
console.log也能插图！！！ 学前准备 一台电脑及一个浏览器（建议chrome） 具有一定 JavaScript 及 CSS3 基础 了解如何给 console.log 添加样式：《给console来的样式》 举3个例子 第一个例子是西瓜视频的控制台，输出一张图片 第二个例子是bilibili的控制台，玩转了 ASSII-Aar。 第三个例子：基于第一个例子进行改造。 图片用法 无意中看到西瓜视频官网的控制台 言归正传，console.log 是支持使用 background 的。唯一注
Console不显示界面又一方法
Work Harder & Play More
09-22 3301
       有时候编程需要调用别人的Console程序，同时你还不能让别人看到你调用的那个Console程序界面。这时你可以用下面的方法来实现：        用UltraEdit打开你要调用的Console程序，在位置 0x130~0x13f  之间找个数值03，将它变为02，保存，然后正常调用即可。         当然也可以通过连接器设置程序的入口点来达到不显示Console程序界
chrome-console:PubNub Chrome 控制台
06-21
PubNub Chrome 控制台第 1 步：克隆此存储库 git clone https://github.com/pubnub/chrome-console.git第 2 步：加载解压后的扩展在 Chrome 中，打开 chrome://extensions/ 点击+开发者模式单击加载解压缩的扩展程序...
流星服务器控制台「meteor-server-console」-crx插件
03-09
meteor-server-console扩展在chrome devtools中添加了一个面板，您可以使用它大致执行以下操作：-在服务器上下文中评估js-对特定程序包启动tinytest-执行git命令或在流星项目中执行诸如create package之类的操作-...
chrome-jsconsole：在开发人员控制台中加载外部JS库的扩展
01-30
JSconsole是一个Chrome扩展程序，可帮助开发人员在其喜欢的程序中加载外部JS库 :red_heart_selector: 开发人员控制台。产品特点通过名称或URL加载最新版本的任何库。 仅按名称搜索任何库。 别名加载最著名的库。 列...
api-console-extension:API控制台帮助程序扩展可帮助处理CORS请求
05-02
与Mulesoft的API控制台一起使用的扩展程序，可在Chrome浏览器中发出CORS请求。 无需其他代理服务和复杂的设置。 在托管API控制台的任何网站上安装扩展程序并读取响应数据。 从安装； 权限： 访问所有网站中的数据...
Console口连接服务器办法
wangqiankun2010的专栏
12-19 1785
Console口连接服务器办法
如何用console.log打印图文？
苏苏就是小苏苏的博客
02-15 1871
1.console console是全局变量window（或global）下的一个对象，在控制台打印console，可以发现他提供了很多方法。 console.log(console) 2.占位符 console.log("打印的字符串是：%s", "123"); console.log("%o", document.body); console.log("打印的整数是：%d", 111.00); console.log("打印的浮点数是：%f", 111.00); 3.打印文字和图片
使用console.log()打印多彩文字和图案
最新发布
fury的博客
05-03 488
【代码】使用console.log()打印多彩文字和图案。
如何改变chrome console输出信息颜色
EasyPM
12-06 2188
方法一：在css文件中定义样式 在C:\Users\<user name>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css 文件中定义样式 例如： .console-error-level .console-message-text{     color: red; }  ...
Chrome控制台格式化输出
xiaozhen0610的博客
08-20 656
一 格式化输出文字 console.log('%c你好','color:green;'); 　 console.log('%c你好%c啊','color:green;','color:blue;'); 二 输出图片 console.log('%c','padding:50px 100px;line-height:100px;background:url("https://www.baidu.com/img/bd_logo1.png") no-repeat center;backgr...
console.log打印出图片
weixin_44707050的博客
11-08 537
console.log( "%c ", "background: url(https://img-home.csdnimg.cn/images/20201124032511.png) no-repeat;font-size:130px;line-height: 50px" ) 注意点：图片路径为网络图片或者base64格式； %c后面要有空格
console.log控制台里怎么输出图片
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
01-28 2294
代码 console.log(`%c %c\n十年可见春去秋来，百年可证生老病死；\n千年可叹王朝更替，万年可见斗转星移；\n凡人如果用一天的视野，去窥探百万年的天地，是否就如同井底之蛙。\n%c 卡夫卡的岛上书店 %c 版本：${KxmVerson.version} `, ` padding: 35px 200px; background-image: url(https://kaimo313.gitee.io/blogs/console.jpg); background-size:
自定义Chrome的console（样式、打印图片、开关）
光
07-09 4510
目录： 常用console类型 自定义console样式 打印图片 关闭生产环境的console 常用console类型 console.log() 常规打印 console.warn() 打印警告信息 console.error() 打印错误信息 console.time() 和 console.timeEnd() 打印两次函数的时间间隔，两者需配合使用，括号...
新手指南：掌握Chrome开发者工具的全方位玩法
本文档标题为《轻松玩转chrome开发者模式》，作者是极昼空间，主要针对的是初学者或者对Chrome开发者工具不太熟悉的前端开发者。作者希望通过分享自己的学习经历和经验，鼓励他们在遇到问题时能够互相帮助，并且提升...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值