浏览器console命令

一、概述

作为一名前端开发人员，在调试中使用最多的就是console命令，通过console命令可以在控制台打印一些信息，这些信息便于我们进行开发调试。工欲善其事必先利其器，这篇文章主要来讲一讲console的神奇功能。

二、console是什么

我们平时总是在使用console，但是console到底是啥呢？下面我们就在控制台打印一下

通过打印的结果，很显然console是一个挂载在window上的对象。它是由构造函数console创建的，并且继承有Object的原型。这个对象上定义了好多的方法，我们日常在使用的时候都是通过方法的调用，来实现的功能。

三、console的具体功能

1.assert

这个词从字面意思上讲，可以翻译成“断言”。断言的意思就是，在程序运行之前，程序员断定这里应该是一个准确的值。那么此时使用console.assert就可以监控，此处的断言是否正确。

console.assert(obj.num==5,"obj.num is not 5");
//这个函数接收多个参数，第一个参数表示断言，后面参数表示断言如果错误，抛出的异常

【注意】：

1. 断言会抛出异常，会阻断js的执行
2. 断言抛出错误时，可以选择同时打印对象
3. 断言在判断真假性时会进行强制类型转换

实例：

所以在JavaScript程序的开发和维护过程中，Assert(断言)是一个很好的用于保证程序正确性的特性。

2.clear

这个很简单，见名知意，就是清除的意思。它不接受任何参数。实现的效果就是清空控制台的输出历史。

3.count/countReset

console.count() 在调用时会将数字（调用次数）写入到控制台。

console.count() 方法可以添加标签。

console.count("num");
console.count("num");

console.countReset("num");

• 使用时可以传入标签，对于不同的标签，是不同的计数器记录

• 如果不传入标签，默认使用default标签

• 使用countReset重置计数器，会重置指定标签的计数器，其他计数器不受影响

4.显示命令

console.log("normal");           // 用于输出普通信息
console.info("information");     // 用于输出提示性信息
console.error("error");          // 用于输出错误信息
console.warn("warn");            // 用于输出警示信息
console.debug("debug");       	// 用于输出调试信息

这是几种控制输出的console命令，可以点击图中红色方框信息，进行控制信息筛选显示。

5.dir、dirxml

dir将对象以树状结构展现 ，可以显示一个对象所有的属性和方法。最常用于显示选定Dom元素的各种属性。

dirxml显示某个Dom节点的html（xml）代码。

<div id="info">
    <p>asd1</p>
    <p>asd2</p>
    <p>asd3</p>
</div>

6.time/timeEnd/timeLog/timeStamp

用来显示代码的运行时间

console.time("控制台计时器");
for(var i = 0; i < 10000; i++){
    for(var j = 0; j < 10000; j++){}   
    console.timeLog("控制台计时器");
}
console.timeEnd("控制台计时器");

• time表示定时器启动
• timeEnd表示定时器结束
• timeLog表示打印当前语句对于定时器起始时间
• timeStamp该特性是非标准的，请尽量不要在生产环境中使用它！

7.profile/proileEnd

详细的信息在chrome控制台里的"JavaScript profile"选项里查看。主要是分析js代码函数运行时所耗费时间。

function All(){
   //具体代码
}
console.profile("性能分析器");
All();
console.profileEnd();

8.trace

一个函数的调用轨迹,那么可以将此方法写在函数内部即可。

function doTask(){
    doSubTask(1000,10000);
}
 
function doSubTask(countX,countY){
    for(var i=0;i<countX;i++){
        for(var j=0;j<countY;j++){} 
    }
    console.trace();
}
doTask();

9.group/groupEnd

在控制台以分组的方式打印数据

console.group("第一组信息");
    console.log("第一组第一条：我的博客");
    console.log("第一组第二条：CSDN");
console.groupEnd();

console.group("第二组信息");
    console.log("第二组第一条：程序爱好者QQ群");
    console.log("第二组第二条：欢迎你加入");
console.groupEnd();

10.table

将数组以表格显示方法

var mytable = [
    {
        name: "Alan",
        sex : "man",
        age : "27"
    },
    {
        name: "Wu",
        sex : "gril",
        age : "28"
    },
    {
        name: "Tao",
        sex : "man and gril",
        age : "29"
    }
]
console.table(mytable);