了不起的CHROME DEV TOOLS

转自 http:///?p=919

较早接触前端的人可能最开始使用的都是Firebug调试工具，不过后来由于Chrome的强势逆袭以及移动端开发的兴起，大部分开发者开始转战使用Chrome自带的开发者工具(F12或Ctrl+Shift+I)，本文接下来就会介绍一些你平常开发中也许没有注意到的关于Chrome Dev Tools的奇技淫巧。

刚才说了通过Ctrl+Shift+I可以打开开发者工具，但是你知道吗？在开发者工具中继续按Ctrl+Shift+I还可以继续打开开发者工具的开发者工具，所以实际上这个开发者工具也是通过Web来构建的。DevTools能给我们带来什么

通过开发者工具可以检查、调试以及优化你的应用程序，让你的程序运行地更加顺畅，如果你可以很好地使用它，甚至可以把开发者工具变成一个所见即所得的编辑器，同时，作为一个优秀的前端工程师，娴熟地使用开发者工具必定会为你的工作提供一臂之力。

说了这么多，我们究竟能用开发者工具做什么呢？下面分别按照开发者工具的几个面板一一介绍大家平常不怎么注意到的一些诀窍。

强大的console

大家最常用的应该就是console.log了，但是console还有很多其它的方法如

console.warn(''warningtext'');//警告提示console.info(''infotext'');//信息提示console.error(''errortext'');//错误提示console.dir(document.body);//显示对象的所有属性和方法console.dirxml(document.body);//用XML的表达方式打印指定对象console.assert(false, ''text'');//当第一个参数为false时打印错误信息console.table([{name: ''Adam'', age: ''10''}, {name: ''Eric'', age: ''20''}]);//将数组格式化输出console.group(''分组'');console.log(''something'');console.groupEnd(''分组'');

console.log还可以使用字符串替换以及格式化输出，这个经常能在一些网站上看到在控制台中打印招聘广告，那是怎么做到的呢？

其实很简单就可以实现了：

console.log(''I''m %s, I''m %d years %cold.'', ''Adam Lu'', 10, ''color: red'');//I''m Adam Lu, I''m 10 years old.

如果你想看你某段代码运行的时间，可以使用console.time和console.timeEnd，

console.time(''Array initialize'');var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object;};console.timeEnd(''Array initialize'');

控制台还有一些额外的命令，例如，你可以在里面运行一些JavaScript表达式，操作当前页面的DOM，监听当前页面的事件等。使用$0-$4可以选择最近的5个DOM元素或JavaScript对象，使用$(选择器)可以选择元素，等价于document.querySelector以及$$(选择器)等价于document.querySelectorAll，$x(xpath)命令可以执行一个xpath查询，如$x(‘//img’);会找出页面中所有的图片，你也可以右键点击元素选择“在Elements面板显示”看对应的DOM，也可以通过inspect命令切换到审查元素模式

$_可以访问最近的控制台结果，清除控制台可以使用clear或console.clear命令。当你访问新页面时如果不想清除控制台的信息可以点击右键，选择“Preserve Log upon Navigation”

console.profile和console.profileEnd可以检测JavaScript占用的CPU信息

在控制台中有用的快捷键有：Ctrl+L 清除控制台Shift+Enter 多行输入

Elements面板

Elements面板让你可以看到DOM树中所有的东西，并可以让你实时编辑DOM树，平常大家用的比较多，这里不多做介绍，有几个技巧如下。

移动元素

你可以直接拖拽元素来放置到DOM树中

删除元素

直接选择元素然后按delete键

滚动到视图内

想要把页面滚动到视图内，右键点击元素，选择”Scroll into View”

设置DOM断点

DOM断点和Source面板的断点类似，当指定的DOM属性、子元素发生变化时可以触发断点，在Elements面板的扩展面板里的DOM Breakpoints里可以看到设置断点的元素。

查看事件监听器

Elements面板的扩展面板里的Event Listeners里可以查看绑定在DOM节点的JavaScript事件监听器。

Style扩展面板

可以通过Ctrl+Click CSS属性来查看源代码的位置，还可以添加和触发伪类如鼠标滑过时的CSS。

在Elements中有用的快捷键有：

F2 以HTML格式来编辑切换Esc 停止修改DOMCtrl+Z 撤销上一个操作Up/Down CSS属性值增加1/-1Alt + Up/Down CSS属性值增加0.1/-0.1Shift+Up/Down CSS属性值增加10/-10Shift+PageUp/PageDown CSS属性值增加100/-100

(本文系作者个人观点，不代表一点资讯的观点和立场)