谷歌开发者工具的使用解读
1、 独立窗口
2、 Elements
查看、编辑页面上的元素，包括html和css
实用场景1：查看推广代码
实用场景2：查看元素的属性，如nofollow
实用场景3：ctrl+f，在搜索框中写元素的xpath路径，如果elements元素行被选中表示路径写的正确，如下例子定位post sourcing request按钮位置：
3、 Network
分析网站的网络请求情况
双击文件查看详细页具体信息（如请求的ip地址，url，方法，请求结果的状态码）
实用场景：如发布RFQ页面，上传附件，一直处于缓冲状态此时可以通过network查看请求情况，如有问题可以点击initiator进入具体代码页面，对于测试可以定位文件/方法错误可以快速帮助开发解决问题
4、 Sources
查看运行的脚本，一般都在sources调试代码
脚本代码编号上，鼠标点击添加断点，刷新网页，程序运行到断点可以看到调试结果
5、 Timeline
指JS执行时间，页面元素渲染时间，点击页面底部的record开始录制执行的内容
6、 Profiles
主要做性能优化，查看cpu执行时间与内存占用
7、 Resources
查看请求加载到的资源情况，如CSS、JS、Cookies、Session Storage
8、 Audits
优化前端页面，加速网页加载速度；选择条件点击run，开始分析页面得出分析结果
9、 Console
就是指javascript控制台
a、主要查看报错信息
点击红字报错后面的文件，定位代码
b、API查看函数和方法
c、编写脚本
原文：http://www.cnblogs.com/xin-haiyang/p/3963064.html