您的位置:首页 > Web前端 > JavaScript

console命令

qq_36207983 2016-11-08 19:13 34 查看

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>


运行结果:

标签:  javascript 调试 console