js调试命令console全解析(javascript调试之console.table()的详细内容)

js调试命令console全解析

nsole 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式是不一样的，但这里会介绍一些大都会提供的接口特性。
Console对象可以在任何全局对象中访问，如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。

它被浏览器定义为 Window.Console，也可被简单的 Console 调用。

最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log(),几乎没有见过Console的其他用法，难道Console真的没有别的用法了？查了一下后发现Console还是非常强大的，至于为什么很少看到有人用可能是因为用过都删掉了吧。在此记录一下Console的其他用法。

注意：因为Console 对象提供对浏览器控制台的接入 所以在不同浏览器中的支持及表现形式可能不太一样，但是调试内容只有我们开发者会看，所以保证开发环境能用这些方法就可以了，下面演示全部都为Chrome上面的效果。

分类输出

不同类别信息的输出

console.log('文字信息');

console.info('提示信息');

console.warn('警告信息');

console.error('错误信息');

分组输出

使用Console.group()和Console.groupEnd()包裹分组内容。

还可以使用Console.groupCollapsed()来代替Console.group()生成折叠的分组。

console.group('第一个组');
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupEnd();

console.group('第二个组');
console.log("2-1");
console.log("2-2");
console.log("2-3");
console.groupEnd();

Console.group()还可以嵌套使用

表格输出

使用console.table()可以将传入的对象，或数组以表格形式输出。适合排列整齐的元素

查看对象

使用Console.dir()显示一个对象的所有属性和方法
在Chrome中Console.dir()和Console.log()效果相同

查看节点

使用Console.dirxml()显示一个对象的所有属性和方法
在Chrome中Console.dirxml()和Console.log()效果相同

百度首页logo的节点信息

条件输出

利用console.assert(),可以进行条件输出。

• 当第一个参数或返回值为真时，不输出内容
• 当第一个参数或返回值为假时，输出后面的内容并抛出异常

计次输出

使用Console.count()输出内容和被调用的次数

追踪调用堆栈

使用Console.trace()来追踪函数被调用的过程，在复杂项目时调用过程非常多，用这个命令来帮你缕清。

计时功能

使用Console.time()和Console.timeEnd()包裹需要计时的代码片段，输出运行这段代码的事件。

• Console.time()中的参数作为计时器的标识，具有唯一性。
• Console.timeEnd()中的参数来结束此标识的计时器，并以毫秒为单位返回运行时间。
• 最多同时运行10000个计时器。

性能分析

使用Console.profile()和Console.profile()进行性能分析，查看代码各部分运行消耗的时间，但是我在Chrome自带的调试工具中并没有找到在哪里查看这两个方法生成的分析报告。应该需要其他的调试工具。

有趣的Console.log()

最后再来介绍一下强大的Console.log(),这个方法有很多的用法（其他输出方法的用法，如error()等，可以参照log()使用）。

一、提示输出

可以再输出的对象、变量前加上提示信息，增加辨识度

二、格式化输出

三、自定义样式

使用%c为打印内容定义样式,再输出信息前加上%c，后面写上标准的css样式，就可以为输出的信息添加样式了

总结

Console的用法很多，有些再调试过程中非常实用，可以节省很多时间。当然我知道debug还是用断点调试的方法比较好，但是小问题用“printf大法”也是很好用的。

(function () {
for(var i = 0; i < 3; i++){
console.count("运行次数：");
}
})()
追踪调用堆栈
使用Console.trace()来追踪函数被调用的过程，在复杂项目时调用过程非常多，用这个命令来帮你缕清。

javascript调试之console.table()的详细内容

昨天我了解到Chrome调试工具一个小巧的调试方法，在WDCC期间， Marcus Ross（@zahlenhelfer） 介绍了，chrome调试工具各种调试方法，这个只是其中一种，现在我来给大家秀下。

用CONSOLE.LOG()展示数组

想象下你构造了如下数组

console.log() 会这样展示数组

这样的展示形式对于开发很有用，但是我发现这样还要手动去点每个Object有些笨重。这时候我觉得console.table()有点意思。

用CONSOLE.TABLE()展示数组

现在我们用console.table()试试：

非常小巧有木有？

当然，console.table()更适合，扁平 列成表格式的数据，展现的更完美，否组你在 如果每个数组元素都是不同结构，你的表格很多格子都是 undefined。

用CONSOLE.TABLE() 展示object

console.table()另一个特性就是展示 object。

妥妥的。

CONSOLE.TABLE() 的过滤功能

如果你想限制console.table()显示某一列， 你可以在在参数中传入关键字列表 如下：

如果你想访问一个属性的话，一个参数就够了，

我曾经以为我已经了解了 Chrome 开发者工具绝大部分的功能，但是现在显然我错了！

以上就是javascript调试之console.table()的详细内容，更多请关注网站的其它相关文章！