console对象探究
作为一个前端,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对象探究的更多相关文章
- console对象-转
console对象 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 目录 开发者工具 console对象 console.log() console.debug() ...
- console对象
今天无意中看到console.info()的时候不自觉的楞了一下,对于console.info()确实不是十分的了解,平时就是用console.log(),既然不太明白就去网上看了一下关于consol ...
- 解决 IE 6/7 中console对象兼容性问题
话不多说,直接上代码 (function (){ //创建空console对象,避免JS报错 if(!window.console) window.console = {}; var console ...
- 浏览器js console对象
js中调用console写日志 console.log("some log"); console.warn("some warning"); console.e ...
- 浏览器兼容console对象的简要解决方案
不同浏览器或者版本之间对于console对象的支持不尽相同,而console方法在开发调试过程中都是不错的工具.难道要在上线前把所有console.xxxx去掉以保证某些浏览器不报错么.其实可以变通解 ...
- JavaScript -- 时光流逝(十三):DOM -- Console 对象
JavaScript -- 知识点回顾篇(十三):DOM -- Console 对象 (1) assert() : 如果断言为 false,则在信息到控制台输出错误信息.(2) clear() : 清 ...
- console对象的理解
console对象代表浏览器的JS控制台,虽然不是标准,但已经成为事实的标准 console对象的作用 a.显示代码运行错误信息 b.提供一个命令行接口,用来与网页互动 console对象拥有很多方法 ...
- console.log格式化及console对象
一.console.log格式化打印 console.log格式化这一用法一般都在个人博客或其他官网上有,当F12查看网页元素时,在控制台(console)那里偶尔会发现一些个性化的输出,感觉很奇特很 ...
- 代码调试console对象的花式玩法
转自阮一峰http://www.ruanyifeng.com/home.html console.log(),console.info(),console.debug() console.log方法用 ...
随机推荐
- charles-web端开发者实用功能点
##网速模拟功能 throttle功能对于前端来说非常实用,可以看页面在低网速下的表现,从而找出优化的点. 在线上环境通常有些因为网速慢导致的bug,在本机无法重现,那时候就很抓瞎,如果嫌远程麻烦,推 ...
- Hadoop源码分析:Hadoop编程思想
60页的ppt讲述Hadoop的编程思想 下载地址 http://download.csdn.net/detail/popsuper1982/9544904
- MyEclipse最新版-版本更新说明及下载 - MyEclipse官方中文网
http://www.myeclipsecn.com/learningcenter/myeclipse-update/ [重要更新]MyEclipse 2015正式版发布 [重要更新]MyEclips ...
- Javascript高级编程学习笔记(89)—— Canvas(6) 变换
变换 通过上下文的变化,可以对图像进行处理后再将其绘制到画布上 当我们创建上下文时,会以默认值初始化变化矩阵,在默认的变换矩阵下所有处理都按描述直接绘制. 而当我们为上下文应用变换时,会导致使用不同的 ...
- [Swift]LeetCode679. 24点游戏 | 24 Game
You have 4 cards each containing a number from 1 to 9. You need to judge whether they could operated ...
- [Swift]LeetCode813. 最大平均值和的分组 | Largest Sum of Averages
We partition a row of numbers A into at most K adjacent (non-empty) groups, then our score is the su ...
- [Swift]LeetCode926. 将字符串翻转到单调递增 | Flip String to Monotone Increasing
A string of '0's and '1's is monotone increasing if it consists of some number of '0's (possibly 0), ...
- 了解django部署(Django + Uwsgi + Nginx)
首先了解下基本概念: 1 WSGI WSGI:全称是Web Server Gateway Interface,是python应用程序或者框架和web服务器之间的一种接口,被广泛接受.WSGI不是服务器 ...
- 10.Git分支-分支管理(git branch命令)、分支开发工作流
1.分支管理 git branch 不仅可以创建和删除分支,还可以做一些其他工作. 1.不带参数的 git branch ,得到本地仓库当前的分支列表.并且会显示,当期所在的分支,也就是HEAD所指 ...
- 【Storm篇】--Storm中的同步服务DRPC
一.前述 Drpc(分布式远程过程调用)是一种同步服务实现的机制,在Storm中客户端提交数据请求之后,立刻取得计算结果并返回给客户端.同时充分利用Storm的计算能力实现高密度的并行实时计算. 二. ...