只会用console.log调试?快来试试这些高效的调试方法
别光知道用console.log调试了,快来试试这些高效的调试方法!
作为一名前端开发人员,你一定经常是用 console.log 来进行开发调试,这当然没什么问题,但你可能不知道,除了 console.log ,浏览器的 Console 对象还包含了许多其他非常有用的方法,让我们一起来领略一下吧。
console.log
介绍
console.log方法使我们最常使用的了,用于在控制台打印信息。他的功能还是很强大的,各种数据类型如number、string、array、object、function等都能打印,并在后面显示错误发生的位置。
示例
let num = 123
let str = '123'
let arr = [1, 2, 3]
let obj = {a: 1,b: 2,c: 3,
}
function func() {// 我是全掘金最帅的
}
console.log(num)
console.log(str)
console.log(arr)
console.log(obj)
console.log(func)
Chrome控制台效果如下:
console.info
介绍
console.info 和 console.log 的作用是几乎完全一样的,也是在控制台中打印信息,只不过打印时的样式可能与 console.log 略有区别。
在这里需要说明一下,Console 对象并不是javascript的内置对象,而是浏览器的内置对象,因此在控制台中的输出样式和各浏览器相关。
示例
console.log('this is console.log')
console.info('this is console.info')
在Chrome浏览器的控制台中效果如下,二者看上去没有什么区别:
在火狐浏览器的控制台效果如下,console.info 打印的内容前面多了个 ! 符号:
console.error
介绍
console.error 同样和console.log的作用几乎一样,不过会将打印的内容通过显目的红色标注出来并前面带一个 × 。
如下所示,当大家在开发调试的过程中通过 console.log 打印的内容很多,但某条打印信息想要快速的找到时,console.error 这种“万黑丛中一点红”的效果,可以让你很便捷地找到。
示例
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.error('牛牛牛牛牛牛牛牛牛午牛牛牛牛牛牛') // 这里面有个 '午' 字
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
console.log('牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛牛')
小提示
当然了,当我们的程序逻辑执行出错时,在控制台中的报错信息也是通过 console.error 来打印的,所以如果你真的使用 console.error 来进行调试时,千万不要把打印的内容误以为代码逻辑有错误。
我自己是一名从事了多年开发的web前端老程序员,前段时间我花了一个月整理了一份最适合学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以添加下面的QQ群,即可免费获取。
console.warn
介绍
console.warn的道理同上,会通过黄色感叹号来高亮打印信息。
示例
console.log('this is console.log')
console.warn('this is console.warn')
控制台输出如下:
console.time和console.timeEnd
介绍
console.time 和 console.timeEnd 两个方法是结合在一起使用的,他们接受一个相同的参数,输出两句表达式中间的代码的执行时间。
示例
console.time('计时器1');
for (var i = 0; i < 1000; i++) {for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器1');
chrome控制台的打印信息如下:
小提示
console.time 和 console.timeEnd 接收的参数不止可以是字符串,可以是任何类型,也可以是变量,甚至这种传入两个“长相相同”的引用类型也可以。他会对传入的对象执行toString()方法作为最终的打印名称,例如你对console.time 和 console.timeEnd分别传入值[1, 2, 3],虽然两个[1, 2, 3]的地址不同,但执行了toString方法后他们都变成了1, 2, 3,这也是符合规则的。
可以同时定义多组console.time 和 console.timeEnd,并且他们之间可以交叉使用,只要保持每组接收的参数一致就行,如下面的使用方法也是可以的:
console.time('计时器1');
console.time('计时器2');
for (var i = 0; i < 1000; i++) {for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器1');
for (var i = 0; i < 10000; i++) {for (var j = 0; j < 10000; j++) {}
}
console.timeEnd('计时器2');
执行结果如下:
应用
console.time 和 console.timeEnd 可以让你在开发过程中方便的调试各段逻辑的执行时间,去比较不同的方法所消耗的时间。在了解这两个方法之前,我一般是通过两个Date.now()相减去计算某段逻辑的执行时间,有了这组方法后调试更加方便了。
console.count
介绍
console.count 会打印当前的打印内容,并在后面跟上该内容的打印次数。
示例
console.count('content1');
console.count('content1');
console.count('content1');
console.count('content2');
console.count('content2');
for (let i = 0; i < 5; i++) {console.count('content3')
}
控制台的打印结果如下:
console.table
介绍
console.table 会将复合数据类型(对象,数组等)在控制台中以表格的形式打印输出,并且你可以将对象数组嵌套乃至结合使用,他都能够将其解析为表格形式。
示例
let obj= {a: 1,b: 2,c: 3
};
console.table(obj);let arr = [1, 2, 3]
console.table(arr);let data1 = [{ num: 1 },{ num: 2 },{ num: 3 },
]
console.table(data1);let data = [{ a: 1 },{ b: 2 },{ c: 3 },
]
console.table(data);
控制台的输出结果如下:
console.group/console.groupCollapsed和console.groupEnd
介绍
console.group和console.groupEnd 结合使用,他们用于将打印的信息分组,可以把信息进行折叠和展开。
示例
console.group('第一层');console.group('第二层');console.log('error');console.error('error');console.warn('error');console.groupEnd();
console.groupEnd();
Chrome浏览器的打印结果如下:
onsole.groupCollapsed 和 console.groupEnd 结合使用和上述的作用是一样的,唯一区别是 console.group 打印的内容第一次展示是展开的,console.groupCollapsed 打印的内容第一次展示是收齐的。
console.trace
介绍
console.trace 是一个调试过程中十分有用的方法,他可以追溯你的逻辑执行过程。
示例
function d(a) {console.trace();return a;
}
function b(a) {return c(a);
}
function c(a) {return d(a);
}
let a = b('123');
控制人输出如下:
当逻辑执行到let a = b(‘123’) 语句时,b函数会调用c函数,c函数再调用d函数,d函数中调用了console.trace(),这时console.trace()会将整个执行过程自底向上追溯打印出来。
console.assert
介绍
console.assert 方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数(并且以error提示的形式输出)。
示例
当逻辑执行到let a = b('123') 语句时,b函数会调用c函数,c函数再调用d函数,d函数中调用了console.trace(),这时console.trace()会将整个执行过程自底向上追溯打印出来。console.assert
介绍
console.assert 方法接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数(并且以error提示的形式输出)。示例
控制台的结果如下:
第一个console.assert 的参数1为false,所以打印了,第一个console.asserttrue,所以没打印。
console.clear
介绍
console.clear 方法会清空控制台所有打印内容,并将光标返回第一行,就不多说了。
给console的内容设置style
在你逛各个网站时,如果你去看他们的控制台打印信息,那么你可能会发现一些有趣的内容。例如?天猫的控制台:
介绍
我们也可以给控制台的日志信息添加样式。方法很简单,我们只需要将css style作为第二个参数传到console.log打印内容中,同时在第一个参数中添加%c,第二个参数中的内容将替换掉%c。
示例
const style = 'color: red; background: skyblue; font-size: 24px; padding: 10px; font-weight: bold;'
console.log('%c都看到这里了,还不点个赞?', style)
控制台打印信息如下:
总结
Console对象方法众多,功能强大,学着使用各种console方法,能够让我们在开发调试中事半功倍,快去体验一下各种有趣的console吧!
只会用console.log调试?快来试试这些高效的调试方法相关推荐
- js table多层嵌套_只会console.log?8个高效调试js的console方法
每个JavaScript开发者都用过console.log()来调试程序,但实际上Console对象还提供了很多其他方法可以提高调试效率.本文将介绍8个有趣的Console方法,即使JavaScrip ...
- 你所不知道的console.log()(console.log详解)
console.log,作为一个前端开发者,想必每天都会用它来做分析调试,但这个简单函数背后你所不知道的一面,很多人未必使用过,有一些也是很方便使用的 基础 首先,简单科普这个函数的作用.前端开发者可 ...
- 【译】如何停止使用console.log()转而使用浏览器debugger
如何停止使用console.log()转而使用浏览器debugger 原文地址:How to stop using console.log() and start using your browser ...
- 什么?console.log打印出的数据不对?
背景 都怪我年轻不懂事,调试代码只会用console.log.那么,就在今天,出事儿了! 看图说话.上面的111和222后面跟的数据竟然不一致? 在我的认知中,JSON里面的parse和stringi ...
- Android中获取WebView加载的html中console.log输出的内容
场景 Android中使用WebView加载本地html并支持运行JS代码和支持缩放: Android中使用WebView加载本地html并支持运行JS代码和支持缩放_BADAO_LIUMANG_QI ...
- 三行代码隐藏所有console.log
我们基本上使用console.log()在JS项目中检查代码是否正常工作,或者debugger代码中的错误或问题.没有日志很费时,也很难找到问题. 但是这些日志只供开发人员使用,您不想向最终用户显示这 ...
- 你不知道的console.log
前言 对于前端开发者,使用console.log() 次数绝对很多,但是大部分人认识的 console 对象还不是很全面,其实深入了解这些后,你会发现给开发过程带来很多便利,而且还很有趣. 先来看看别 ...
- [JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑
[JavaScript] 多数前端工程师都没注意到的一个关于console.log()的坑 请阅读以下代码并猜测结果: function test() {let obj = {}, arr=[]for ...
- webstorm配置,快捷键console.log,中文字体,快捷键配置等
webstorm配置 一.配置中文字体 二.选中了一个变量名,同名称高亮显示配置 三.快捷键相关配置 四.样式预编译,自动转成css或wxss mac的程序路径:/usr/local/lib/node ...
最新文章
- centos httpd服务做yum本地源,以及安装Mysql
- OS- -请求分页系统、请求分段系统和请求段页式系统(一)
- php实现文字向左跑马灯,js实现文字跑马灯效果
- 从零开始学java 框架_从零开始学 Java - 搭建 Spring MVC 框架
- 网络编程之-----------进程
- 10月5日起 部分小米红米机型将停止开发版内测公测
- perl abs函数
- CVPR2019,开源活体检测
- scala递归求斐波那契数列
- Python拷贝(深拷贝deepcopy与浅拷贝copy)
- 前端-【学习心得】-合作登录相关
- 基于matlab高等数学实验 pdf,基于MATLAB的高等数学综合性实验的教学设计.pdf
- 怎样锁定计算机桌面图标,win10系统锁定桌面图标的详细技巧
- docker 设置阿里云加速器
- CalBioreagents 绵羊抗α-2-HS糖蛋白 亲和纯化说明
- windows的hosts文件在哪?
- 《考取HCIA证书看我就够了》第五篇:[HCIA-IoT]物联网技术之感知层技术概览
- 计算机配件名称++太平洋,笔记本电脑配件大全
- android手机性能,手机性能排行榜2018前十名(安卓)
- 使用uni-app组件播放视频