Javascript开发调试常用的console的大全

最近开发前端代码走了查了一圈，发现很多优秀的网页调试文章，在翻阅了相关的文章后，总结了一下，将所有console已知的我能查到的功能记录如下：

说明：本文调试的图文使用谷歌浏览器使用F12进行调试到的相关信息和操作，未使用其他浏览器进行分析，有不同点的朋友可以自行总结，本文说提供的例程只是用来说明使用的代码，由于原来代码较长没有发出来，大家只需要看看如何演示就可i使用，如果需要完整代码就留言吧。

目录

 一、消息输出类：(log,debug,error,info,trace,warn)

二、特殊格式输出:(table,assert,dir,dirxml,count)

三、其他功能类：(memory,clear,profile,profileEnd,group,groupCollapsed,groupEnd,time,timeEnd,timeStamp)

---

 一、消息输出类：

 1.1、log(message?: any, ...optionalParams: any[]): void;

 功能：我们用得最多的一项功能了下面只做了下演示代码：

var sanji_i = 0;
console.clear();//清屏一下
for (var i in nav_two_json){
    var erji_id =  nav_two_json[i];
    var neirong = "";
    for(var x in menuJson){
        if(menuJson[x]['pid'] == erji_id){
            neirong = $("li[id='"+erji_id+"'] dl").html();
            neirong = neirong+html3(menuJson[x]['name'],menuJson[x]['url'],menuJson[x]['id']);
            $("li[id='"+erji_id+"'] dl").html(neirong);
            nav_three_json[sanji_i] = menuJson[x]['id'];
            sanji_i++;
//关键我们看着边的输出由于这个代码有点大就节选部分menuJson的数组就不列出来
            console.log("三级导航", '二级PID=' +erji_id+' 三级ID='+x);            
        }
    }
}

得到结果如下图： 

1.2、debug(message?: any, ...optionalParams: any[]): void;

 功能：与log()功能一样 ，基本上没有区别 标签不同

1.3、error(message?: any, ...optionalParams: any[]): void;

 功能：与log函数类似用法一样但是输出来的是一个错误标签，在调试器上看到的是红色标签点开来可以看到详细信息包括堆栈内容和出错函数以及行号等等

1.4、info(message?: any, ...optionalParams: any[]): void;

功能：与log()功能一样 ，基本上没有区别 

1.5、trace(message?: any, ...optionalParams: any[]): void;

功能：打印一个某一变量在堆栈中使用情况，可以清楚知道该变量来自哪里。可以仔细看一下1.6图中的输出对比.。

1.6、warn(message?: any, ...optionalParams: any[]): void;

功能：与log()功能一样 ，不过输出来的是黄色图标，在分类不同消息时候很有用看下图比较比较清楚看到各指令输出的相同一不同

二、特殊格式输出:

2.1、table(...tabularData: any[]): void;

 功能：格式化数据输出用表格形式输出，这个方法是一个很好用的方法，可以输出数据也可以输出对象：

console.table(menuJson);

如图所示没有行列参数的：

 2.2、assert(condition?: boolean, message?: string, ...data: any[]): void;

 功能：(断言输出)根据你所设定的条件，如果条件不满足要求就会按你的格式输出相关信息，而且输出信息带红色标签，可以用来检查错误，需要注意的是这个函数是逻辑错误时候输出。下面发个演示代码看看如何使用：

var sanji_i = 0;
console.clear();//清屏一下
for (var i in nav_two_json){
    var erji_id =  nav_two_json[i];
    var neirong = "";
    for(var x in menuJson){
        if(menuJson[x]['pid'] == erji_id){
            neirong = $("li[id='"+erji_id+"'] dl").html();
            neirong = neirong+html3(menuJson[x]['name'],menuJson[x]['url'],menuJson[x]['id']);
            $("li[id='"+erji_id+"'] dl").html(neirong);
            nav_three_json[sanji_i] = menuJson[x]['id'];
            sanji_i++;
            //关键我们看着边的输出由于这个代码有点大就节选部分menuJson的数组就不列出来
            console.assert(erji_id == "1.1.1",  "错误的Pid非1.1.1值为:" + erji_id)
        }
    }
}
console.log(nav_three_json);
console.clear();

 运行结果如下：

这个判断输出可以很方便的让你直接在Console那边点开后定位该代码的来源 

2.3、dir(value?: any, ...optionalParams: any[]): void;

功能：可以输出DOM 对象的相关属性，和我们调试时候看到DOM属性框的信息类似，对于调试html对象有极大的好处。如下图所示：

 2.4、dirxml(value: any): void;

