javaScript console用法

javaScript console详解

console.log概述

谈到javaScript 的 console,通常能说的就是console.log/info/warning等等,比如,console.time(test){….fn….}console.endTime(test)算个程序跑的时间啦什么鬼的。。这有什么用。没用!而我们追求的是什么?当然是好看!
以前的日志是这样的:
这里写图片描述
而现在的日志是这样的:
console

开工!

自定义日志样式很简单,大概就是
console.log('%c xx','color:red')
%c后边跟想要输出的日志内容,在后边就是跟自定义的样式,得到
xx
像文中这样,每个字体都是不一样的样式,即对每个字前,加%c,然后后边的样式以“,”分割即可,比如

console.log('%c不%c一%c样','color:red','color:blue','color:green')

nosame
知道日志自定义样式的原理,做出本文动图就简单了。
首先选择一条想要输出的日志,但是不可能手动去写%c xx %c xxx,如果日志很长那么这也太蠢了。
于是将 日志的每一个字转换成数组的每一个元素,比如本文中的“我的日志萌萌哒”,通过代码,把他转换到数组当中,然后再拼接成%c的字符串,具体操作为:

let log = "我的日志萌萌哒~".split('').reduce((pre, cur)=> {
                   return pre + '%c' + cur
                   }, '');

这样我们就得到了,类似%c xx这样满足条件的字符串。
然后,在这次循环中,去定义每个字的样式,想要让每个字颜色,大小不同,只需要去,生成随机数,然后赋值给字体大小和颜色即可,以下是加了生成随机样式的代码。

let log = "我的日志萌萌哒~".split('').reduce((pre, cur)=> {
                    let color = `#${Math.floor(Math.random() * 16777215).toString(16)}`
                    let random = Math.floor(Math.random() * 10)
                    style.push({
                        'font-size': `${random + 20}pt`,
                        'color': color,
                        'text-shadow': `5px 5px 10px ${color}`,
                        'font-family': `${fonts[random]}`//这里在外边定义了一些字体
                    })
                    return pre + '%c' + cur
                }, '');

因为console.log(%c x%c x,’style1’,’style2’)需要的是这样的格式,所以,需要将之前推入style数组的样式对象拿出来,再拼成字符串(这里貌似可以直接在reduce循环里去拼,但是我不,我就要多写几行)。
代码如下:

        let styleStr = ''
        for (let a of style) {
                for (let b in a) {
                    styleStr += `${b}:${a[b]};`
                    }
                    styleStr += `,`
                }

拼出字符串后,因为格式需要‘,’分割,所以在拼成数组,然后再扩展运算展开。恩,对,就是这样!
console.log(log, …(styleStr.split(‘,’)))
当当当当,大功告成!
绕了这么多路,本文自定义日志的应用场景有哪些呢?
根本没有!
做人呢,最重要的就是开心~



代码地址:https://github.com/jiwenjiang/j-selects/tree/develop

### 关于JavaScript控制台实用工具 在开发过程中,开发者经常依赖浏览器内置的 `console` API 来调试和记录程序运行状态。以下是几个常用的 JavaScript 控制台实用函数及其功能: #### 基本日志记录 最基础的日志记录方法是使用 `console.log()` 函数来打印变量或表达式的值到控制台[^3]。 ```javascript console.log('This is a log message'); ``` #### 警告与错误消息 除了简单的日志外,还可以通过 `console.warn()` 和 `console.error()` 发布警告或错误信息。这些方法通常用于标记需要注意的地方或者显示异常情况下的反馈[^4]。 ```javascript // 输出一条黄色高亮的警告信息 console.warn('Warning: This feature will be deprecated soon.'); // 显示红色字体的错误提示 console.error('Error occurred while processing request.'); ``` #### 数据结构可视化 当需要查看复杂的数据对象时,可以利用 `console.table()` 方法以表格形式展示数组或其他可迭代数据集的内容[^5]。 ```javascript const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]; console.table(users); ``` #### 性能分析支持 为了帮助优化应用性能,现代浏览器提供了诸如时间测量等功能。例如可以通过调用 `console.time(label)` 开始计时,并随后执行结束操作 `console.timeEnd(label)` 获取所耗时间长度[^6]。 ```javascript console.time('Response time'); fetchData().then(() => { console.timeEnd('Response time'); // 打印请求所需的时间 }); ``` #### 断点设置辅助 虽然严格意义上不属于传统意义上的“utility”,但在某些情况下也可以借助断言机制实现更精细的行为验证——即每当某个条件不满足预期时自动触发中断并抛出相应描述性的错误信息给定位置处暂停脚本继续向下执行直到修复问题为止[^7]。 ```javascript function assert(condition, message) { if (!condition) throw new Error(message || "Assertion failed"); } assert(false === true); // 将会引发未捕获的exception从而停止进一步动作流程。 ``` 以上列举了一些常见的Console Utilities Functions And Tools In JavaScript 的例子供参考学习之用;当然还有更多高级特性等待探索发现!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值