Chrome 控制台实用指南( 二 )


 

Chrome 控制台实用指南

文章插图
 
 
console.count
除了条件输出的场景 , 还有常见的场景是计数 。
当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑 , 内置的console.count可以很地胜任这样的任务.
 
Chrome 控制台实用指南

文章插图
 
 
console.dir
将DOM结点以JAVAScript对象的形式输出到控制台 , 而console.log是直接将该DOM结点以DOM树的结构进行输出 , 与在元素审查时看到的结构是一致的 。不同的展现形式 , 同样的优雅 , 各种体位任君选择反正就是方便与体贴 。
console.dir(document.body);console.log(document.body);
 
Chrome 控制台实用指南

文章插图
 
 
console.time & console.timeEnd
输出一些调试信息是控制台最常用的功能 , 当然 , 它的功能远不止于此 。当做一些性能测试时 , 同样可以在这里很方便地进行 。比如需要考量一段代码执行的耗时情况时 , 可以用console.time与 console.timeEnd来做此事 。
console.time("Array耗时");var array= new Array(10000000);for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object();};console.timeEnd("Array耗时");
 
Chrome 控制台实用指南

文章插图
 
 
当想要查看CPU使用相关的信息时 , 可以使用console.profile配合 console.profileEnd来完成这个需求 。
这一功能可以通过UI界面来完成 , Chrome 开发者工具里面有个tab便是Profile 。使用方法和console.time基本一样 , 其实time开发者工具里也有个tab就是timeline 。关于console.prefile博主就不做多余的介绍了 。想要做更多了解的读者可以看这里 。
$
讲真 , 米国程序员们真的很喜欢money啊(谁又不是呢) , 看看php就知道了 , 满屏的$ 。而在Chrome的控制台里 , $用处同样是蛮多且方便的 。
2+2


推荐阅读