chrome 控制台 log 打印带样式的文字和图片

最新推荐文章于 2025-01-24 10:29:07 发布

weixin79893765432...

最新推荐文章于 2025-01-24 10:29:07 发布

阅读量580

点赞数

分类专栏：软件工具 # CSS / C3 文章标签： chrome 前端 css3

本文链接：https://blog.csdn.net/mChales_Liu/article/details/115524690

版权

CSS / C3 同时被 2 个专栏收录

22 篇文章

订阅专栏

软件工具

20 篇文章

订阅专栏

本文介绍了如何使用Chrome开发者工具的console.log API进行格式化的文本输出，通过CSS代码实现彩色高亮、背景图片等效果。示例中展示了如何创建带有背景图片和样式的文本输出，为开发者在调试时提供了更丰富的视觉反馈。

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

Chrome 官方 api ：https://developer.chrome.com/docs/devtools/console/api/

格式语法：

console.log("%c需要输出的信息 ", "css 代码");

例如：

console.log("%chello", `
    padding: 50px 300px;
    line-height: 120px;
    background: url('https://static.runoob.com/images/demo/demo1.jpg') no-repeat center;
    color: #fff;
`);

/* 备用图片 */
https://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg
https://www.w3school.com.cn/i/eg_compman.gif