功能： 与log类似，但是如果输出对象是xml表示的对象可以给出类似于jsion数据方式输出可以看到如下图所示的属性界面

  点开后如下图所示可以看相关DOM的信息：

 2.5、count(label?: string): void;

功能：经过输出本行输出次数，对于性能和循环代码检查起了辅助作用，如下例子代码： 

console.clear();//清屏一下
for (var i in nav_two_json){
    var erji_id =  nav_two_json[i];
    var neirong = "";
    for(var x in menuJson){
        if(menuJson[x]['pid'] == erji_id){
            neirong = $("li[id='"+erji_id+"'] dl").html();
            neirong = neirong+html3(menuJson[x]['name'],menuJson[x]['url'],menuJson[x]['id']);
            $("li[id='"+erji_id+"'] dl").html(neirong);
            nav_three_json[sanji_i] = menuJson[x]['id'];
            sanji_i++;
            //关键我们看着边的输出由于这个代码有点大就节选部分menuJson的数组就不列出来
            console.count("Pid="+erji_id)
        }
    }
}

在循环体下一行下个断点得到的输出如图可以清楚看出： 

 这个也是我们调试的一大便利工具。   

三、其他功能类：

3.1、 memory: 

本函数可以进行内存分析，下个断点，鼠标点中console.memory这行代码输出相关的内存使用，情况如图所示 ：

有需要进行内存分析的人员可以点开 [[Prototype]]: MemoryInfo选项有更加详细的分析，谷歌浏览器提供了很详细的列举

3.2、clear(): 

功能：就是清理一下输出信息，为了被以前数据干扰了，或看花眼了，没有难度就不展开了。

3.3、profile(reportName?: string): void;

功能：JavaScript CPU性能分析与 profileEnd函数联用本函数是分析开始标签，自己可以定义标记的字串，字串在性能分析面板上显示。

3.4、profileEnd(reportName?: string): void;

功能：与profile配对使用用来分析性能的标记结束的 。 

3.5、group(groupTitle?: string, ...optionalParams: any[]): void;

 功能：为后续的log函数调用创建单独自定义命名一个日志组，便于分类让日志更容易分类原来与groupEnd配对使用，在这对函数区间，log函数输出都会自动被分成一组，直接就是展开状态可以查看。如图所示看的出：group，groupCollapsed和groupEnd三个函数的用法不同以及结果。

3.6、groupCollapsed(groupTitle?: string, ...optionalParams: any[]): void;

 功能：为后续的log函数调用创建单独自定义命名一个日志组，在这对函数区间，log函数输出都会自动被分成一组，在面板中会出现一个命名倒三角形的标签可以供点开使用与group的区别是本函数需要点开才能看详细内容其他基本相同。

3.7、groupEnd(): void;

 功能：与函数groupCollapsed和group配对使用函数，用来结束日志输出的分组状态。

注意：没有调用本函数再进行分组会建立子分组的情形。

3.8、time(label?: string): void;

 功能：一个计时器的开始标签，可以自定义计时器的名字与timeEnd配对使用详细使用请看下个函数中的代码和运行结果图

3.9、timeEnd(label?: string): void;

功能：一个计时器的结束标签与time配对使用，可以自定义计时器的名字与time定义标签一样时候输出时间信息，这个函数调用时候，控制台就输出相应的时间信息如下代码：

console.time('三级导航');
for (var i in nav_two_json){
    var erji_id =  nav_two_json[i];
    var neirong = "";
    for(var x in menuJson){
        if(menuJson[x]['pid'] == erji_id){
            neirong = $("li[id='"+erji_id+"'] dl").html();
            neirong = neirong+html3(menuJson[x]['name'],menuJson[x]['url'],menuJson[x]['id']);
            $("li[id='"+erji_id+"'] dl").html(neirong);
            nav_three_json[sanji_i] = menuJson[x]['id'];
            sanji_i++;
//关键我们看着边的输出由于这个代码有点大就节选部分menuJson的数组就不列出来                       
        }
    }
}
console.timeEnd('三级导航');

 得到的结果如下图所示：

3.10、timeStamp(label?: string): void;

功能：添加一个事件到时间表，在时间轴上显示定义的标签 

总结：JavaScript中的console系列的函数是常用的，在谷歌浏览器部分的功能已被取消了，通过上文对比我们可以比较完整的使用console的功能了，那个朋友如果有交流可以留言。

对于有疑问的朋友也可以去以下地址看看我查询资料时候发现比较优秀的文章：

浅谈Google Chrome浏览器（操作篇）（上）https://www.cnblogs.com/wangjiming/p/6359000.html