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

posted @ 2014-09-25 21:03  随心追梦  阅读(4816)  评论(3编辑  收藏  举报