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