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

console命令

2016-11-08 19:13 39 查看

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
相关文章推荐
新的分享
章节导航