console用法大全
对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重,取而代之则是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)
了。
然而对于作为一个全局对象的console
对象来说,大多数人了解得还并不全面,当然我也是,经过我的一番学习,现在对于这个能玩转控制台的 JS 对象有了一定的认识,想与大家分享一下。
console 对象除了console.log()
这一最常被开发者使用的方法之外,还有很多其他的方法。灵活运用这些方法,可以给开发过程增添许多便利。
console 的方法
console.assert(expression, object[, object...])
接收至少两个参数,第一个参数的值或返回值为false
的时候,将会在控制台上输出后续参数的值。例如:
console.assert(1 == 1, object); // 无输出,返回 undefined
console.assert(1 == 2, object); // 输出 object
console.count([label])
输出执行到该行的次数,可选参数 label 可以输出在次数之前,例如:
(function() {
for (var i = 0; i < 5; i++) {
console.count('count');
}
})();
// count: 1
// count: 2
// count: 3
// count: 4
// count: 5
console.dir(object)
将传入对象的属性,包括子对象的属性以列表形式输出,例如:
var obj = {
name: 'classicemi',
college: 'HUST',
major: 'ei'
};
console.dir(obj);
输出:
console.error(object[, object...])
用于输出错误信息,用法和常见的console.log
一样,不同点在于输出内容会标记为错误的样式,便于分辨。输出结果:
console.group
这是个有趣的方法,它能够让控制台输出的语句产生不同的层级嵌套关系,每一个console.group()
会增加一层嵌套,相反要减少一层嵌套可以使用console.groupEnd()
方法。语言表述比较无力,看代码:
console.log('这是第一层');
console.group();
console.log('这是第二层');
console.log('依然第二层');
console.group();
console.log('第三层了');
console.groupEnd();
console.log('回到第二层');
console.groupEnd();
console.log('回到第一层');
输出结果:
和console.group()
相似的方法是console.groupCollapsed()
作用相同,不同点是嵌套的输出内容是折叠状态,在有大段内容输出的时候使用这个方法可以使输出版面不至于太长。。。吧
console.info(object[, object...])
此方法与之前说到的console.error
一样,用于输出信息,没有什么特别之处。
console.info('info'); // 输出 info
console.table()
可将传入的对象,或数组以表格形式输出,相比传统树形输出,这种输出方案更适合内部元素排列整齐的对象或数组,不然可能会出现很多的 undefined。
var obj = {
foo: {
name: 'foo',
age: '33'
},
bar: {
name: 'bar',
age: '45'
}
};
var arr = [
['foo', '33'],
['bar', '45']
];
console.table(obj);
console.table(arr);
也可以
console.log(object[, object...])
这个不用多说,这个应该是开发者最常用的吧,也不知道是谁规定的。。。
console.log('log'); // 输出 log
console.profile([profileLabel])
这是个挺高大上的东西,可用于性能分析。在 JS 开发中,我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以,但显得不够灵活而且有误差。借助控制台以及console.profile()
方法我们可以很方便地监控运行性能。
例如下面这段代码:
function parent() {
for (var i = 0; i < 10000; i++) {
childA()
}
}
function childA(j) {
for (var i = 0; i < j; i++) {}
}
console.profile('性能分析');
parent();
console.profileEnd();
然后我们可以在 Profiles 面板下看到上述代码运行过程中的消耗时间。
页面加载过程的性能优化是前端开发的一个重要部分,使用控制台的 profiles 面板可以监控所有 JS 的运行情况使用方法就像录像机一样,控制台会把运行过程录制下来。如图,工具栏上有录制和停止按钮。
录制结果:
console.time(name)
计时器,可以将成对的console.time()
和console.timeEnd()
之间代码的运行时间输出到控制台上,name
参数可作为标签名。
console.time('计时器');
for (var i = 0; i < 1000; i++) {
for (var j = 0; j < 1000; j++) {}
}
console.timeEnd('计时器');
(刚才实际多写了一层循环,结果电脑风扇呜呜转啊,浏览器直接无响应了。。。)
console.trace()
console.trace()
用来追踪函数的调用过程。在大型项目尤其是框架开发中,函数的调用轨迹可以十分复杂,console.trace()
方法可以将函数的被调用过程清楚地输出到控制台上。
function tracer(a) {
console.trace();
return a;
}
function foo(a) {
return bar(a);
}
function bar(a) {
return tracer(a);
}
var a = foo('tracer');
输出:
console.warn(object[, object...])
输出参数的内容,作为警告提示。
console.warn('warn'); // 输出 warn
占位符
console
对象上的五个直接输出方法,console.log()
,console.warn()
,console.error()
,console.exception()
(等同于console.error()
)和console.info()
,都可以使用占位符。支持的占位符有四种,分别是字符(%s
)、整数(%d
或%i
)、浮点数(%f
)和对象(%o
)。
console.log('%s是%d年%d月%d日', '今天', 2014, 4, 15);
console.log('圆周率是%f', 3.14159);
var obj = {
name: 'classicemi'
}
console.log('%o', obj);
还有一种特殊的标示符%c
,对输出的文字可以附加特殊的样式,当进行大型项目开发的时候,代码中可能有很多其他开发者添加的控制台语句。开发者对自己的输出定制特别的样式就可以方便自己在眼花缭乱的输出结果中一眼看到自己需要的内容。想象力丰富的童鞋也可以做出有创意的输出信息,比如常见的招聘信息和个人介绍啥的。
输出结果:
console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;');
%c
标示符可以用各种 CSS 语句来为输出添加样式,再随便举个栗子,background
属性的url()
中添加图片路径就可以实现图片的输出了,各位前端童鞋快施展你们的 CSS 神技来把控制台玩坏吧~~
console用法大全的更多相关文章
- 关于c#中的console用法大全
C#之Console Console.Write 表示向控制台直接写入字符串,不进行换行,可继续接着前面的字符写入.Console.WriteLine 表示向控制台写入字符串后换行.Conso ...
- JavaScript console 用法大全
对于前端开发者来说,在开发过程中需要监控某些表达式或变量的值的时候,用 debugger 会显得过于笨重,取而代之则是会将值输出到控制台上方便调试.最常用的语句就是console.log(expres ...
- MVC5 + EF6 + Bootstrap3 (9) HtmlHelper用法大全(下)
文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-httphelper-part2.html 上一节 ...
- MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)
文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-httphelper-part1.html 上一节 ...
- MVC HtmlHelper用法大全
MVC HtmlHelper用法大全HtmlHelper用来在视图中呈现 HTML 控件.以下列表显示了当前可用的一些 HTML 帮助器. 本主题演示所列出的带有星号 (*) 的帮助器. ·Actio ...
- C# MessageBox 用法大全(转)
C# MessageBox 用法大全 http://www.cnblogs.com/Tammie/archive/2011/08/05/2128623.html 我们在程序中经常会用到MessageB ...
- MVC中HtmlHelper用法大全参考
MVC中HtmlHelper用法大全参考 解析MVC中HtmlHelper控件7个大类中各个控件的主要使用方法(1) 2012-02-27 16:25 HtmlHelper类在命令System.Web ...
- pandas用法大全
pandas用法大全 一.生成数据表 1.首先导入pandas库,一般都会用到numpy库,所以我们先导入备用: import numpy as np import pandas as pd12 2. ...
- 转帖: 一份超全超详细的 ADB 用法大全
增加一句 连接 网易mumu模拟器的方法 adb connect 127.0.0.1:7555 一份超全超详细的 ADB 用法大全 2016年08月28日 10:49:41 阅读数:35890 原文 ...
随机推荐
- how to enable #ifdef macro in the command line of make?
Compilers normally use the -D flags eg Code: test.o: test.cpp $(CC) $(CFLAGS) -DTEST1 test.cpp -o $@
- Mysql主从复制(基于Log)
Master(主)操作 实验机:两台 IP:192.168.1.5 192.168.1.10 操作系统:Linux RedHat 6.5 Mysql版本:5.6.31 # vim /etc ...
- pthread_join
摘要:pthread_join使一个线程等待另一个线程束. 代码中如果没有pthread_join主线程会很快结束从而使整个进程结束,从而使创建的线程没有机会开始执行就结束了.加入pthread_jo ...
- Quick Cocos2dx 与 EnterFrame事件
利用EnterFrame做出行走的效果,效果图如下: 具体操作: 1 给self多加一个bg1用作与bg无限循环换位 2 在AnotherScene:onEnter方法里面新增onEnterFrame ...
- POJ 3187 Backward Digit Sums
暴力DFS+验证. 验证如果是暴力检验可能复杂度会太高,事实上可以o(1)进行,这个可以o(n*n)dp预处理. #include<cstdio> #include<cstring& ...
- HDU 3501 Calculation 2 ——Dirichlet积
[题目分析] 卷积太有趣了. 最终得出结论,互质数和为n*phi(n)/2即可. 计算(n*(n+1)/2-n-n*phi(n)/2)%md,用反正法即可证明. [代码] #include <c ...
- ubuntu12.04+fuerte 下跑通lsd-slam——数据集
lsd-slam(下载链接:https://github.com/tum-vision/lsd_slam)提供了两种方法,一种是用数据集(下载地址http://vision.in.tum.de/lsd ...
- SSH报错分析
排错设计思路 1.配置文件的端口号修改 2.禁用root 3./etc/hosts.allow /etc/hosts.deny 4.iptables 5.密钥文件及目录的权限修改 1. 报错的原因:是 ...
- 用DMA直接驱动GPIO,实现GPIO最高输出速率(转)
源:用DMA直接驱动GPIO,实现GPIO最高输出速率 先上图:STM32F303芯片,72M的主频 可以看到GPIO的达到了14.4M的翻转速率, 再来上代码: RCC_AHBPeriph ...
- UVa 900 - Brick Wall Patterns
题目大意:用1*2的砖头建n*2的墙,问有多少种不同的砖头排列方式?与斐波那契序列相似. #include <cstdio> #define MAXN 60 #define N 50 un ...