了不起的Chrome Dev Tools

chrome
较早接触前端的人可能最开始使用的都是Firebug调试工具,不过后来由于Chrome的强势逆袭以及移动端开发的兴起,大部分开发者开始转战使用Chrome自带的开发者工具(F12或Ctrl+Shift+I),本文接下来就会介绍一些你平常开发中也许没有注意到的关于Chrome Dev Tools的奇技淫巧。
chrome
刚才说了通过Ctrl+Shift+I可以打开开发者工具,但是你知道吗?在开发者工具中继续按Ctrl+Shift+I还可以继续打开开发者工具的开发者工具,所以实际上这个开发者工具也是通过Web来构建的。
chrome

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('分组');

chrome

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

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

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命令切换到审查元素模式
revealinelementspanel
$_可以访问最近的控制台结果,清除控制台可以使用clear()或console.clear()命令。
当你访问新页面时如果不想清除控制台的信息可以点击右键,选择“Preserve Log upon Navigation”
preserve

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

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

Elements面板

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

移动元素

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

删除元素

直接选择元素然后按delete键

滚动到视图内

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

设置DOM断点

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

查看事件监听器

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

Style扩展面板

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

在Elements中有用的快捷键有:
F2 以HTML格式来编辑切换
Esc 停止修改DOM
Ctrl+Z 撤销上一个操作
Up/Down CSS属性值增加1/-1
Alt + Up/Down CSS属性值增加0.1/-0.1
Shift+Up/Down CSS属性值增加10/-10
Shift+PageUp/PageDown CSS属性值增加100/-100

Network面板

XHRs

你可以右击XHR请求选择“Replay XHR”来重新运行一个XHR请求,还可以点击preview来预览资源的内容,如果响应是json格式的话比较有用。

清除网络缓存或cookie

在Network面板右击选择“Clear Browser Cache/Network Cache”来清除缓存或cookie

导出瀑布流

在空白处右击,选择“Save as HAR with content”保存为一个HAR文件,然后可以在一些第三方工具网站如http://ericduran.github.io/chromeHAR/导入这个文件重现网络瀑布流情况。
chrome-har-viewer

查看WebSocket

在网络面板,还可以使用filters按钮来查看WebSocket消息结构
websocket

例如,打开http://www.websocket.org/echo.html,通过这个面板可以看到websocket的消息结构以及连接状况。
websocket-frame

在Network中有用的快捷键有:
Ctrl+F 根据关键词查找你想要的请求
chrome://net-internals/ 可以查看网络状况

Source面板

格式化JavaScript

选择你想要格式化的脚本文件,点击按钮pretty就可以了。

调试XHR

打开Source面板的debugger,在“XHR Breakpoints”下指定XHR的URL或URL部分,当发生XHR请求时会开启断点调试。

SourceMap

点击设置->通用里的“Enable javascript source maps”或“Enable css source maps”可以调试
JavaScipt源代码、CoffeeScript,甚至Sass,只需要在你的源码加入类似 //@ sourceMappingURL=/path/to/file.js.map 即可。
sourcemap

Workspace

想让本地的文件夹在Source面板下可以编辑,右键单击Source面板选择“Add Folder to Workspace”,之后就可以直接编辑该目录下的任何文件,把Chrome当做一个编辑器来用。
workspace

Snippets

有时你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的,都可以使用Snippets,你可以在Source面板里创建、存储和运行这些Snippets.
snippets

在Source中有用的快捷键有:
Ctrl+F 根据关键词查找你想要的请求
Ctrl+Shift+F 在所有加载的文件下查找
chrome://net-internals/ 可以查看网络状况

Timeline面板

Timeline有三种模式来观察记录:
* Events 根据事件分类显示所有记录的事件
* Frames 显示页面的渲染性能
* Memory 显示页面随时间的内存使用情况

布局是Chrome计算页面中所有元素的位置和尺寸的过程。一般来说,Chrome会“懒惰的”进行布局以响应你应用中的CSS和DOM更新,这允许Chrome批量处理样式和布局的变化而不是一次响应一个变化。然而,应用可以强制Chrome通过查询特定的布局独立元素属性(如element.offsetWidth)来立刻异步的实现布局。如果重复的太频繁或者对大型DOM树进行操作的话,这种所谓的“强制同步布局”是影响页面性能的一大瓶颈,当你的应用引起强制异步布局时,Timeline面板会识别出来并在旁边标记一个警告按钮(warning)。当你选中这条记录时,细节面板将会包含这段突兀代码的栈追踪信息。
timeline-trace

你还可以通过console.timeStamp()方法在Timeline记录中加入注释,这可以帮助你把你的代码和其它浏览器事件或活动联系起来。

在Timeline中有用的快捷键有:
Ctrl+E 开始/结束录制

Profile面板

Profile里面提供了三种类型,通过这三种分析可以查看内存泄露和占用情况。
* 收集JavaScript的CPU占用信息
* 获取堆的快照
* 录制堆的分配情况
profile
上面的Bottom UP视图列表通过对性能的影响列出了函数,它同时也允许你检查这些函数的调用路径。

在Profile中有用的快捷键有:
Ctrl+E 开始/结束录制

Resources面板

Resources可以让你检查应用的本地数据资源,包括indexedDB/WebSql DB,localStorage/sessionStorage,cookie以及AppCache,你还可以检查应用的视觉资源,包括图片、字体和样式等。
比如AppCache中,你可以检查Chrome已经缓存了当前文档的哪些资源以及AppCache的状态和浏览器连接情况。
appcache
图上缓存的资源包括以下属性:
* Resource – 资源的URL
* Type – 缓存资源的类型,可能是下面值的一种
* >Master – 这个资源的manifest属性表明这是它的缓存,这个资源也被加到了缓存中
* >Explicit – 这个资源被列在manifest文件中
* >Network – 这个资源被列在manifest文件中作为network访问
* >Fallback – 资源不可用时该资源被指定为fallback
* Size – 缓存资源的大小

其它

Drawer

通用里设置
drawer可以在控制台显示Drawer
或者按Esc可以显示或隐藏Drawer,
drawer

Drawer提供了一些适合移动调试的工具,可以模拟设备、模拟Touch事件以及GEO等相关信息。
drawer

Drawer里的History面板还会显示最近的修改记录,在source面板里选择“Local modifications”就会在history中显示
drawler-history

要想看浏览器的一些渲染特性,在Rendering面板可以勾选相应选项
drawer-rendering

设置

点击settings打开设置面板。
设置中有一个workspace选项,可以让你选择你的工作目录,之后就可以在Source面板中编辑,步骤如下:
workspace
还有一个Shortcuts选项包含了更多快捷键操作。

Dock

控制台右上角的按钮用于切换开发者工具在页面的位置是在右侧还是底部,长按会出现dock供选择新窗口打开。

其它设置中有用的快捷键有:
Esc 隐藏/显示Drawler
Ctrl+[/] 在不同面板间切换
? 打开设置面板
chrome://appcache-internals 看哪些页面有appcache以及他们的详细信息

结语

当然Chrome Dev Tools远不止这些,它还可以用来做android远程调试或NodeJs调试等,只要你去仔细探索,会发现它是多么地强大,一定会让你的开发效率大大提升。

参考资源

https://developers.google.com/chrome-developer-tools/
http://webzhao.github.io/sharing/slides.html?file=secrets-of-chrome-devtools
http://jankfree.org/
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html



无觅相关文章插件,快速提升流量

admin

  1. DevTool虽强大,但也有软肋,那就是在调试localstorage的时候,你会发现非常不方便。此时推荐你一款Chrome插件:HTML5 Localstorage Manager http://git.io/neaESw