console命令详解
在我们调试js代码的时候console绝对是一个非常方便快捷的方法:
查看console所有方法:
<script type="text/javascript">
console.dir(console);
</script>
运行结果:
常用操作:
- 显示信息的命令
- 占位符
- 信息分组
- 查看对象的信息
- 显示某个节点的内容
- 判断变量是否是真
- 追踪函数的调用轨迹
- 计时功能
- 性能分析
- 查看数组的信息
1.显示信息的命令
命令 | 用途 |
---|---|
console.log() | 日志(最常用) |
console.info() | 信息 |
console.error() | 错误 |
console.warn() | 警告 |
<!DOCTYPE html>
<html>
<head>
<title>常用console命令</title>
<meta charset=utf-8" />
</head>
<body>
<script type="text/javascript">
console.log('日志');
console.info('信息');
console.error('错误');
console.warn('警告');
</script>
</body>
</html>
运行结果:
2.占位符
console支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):
命令 | 用途 |
---|---|
%s | 字符 |
%d或%i | 整数 |
%f | 浮点数 |
%o | 对象 |
<script type="text/javascript">
console.log("%d年%d月%d日",2016,11,8);
</script>
运行结果:
3.信息分组
命令 | 用途 |
---|---|
console.group() | 分组 |
console.groupEnd() | 分组结束 |
<script type="text/javascript">
console.group("第一组信息");
console.log("第一组第一条");
console.log("第一组第二条");
console.groupEnd();
console.group("第二组信息");
console.log("第二组第一条");
console.log("第二组第二条");
console.groupEnd();
</script>
运行结果:
4.查看对象的信息
console.dir()可以显示一个对象所有的属性和方法:
命令 | 用途 |
---|---|
console.dir() | 查看对象 |
<script type="text/javascript">
var info = {
name:'David',
age:18,
gender:'male'
}
console.dir(info);
</script>
运行结果:
5.显示某个节点的内容
console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码:
命令 | 用途 |
---|---|
console.dirxml() | 显示节点 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>console.dirxml</title>
</head>
<body>
<ul id="list">
<li>first li</li>
<li>second li</li>
<li>third li</li>
</ul>
<script type="text/javascript">
console.dirxml(document.getElementById('list'));
</script>
</body>
</html>
运行结果:
6.判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真。如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常:
命令 | 用途 |
---|---|
console.assert() | 判断是否为真 |
<script type="text/javascript">
var result = 1;
console.assert(result);
var year = 2016;
console.assert(year == 2017);
</script>
运行结果:第一个判断为真不提示,第二个判断为假,控制台显示错误信息
7.追踪函数的调用轨迹
console.trace()用来追踪函数的调用轨迹:
命令 | 用途 |
---|---|
console.trace() | 追踪函数的调用轨迹 |
<script type="text/javascript">
function add(a,b){
console.trace();
return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
</script>
运行结果:
8.计时功能
console.time()和console.timeEnd(),用来显示代码的运行时间:
命令 | 用途 |
---|---|
console.time() | 开始计时 |
console.timeEnd() | 结束计时 |
<script type="text/javascript">
console.time('用时');
for(var i = 0;i<10000;i++){
for(var j = 0;j<10000;j++){}
}
console.timeEnd('用时');
</script>
运行结果:
9.性能分析
性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile():
命令 | 用途 |
---|---|
console.profile() | 开始分析程序运行时间 |
console.profileEnd() | 结束分析程序运行时间 |
chrome:
<script type="text/javascript">
function doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
doSubTaskB(10000);
doSubTaskC(1000,10000);
}
function doSubTaskA(count){
for(var i=0;i<count;i++){}
}
function doSubTaskB(count){
for(var i=0;i<count;i++){}
}
function doSubTaskC(countX,countY){
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
}
}
console.profile('性能分析器');
doTask();
console.profileEnd('性能分析器');
</script>
运行结果:
chrome中要点到Profiles中查看
Firefox:
<script type="text/javascript">
function doTask(){
doSubTaskA(1000);
doSubTaskA(100000);
doSubTaskB(10000);
doSubTaskC(1000,10000);
}
function doSubTaskA(count){
for(var i=0;i<count;i++){}
}
function doSubTaskB(count){
for(var i=0;i<count;i++){}
}
function doSubTaskC(countX,countY){
for(var i=0;i<countX;i++){
for(var j=0;j<countY;j++){}
}
}
console.profile('性能分析器');
doTask();
alert(1111);//必须加才能看到,具体原因未知
console.profileEnd('性能分析器');
</script>
运行结果:
Firefox必须在代码中添加alert才能查看到
10.查看数组的信息
命令 | 用途 |
---|---|
console.table() | 查看数组信息 |
<script type="text/javascript">
var arr = [
{name:'David',age:18,gender:'male'},
{name:'Daisy',age:25,gender:'female'},
{name:'Jack',age:28,gender:'male'},
{name:'Melody',age:26,gender:'female'},
{name:'Lisa',age:18,gender:'female'}
]
console.table(arr)
</script>
运行结果:
炫酷的console.log
var e=["\n %c %c %c Pixi.js - ✰ ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ \n\n","background: #ff66a5; padding:5px 0;","background: #ff66a5; padding:5px 0;","color: #ff66a5; background: #030307; padding:5px 0;","background: #ff66a5; padding:5px 0;","background: #ffc3dc; padding:5px 0;","background: #ff66a5; padding:5px 0;","color: #ff2424; background: #fff; padding:5px 0;","color: #ff2424; background: #fff; padding:5px 0;","color: #ff2424; background: #fff; padding:5px 0;"];window.console.log.apply(console,e)