Chrome调试工具简单介绍

做为前端开发者都知道，快捷键F12能够打开chrome调试工具。firefox能够打开firebug工具。“工欲善其事，必先利其器”，对调试工具的掌握，能大大提升咱们调试代码的效率。由于我日常chrome用的多，这里就大概介绍下chrome调试工具在windows下的使用，firefox的话就暂时不作介绍。

 

快捷键

ctrl+o 在Sources面板中打开一个文件(JS,CSS)
ctrl+p 同ctrl+o
ctrl+f  查找当前文件中的关键字
ctrl+shift+f 全局查找关键字
ctrl+shift+e 在控制台运行当前选中的代码片断，这个方法能够用来在控制台中打印出变量或方法的返回值。
ctrl+shift+o 跳转到指定的方法

 

Elements面板

Elements面板是控制DOM结构和CSS样式的。

位置1：点击后选择页面中的任何元素，就会选中相应的DOM节点

位置2：Toggle Device Mode切换设备模式，能够模拟该页面在各类移动端设备的显示状况。

位置3：Edit as HTML,选中某段html代码后能够直接编辑这段html代码。能够直接拖放节点，自由调整位置。也能够拖拽节点到编辑器。

位置4：Delete 直接删除该节点。

位置5：Event Listeners能够查看该元素所绑定的事件。

位置6："Computed"面板里，点击样式前面的放大镜图标，就能够直接定位到具体的样式。当样式层级较深，继承较多时，对调试页面的样式颇有帮助。

 

Network面板

Network面板是查看网络请求信息的。

位置1：filter过滤器，可在输入框中输入关键字搜索对应请求的文件。

位置2：请求文件的列表里进行了分类，我的经常使用的是查看XHR的分类，查看Ajax请求。

位置3：设置网络的通讯方式。默认"No thirotting"不节流。这里能够设置断网模式，或者模拟3G，4G网络等状况下页面加载的速度。网速能够在"settings"里面设置。

位置4：列表里能够查看每一个xhr的消耗时间。若是time超出200ms,须要考虑优化接口。 

位置5：面板最底部能够查看请求的总个数,DomContentLoaded的时间，页面load的时间。

 

Sources面板

sources面板是调试中最经常使用的地方。

位置1：查看页面中加载的资源文件

位置2：若是浏览器装了插件，插件所须要的JS文件会在这里显示

位置3：使用ctrl+p/ctrl+o 打开某个文件

位置4：断点的操做

位置5：查看异步请求时所设置的定时器

位置6：点击右边的加号，能够增长监听的变量。不过鼠标放到JS文件中的变量时也会显示对应的值。

位置7：设置各类不一样的断点。

　　当勾选XHR Breakpoints里的any XHR时，页面中触发Ajax请求时都会中断。

　　当勾选"Event listener breakpoint" 下的 Mouse（鼠标）下的 Click （单击）事件时，触发某个按钮的点击事件就会中断。

位置8：通常线上的代码都是打包后的代码，不利于调试。点击{}后格式化该文件。

 

 

Timeline面板

 Timeline面板是查看动态流的。在这里能够测试页面的性能问题。好比页面的渲染速度，动画的流畅度等。

位置1：点击这个按钮开始Record，按钮变成红色，再次点击中止记录。

位置2：选择记录生成的图表模式

位置3：须要记录的类型

位置4：fps指每秒的帧数，这个能够衡量页面的渲染速度。若是低于60fps，则页面可能须要优化下了。若是低于30fps，则页面的卡顿现象会比较严重。

位置5：记录期间页面加载的比重。看哪一个范围的值特别大，占用时间最长，而后有针对性的优化。 

 

Profiles面板

这个使用较少，先暂时不作介绍。

 

Resources面板

resources面板展现各类资源文件，包括本地存储，session,cookies,cache等信息

 

Console面板

console控制台输出信息，console的方法有不少种，包括console.log(),console.info(),console.error(),console.table()等。

 

Settings 选项

勾选下面这个选项后就会在控制台中打印出全部的Ajax请求地址。

 

参考资料：

http://get.ftqq.com/5982.get

http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool/