自定义console.log的样式

最新推荐文章于 2024-04-05 16:15:47 发布
最新推荐文章于 2024-04-05 16:15:47 发布
阅读量1k 收藏 2
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49440146/article/details/125221654
版权

普通的console.log()打印出来的就是一段普通的字符串或数字

但是我想给控制台上的字加点样式，这样更加明显，在最前面加上 ‘%c’ ，就可以直接写样式了

console.log('%c我是一段有颜色的文字','color: red;')

效果如下：

甚至还可以写其他的样式

console.log('%c我是一段有样式的文字','color:red;font-size:28px;background:yellow;')

效果如下：

 是不是很有意思，好了就到这了

不怎么样的程序员
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
consologger:一个简单的记录器，因此您可以从主库管理所有“ console.log（）”
04-29
consologger [！[NPM版本] [npm-image]] [npm-url] [！[Downloads] [downloads-image]] [npm-url] [downloads-image]： : [npm-url]： : [npm-image]： : 一个简单的记录器，因此您可以从主库管理所有“ console.log（）”。 样式输出，动态前缀和自定义预设。 随时提出请求，报告错误并提出想法。 原型在制作该库时没有受到损害 浏览器版本示例 让我们看一个简单的例子。 （我们假设您使用browserify或其他东西，以便可以使用浏览器上的模块） // Get the module, which is a constructor. var Consologger = require ( 'consologger' ) ; // Make a new i
console.log()控制台输出各种字体样式
狼丶宇先森的网络科技空间
08-18 5298
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，让你在控制台个性化展示
最新发布
talentT的博客
04-05 477
前端朋友问到了一个问题：你说说怎么重写console.lo然后特意去看了一下文档，确实可以重写成自己喜欢的样式，还挺有意思的。首尾呼应开头问题，其实就是和普通函数封闭的思维是一样，动态传参修改样式，不传就取默认值。重写的确实比较随意简单，主要就是看个思路知道能这么玩，如果写的不好希望能指出问题啊。(1)通过%c能调整打印内容的css样式，并且只有%c后面的内容才会生效。我们浏览器用conlose.log其实是可以改变样式的，甚至添加图片。我们重写console.log主要用到的是%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 —
anatomize-react:[2018]通过接收诸如react和react-dom之类的内容作为检查理解React的内部工作并使用console.log（）打印各种操作序列的资源来检查源
04-30
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 自动格式化代码 更改页面<title> 安装依赖项 导入组件 代码分割 添加样式表 后处理CSS 添加CSS预处理器（Sass，Less等） 添加图像，字体和文件 使用public文件夹 更改HTML 在模块系统之外添加资产 何时使用public文件夹 使用全局变量 添加引导程序使用自定义主题 增加流量 添加路由器 添加自定义环境变量 在HTML中引用环境变量 在Shell中添加临时环境变量 在.env添加开发环境变量 我可以使用装饰器吗？ 使用AJAX请求获取数据 与API后端集成 节点 Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
console-grid:控制台记录带有树样式行的网格
05-09
控制台网格 控制台记录带有树样式行的网格 彩色细胞 自定义单元格格式化程序 列排序 多行标题 零依赖和纯香草语言 简单易用，极其轻巧 安装 npm install console-grid 预习 ┌────────────────────────────────────────┬─────────┬──────┬──────────────┬──────────────┐ │ │ │ │ Number │ Multiple │ │ │ │ │ Format red │ Line Header │ │ Name bg green
给console.log添加样式
qq_41531604的博客
01-26 1221
示例 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()加样式
ct5211314的博客
11-16 778
console.log()是我们常用的语法，用于在控制台输出我们需要查看的数据格式。那么当页面console.log()过多时，可能一瞬间找不到我们需要查看的数据，这个时候我们就可以通过给输出添加样式来突出我们需要查看的数据。
console.log打印总结，输出字体颜色、其他样式等
轻风细雨_林木木
01-19 1666
【代码】console.log打印总结，输出字体颜色、其他样式等。
JS_console.log()的进阶使用_console打印控制台样式_编码图案
小歪博客
09-14 2663
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
JavaScript Console 样式
无名牛宝宝
06-18 189
使用Console输出一些文字的时候,都是相同的文字不好辨别很多大厂都对输出的内容进行了简单的美化。
idea 控制台log日志颜色修改
07-22
GrepConsole最新版本 idea日志颜色设置
console.log自定义样式
m0_73461567的博客
12-22 427
【代码】console.log自定义样式。
浏览器控制台输出带有样式的console.log
weixin_57261461的博客
01-31 269
使用console.log() //两个参数,第一个是要输出的内容 第二是样式!定义一个CSS样式字符串。第一个参数前必须加 %c。
重写并自定义console.log()输出样式
ice_bear221的博客
06-11 972
在开发的实践过程中对于控制台内容的输出情况有一些特殊的需求，然而，普通的console.log()函数不能提供很好的支持，因此需要探索一些自定义的实现方式，以便满足开发需求
给console加样式
weixin_43167546的博客
01-05 1980
刚刚发现一个比较好玩的东西 在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样式. 注意:
在控制台打印出红色字体
bian2845972116的博客
12-26 2782
如何在控制台打印出有颜色甚至有背景色的字体，实际是非常简单的，也不用学习新的代码，只需要发散一下思维，用一下css3的样式就可以改变控制台输入的字体颜色和背景颜色了。
console.log()占位符用法-设置打印颜色
weixin_43797908的博客
10-21 2797
【代码】console.log()占位符用法-设置打印颜色。
console 控制台带样式输出
宏斌的博客
09-22 402
const defaultStyle = "font-size: 10px;padding: 2px 4px;border-radius: 3px;letter-spacing:1px;"; const warnStyle = defaultStyle + "color: #fff; background: #afa;"; const logStyle = defaultStyle + "color: #fff; background: #51f;"; const errorStyle = defa.
小程序怎么自定义wx.showModal
09-17
可以使用自定义组件来实现自定义的模态弹窗效果。首先，你需要在项目中创建一个自定义组件，包括wxml、wxss和js文件。在自定义组件的wxml文件中，可以使用view、button等组件来构建你想要的弹窗界面。在wxss文件中，可以定义弹窗的样式。在js文件中，你可以定义弹窗的行为逻辑，比如点击按钮的事件处理函数等。然后，在页面中引入该自定义组件，并在合适的位置使用该组件来展示你的自定义模态弹窗。 以下是一个简单的示例代码，演示了如何自定义一个模态弹窗组件： 1. 创建自定义组件 在项目目录下创建一个名为modal的文件夹，在该文件夹下创建modal.wxml、modal.wxss和modal.js文件。 2. 在modal.wxml中添加弹窗的内容，比如标题、内容和按钮等。 ``` <view class="modal"> <text class="title">{{title}}</text> <text class="content">{{content}}</text> <button class="cancel-btn" bindtap="onCancel">取消</button> <button class="confirm-btn" bindtap="onConfirm">确定</button> </view> ``` 3. 在modal.wxss中定义弹窗的样式，比如背景颜色、字体大小和按钮样式等。 ``` .modal { background-color: #fff; padding: 20rpx; border-radius: 10rpx; } .title { font-size: 24rpx; font-weight: bold; margin-bottom: 10rpx; } .content { font-size: 20rpx; margin-bottom: 20rpx; } .cancel-btn, .confirm-btn { background-color: #007aff; color: #fff; padding: 10rpx 20rpx; border-radius: 10rpx; } ``` 4. 在modal.js中定义弹窗的行为逻辑，比如点击按钮的事件处理函数。 ``` Component({ properties: { title: { type: String, value: '提示' }, content: { type: String, value: '请输入内容' } }, methods: { onCancel() { this.triggerEvent('cancel'); }, onConfirm() { this.triggerEvent('confirm'); } } }) ``` 5. 在页面中引入该自定义组件，并在需要显示弹窗的地方使用该组件。 在页面的json文件中添加以下代码： ``` { "usingComponents": { "modal": "/path/to/modal/modal" } } ``` 在页面的wxml文件中使用该自定义组件： ``` <modal title="自定义弹窗标题" content="自定义弹窗内容" bind:cancel="onCancel" bind:confirm="onConfirm"></modal> ``` 在页面的js文件中定义弹窗相关的事件处理函数： ``` Page({ onCancel() { console.log('点击了取消按钮'); }, onConfirm() { console.log('点击了确定按钮'); } }) ``` 这样，你就可以根据需要自定义wx.showModal的样式和行为了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值