Chrome控制台函数

你是光你是电，你是唯一的神话。

Chrome的出现简直拯救了广大前端，不仅仅是因为其V8引擎的速度，更是因为其强大的控制台。为调试前端提供了强大的武器。

当然Firefox下的firebug也很强大，不过我写前端最早接触的就是Chrome，所以就基本上没怎么用过firebug。

我这里把一些Chrome控制台下一些经典的函数总结一下，帮助我们更好地调试页面。

console.table()

通过`console.table()`输出二维数据

console.table()是一个能将你的数据格式化输出的函数。想象一下平时查看二维数组的结构，是这样的：

var a=[[1,2,3],[4,5,6],[7,8,9]];

console.log(a);

很不直观，查看也很麻烦。

但是现在，如果你用console.table(),则可输出以下表格：

数据内容立马变得直观、清晰。

不仅是数组，它同样适用于对象：

var school = {

    hust: { name: "华中科技大学", rank: "9",students:"50000" },

    whu: { name: "武汉大学", rank: "7", students:"40000"}

};

console.table(school);

此处需要注意的是如果各对象中** 键名 **有不一样的，会在所有对象中均显示出来，但不存在该键的对象显示其值为 undefined 。

var school = {

    hust: { name: "华中科技大学", history: "61",students:"50000" },

    whu: { name: "武汉大学", rank: "7", students:"40000"}

};

console.table(school);

所以如果对象的键名差异很大，则会存在很多 undefined，则此处用 console.table() 不是很适合。

要注意的是，既然是表格，那就是二维的数据，console.table()无法用来展示一维数据，如果直接传入某一维的数据(对象、数组)，则会无输出。

var b=[1,2,3]

console.table(b)

其实对于一位数据，直接用 console.log() 就ok了，不需要用table()

如果某变量既有一维数据，又有二维数据，则一维数据会被忽略，只显示二维数据。

var c=[1,[2,3,4],5,5];

console.table(c);

指定输出某列或多列(嵌套在内层的键、数组下标)

var school = {

    hust: { name: "华中科技大学", rank: "9",students:"50000" },

    whu: { name: "武汉大学", rank: "7", students:"40000"}

};

console.table(school,'rank');

console.table(school,['rank','name']);

`$(selector)`和`$$(selector)`

你可能会想，这不是Jquery的选择器嘛？和控制台有什么关系？

其实Chrome原生支持类jQuery 选择器。

$(selector)返回满足条件的第一个DOM元素

$$(selector)返回满足条件的所有DOM元素

前面之所以说是类Jquery 选择器，是因为Chrome并没有引入Jquery，而是对于一些函数的封装。

实际上$(selector)是对原生JavaScriptdocument.querySelector()的封装

实际上$$(selector)是对原生JavaScriptdocument.querySelectorAll()的封装

copy()

通过此命令可以将在控制台获取到的内容(DOM对象，基本类型、引用类型等等，任何变量都可以)复制到剪贴板，然后可以到处粘贴了。

copy($('div'));

copy(school);

copy(b);

注意：该函数是控制台函数，不属于JS原生函数，所以只能在控制台调试时使用，无法在JS代码里使用

`console.time()`和`console.timeEnd()`

在统计某段代码执行耗时情况时，如果自己手写计时函数，不仅麻烦，还容易出错。

这里借助控制台函数console.time()和console.timeEnd()可以非常方便地完成这一工作。

console.time("Time is ");

for (var i = 1000000; i >= 0; i--) {

};

console.timeEnd("Time is ");

水平所限，难免挂一漏万。这里只是列出了一些平时用处比较大，且方便的函数。还有一些更为高阶的函数没有说，一来可以通过图形界面进行操作，更为方便，二来要讲清楚的话需要更多时间，所以这里暂且不提，以后有机会再说。

要了解更多，可以查看后面的链接。

Reference：

Command Line API Reference

Console API Reference