作为一个前端,console.log()可能是你最常用的方法,打印打印再打印,但是其实console对象上有用的方法有很多,来,各位看官上眼

分类输出

厌倦了 console.log 单调的输出?欢迎尝试 console 对象的分类输出功能。console 对象提供了 info、warn、error 方法分别输出提示、警告以及错误信息。

我们输入下面这段代码:

console.log('log');
console.info('info');
console.warn('warn');
console.error('error');

结果如下图所示:

断言输出

console 对象提供了类似于单元测试中的断言的方法:assert。该方法接收两个参数,第一个参数为断言条件,第二个参数代表断言信息。

同单元测试断言一样,当断言条件为 true 时,assert 无输出;只有当断言条件为 false 时,assert 方法才会在控制台中输出一条断言错误信息。

我们输入以下代码:

console.assert(true, 'true');
console.assert(false, 'false');

控制台如下所示:

分组输出

当你的控制台上输出了大量信息时,控制台会显得极其杂乱,你甚至不知道某一条信息是哪条代码输出的。此时,console 对象的 group 以及 groupEnd 方法可以拯救你。

将部分 console 语句放入 group 与 groupEnd 之间,可以形成将这部分 console 语句划定为一组信息进行输出。其中,group 方法接收一个字符,作为分组名称,groupEnd 方法不接收参数用于结束分组。

输入以下代码:

console.group('1');
console.log('1-1');
console.warn('1-2');
console.error('1-3');
console.groupEnd(); console.group('2');
console.log('2-1');
console.warn('2-2');
console.error('2-3');
console.groupEnd();

  结果如图所示:

表格输出

我们不仅可以将控制台信息分组输出,我们还可以将其以表格的形式输出。

console 的 table 方法可以将一个对象以表格的形式输出,当输入的参数不是对象时,此时,table 方法相当于 log 方法。

输入以下代码:

const obj = {
a: {
id: ,
value:
},
b: {
id: ,
value:
}
}; console.log(obj); console.table(obj);

控制台如图所示:

计次输出

在日常开发中,有一个常见的调试需求——计算一段代码的执行次数。一般来说,我们会在这段代码中定义一个变量,每执行一次它就进行一次自增,并通过 console.log 方法输出该变量。

可以看出,上述的方法略显麻烦,可不可以一行代码就解决这个问题呢?当然可以!count 方法,你值得拥有。

for(let i = ; i < ; i++){
console.count("num");
}
console.count("num");
console.count("anotherNum");

计时输出

当测试算法性能时,我们通常使用时间复杂度来评价算法的性能,但是,时间复杂度哪里有代码执行时间来的直观呢?

在之前不了解 console 对象的时候,我们在算法的头尾分别获取时间戳,取时间戳的差值作为代码执行时间。很明显,这种方法太过繁琐。

使用 console 对象的 time 以及 timeEnd 方法可以计算出代码执行时间。

console.time('time');
let sum = ;
for (let i = ; i < ;i++) {
sum += i;
}
console.timeEnd('time');

结果如下图所示:

原文链接:https://www.yuque.com/fe9/basic/hn1uw6

倾力推荐一下,前端九部真的写的很好,很细致

console对象探究的更多相关文章

  1. console对象-转

    console对象 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 开发者工具 console对象 console.log() console.debug() ...

  2. console对象

    今天无意中看到console.info()的时候不自觉的楞了一下,对于console.info()确实不是十分的了解,平时就是用console.log(),既然不太明白就去网上看了一下关于consol ...

  3. 解决 IE 6/7 中console对象兼容性问题

    话不多说,直接上代码 (function (){ //创建空console对象,避免JS报错 if(!window.console) window.console = {}; var console ...

  4. 浏览器js console对象

    js中调用console写日志 console.log("some log"); console.warn("some warning"); console.e ...

  5. 浏览器兼容console对象的简要解决方案

    不同浏览器或者版本之间对于console对象的支持不尽相同,而console方法在开发调试过程中都是不错的工具.难道要在上线前把所有console.xxxx去掉以保证某些浏览器不报错么.其实可以变通解 ...

  6. JavaScript -- 时光流逝(十三):DOM -- Console 对象

    JavaScript -- 知识点回顾篇(十三):DOM -- Console 对象 (1) assert() : 如果断言为 false,则在信息到控制台输出错误信息.(2) clear() : 清 ...

  7. console对象的理解

    console对象代表浏览器的JS控制台,虽然不是标准,但已经成为事实的标准 console对象的作用 a.显示代码运行错误信息 b.提供一个命令行接口,用来与网页互动 console对象拥有很多方法 ...

  8. console.log格式化及console对象

    一.console.log格式化打印 console.log格式化这一用法一般都在个人博客或其他官网上有,当F12查看网页元素时,在控制台(console)那里偶尔会发现一些个性化的输出,感觉很奇特很 ...

  9. 代码调试console对象的花式玩法

    转自阮一峰http://www.ruanyifeng.com/home.html console.log(),console.info(),console.debug() console.log方法用 ...

随机推荐

  1. [Swift]LeetCode70. 爬楼梯 | Climbing Stairs

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...

  2. IO复用(较详细)

    进程与线程的描述 一个进程至少会创建一个线程,多个线程共享一个程序进程的内存.程序的运行最终是靠线程来完成操作的.线程的数量跟CPU核数有关,一个核最多能发出两个线程.线程的操作主要分为:一:给CPU ...

  3. Django+Bootstrap+Mysql 搭建个人博客(二)

    2.1.博客首页设计 (1)settings.py MEDIA_ROOT = os.path.join(BASE_DIR,'media').replace("//","/ ...

  4. 【JVM虚拟机】(3)---垃圾回收器

    垃圾回收器 收集算法是内存回收的方法论,垃圾收集器就是内存回收的具体实现.收集器主要分三类:串行收集器.并行收集器以及并发收集器. 一.基础概念 1.并发和并行 a:并行(Parallel):指多条垃 ...

  5. 华为oj之质数因子

    题目: 质数因子 热度指数:5143 时间限制:1秒 空间限制:32768K 本题知识点: 排序 题目描述 功能:输入一个正整数,按照从小到大的顺序输出它的所有质数的因子(如180的质数因子为2 2 ...

  6. Lucene 05 - 使用Lucene的Java API实现分页查询

    目录 1 Lucene的分页查询 2 代码示例 3 分页查询结果 1 Lucene的分页查询 搜索内容过多时, 需要考虑分页显示, 像这样: 说明: Lucene的分页查询是在内存中实现的. 2 代码 ...

  7. shell高级特性-4

    1.shell模块 shell脚本中可以加载配置文件或调用已经完成函数或脚本. a.加载配置文件 新建配置文件config,插入以下代码: reboot_mode=True 在同一路径下,新建文件mo ...

  8. web前端安全

    之前对web前端安全进行了总结,想给大家分享一下,有不对的地方,大家多多交流,由于写在了PPT上,只好给大家一张一张粘上来,希望大家不要在意,了解知识为主

  9. Nacos 发布 v0.8.0 Pre-GA版本,安全稳定上生产?

    服务注册和服务配置开源项目 Nacos 本周发布了 v0.8.0 Pre-GA 版本,作为开源项目生命周期中的里程碑版本之一,v0.8.0 Pre-GA版本支持登录.命名空间.Metrics监控(对接 ...

  10. 微服务实战(二):使用API Gateway

    微服务实战(一):微服务架构的优势与不足 微服务实战(二):使用API Gateway 微服务实战(三):深入微服务架构的进程间通信 微服务实战(四):服务发现的可行方案以及实践案例 微服务实践(五) ...