菜单

你不精晓的一对小才具_javascript技能_脚本之家

2020年3月21日 - 新闻中心

澳门太阳集团,前言

时间: 2018-01-24阅读: 3781标签: 调试

写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量。

js的console对象主要用于在浏览器控制台中输出一些常量或变量,除了大家常用的console.log()方法外,这篇文章在整理总结一些关于console调试的一些小技巧。

但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法。由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示。

不同类型日志输出:

不同级别日志

console在控制台上可以输出不同类型的日子信息,会采用不同的标志来展示 :

通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示。

console.log('文字信息');console.info('提示信息');console.warn('警告信息');console.error('错误信息');

Javascript调试之console对象,它的一些小技巧你都知道吗?

效果如下:

包含占位符

包含占位符:

在输出信息时可以通过%占位符来指定对应的值,而不用总是采用拼接字符串的方法。支持的占位符包括以下几种。

在输出信息时可以通过%占位符来指定对应的值,而不用总是采用拼接字符串的方法。支持的占位符包括以下几种。

%s – 字符 %d – 整数 %f – 浮点数 %o – 对象

%s – 字符%d – 整数%f – 浮点数%o – 对象%c- 定义css样式

通过以下一个简单的例子可以看出其用法。

console.log("%c%s吃了%d斤肉,花了%f元!","color: red; font-style: italic",'我',2,30.5);

Javascript调试之console对象,它的一些小技巧你都知道吗?

效果如下:

打印分组信息

分组输出:

通过group()方法可以以分组的形式展示出信息,类似于列表结构。

通过console.group()方法可以以分组的形式展示出信息,类似于列表结构。group()需要使用groupEnd()来结尾包裹分组内容;
groupCollapsed()可以用于代替group()生成折叠的分组。

Javascript调试之console对象,它的一些小技巧你都知道吗?

console.group('第一个组'); console.group("1-1"); console.group("1-1-1"); console.log('内容'); console.groupEnd(); console.groupEnd(); console.group("1-2"); console.log('内容'); console.log('内容'); console.groupEnd();console.groupEnd();console.groupCollapsed('第二个组'); console.group("2-1"); console.groupEnd(); console.group("2-2"); console.groupEnd();console.groupEnd();

表达式判断

效果如下:

在一些测试框架中,经常会用assert断言来判断一个表达式的值是否为真。同样在console对象中也有assert方法,在断言为真时并不会输出任何信息,而在断言为false时,直接抛出异常。

表达式判断:

上述代码中前两条语句判断结果都为true,所以没有输出任何信息,第三条语句判断结果为false,所以会直接抛出异常。

使用console.assert()方法来判断第一个参数是否为真,false的话抛出异常并且在控制台输出相应信息。

表格打印

console.assert(true);console.assert(1,false);console.assert(1===2);//报错VM525:1 Assertion failed: console.assert

console对象有个table方法,可以直接将对象类型的数据以表格展示。

前两条语句判断结果都为true,所以没有输出任何信息,第三条语句判断结果为false,所以会直接抛出异常。

函数调用栈信息

表格输出:

通过console.trace()方法可以展示出函数调用栈的信息,来查看函数调用过程,一般会选择将这个方法放在最后执行的函数的方法体中。

使用console.table()可以将传入的对象,或数组以表格形式输出,适合排列整齐的元素;

由于栈是先进后出机制,所以先执行的方法会在后面输出,因此上述代码结果会按照sum,
f2, f1的顺序输出。

var Arr = [ [1,2,3], [4,5,6], [7,8,9],]console.table(Arr);

计时

打印效果如下:

一般统计一段代码执行耗时,方法会是通过Date对象获取毫秒数,然后将两个毫秒数进行相减。

计时计算:一般统计一段代码执行耗时,方法会是通过Date对象获取毫秒数,然后将两个毫秒数进行相减。
除了Date以外在控制台中我们可以通过使用console.time()和console.timeEnd()方法来统计代码段的执行耗。

在上述代码中通过endTime和startTime两个变量的差值来计算出中间执行代码的耗时,我们可以看出往一个数组中添加100000个字符串耗时为15毫秒。

console.time("这段代码");var arr=[];for(var i = 0; i  1000; i++){arr.push(i);}console.timeEnd("这段代码");//这段代码: 0.275146484375ms

同样可以通过console对象的time方法来统计代码段的执行耗时。time可以接收一个字符串作为标识,而且两个方法接收的字符串必须一样,如果没有传入字符串则默认为‘default’字符串。

注意:使用Console.time()和Console.timeEnd()包裹需要计时的代码片段,其中time()和timeEnd()中的参数必须是一致(即相同字符串),否则会出现0ms的情况。

console对象计时方法

函数调用栈信息console.trace()方法可以展示出函数调用栈的信息,来查看函数调用过程,一般会选择将这个方法放在最后执行的函数的方法体中。

上述代码执行结果为16毫秒,与之前那个方法产生的结果大致一样。

function add(a, b) { console.trace("Add"); return a + b;}function f1(a, b) { return add(a, b);}function f2(a, b) { return f1(a, b);}var x =f2(1, 1);

性能分析

打印效果如下:

通过console.profile()和console.profileEnd()方法,可以展示出代码中各个函数执行所消耗的时间,可以用来评估代码性能。

VM218:2 Addadd @ VM218:2f1 @ VM218:6f2 @ VM218:9(anonymous) @ VM218:11

我们使用以下测试代码来进行说明。

性能分析:通过console.profile()和console.profileEnd()方法,可以展示出代码中各个函数执行所消耗的时间,可以用来评估代码性能。

打开chrome浏览器的控制台会有一个Javascript
Profile菜单栏,如果默认情况下没有的话,可以按照以下方法打开。

function f1(){for(var j=0;j100;j++){}}function fn(){for(var i=0;i1000;i++){f1();}}console.profile('profile1');fn()console.profileEnd();

Javascript Profile

打开chrome浏览器的控制台会有一个Javascript
Profile菜单栏,如果默认情况下没有的话,可以按照以下方法打开。

打开这个菜单选项后,我们可以看出每个方法执行消耗的时间。

打开这个菜单选项后,我们可以看出每个方法执行消耗的时间。 如下:

以上所述是小编给大家介绍的Javascript调试之console对象——你不知道的一些小技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

对象和节点的查看:

使用Console.dir()显示一个对象的所有属性和方法,在Chrome中Console.dir()和Console.log()效果相同。

使用Console.dirxml()显示一个对象的所有属性和方法,在Chrome中Console.dirxml()和Console.log()效果相同。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图