ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

浏览器——如何定制console的输出样式

2021-07-05 23:03:21  阅读:173  来源: 互联网

标签:right 浏览器 linear gradient background console 定制 data


前言

纯属让自己的写代码的时候看console的时候更舒服些

背景色: https://uigradients.com/

内容

根据自己的需要定制,%c后面的内容以后面css定制的样式打印输出

示例

console.log(`%c 发布成功,回调ID:${payload.msgId}, topic:${pubTopic},发送参数:`,
                'font-size:16px; ' +
                'color:#ffffff;' +
                'background: #4776e6; ' +
                'background: -webkit-linear-gradient(to right, #4776e6, #8e54e9);' +
                'background: linear-gradient(to right, #4776e6, #8e54e9);',
                payload.data);
console.log(`%c收到消息,回调ID: ${label} 数据内容:`,
                    'font-size:16px; ' +
                    'color:#ffffff;' +
                    'background: #FF8008;' +
                    'background: -webkit-linear-gradient(to right, #FFC837, #FF8008);' +
                    'background: linear-gradient(to right, #FFC837, #FF8008);',
                    typeof data === "string" ? [data.substring(0, 50)] : data);

效果

标签:right,浏览器,linear,gradient,background,console,定制,data
来源: https://www.cnblogs.com/wangyang0210/p/14974785.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有