多了解一些chrome开发者工具调试技巧/功能对于平时开发很与帮助， 在实际项目中多使用这些功能，提升自己的工作效率。下面我们来看chrome开发者工 具面板功能

1.标签页（Elements） 

1）根据标签页的html内容找到对应元素 
2）根据页面元素找到标签页的html 
3）在标签页右侧查看style 
4）查找 

注释： 支持ctrl+z恢复操作。

2. 控制台（Console） 
1、 控制台非常有用， 对于javascript提供的API或者API的功能不是非常熟悉。 这个时候命令行就 成为我们试验最好的地方。 如，我们想查看document下面有哪些函数，我们就可以在命令行中输入，然后选中并尝试。 对于jquery等开源框架的学 习，这种方式也非常高效，学代码还是得跑起来才行。

3.源码Source（来源） 

1）快速查找Ctrl+P（模糊搜索） 

5）代码出错定位，在IDE中有些错误是检查不出来的（特别是跟浏览器有关的部分）  

4.网络（NETwork） 
可以查看页面所有资源的响应情况，包括响应时间，浏览器等待时间，状态码，资源大小等。 是一个很重要也比较复杂的面板。 
资料太多：starof网络面板

5.时间轴（Timeline） 
timeline工具栏可以详细检测出Web应用在加载过程中，时间花费情况的概览。 这些应用包括下载资源，处理DOM事件, 页面布局渲染或者向屏幕绘制元素。 也是一个很重要且比较复杂的面板。 
资料太多：starof“Timeline工具栏”

6.性能（profiles） 
这个控制面板允许我们查看函数运行时CPU占用程度，还有堆栈申请的内存占有率。 这能够帮助我们优化代码，查看代码性能（内存还能查看闭包泄露等）。 

7.资源（resources） 
Resources工具显示全部资源，跟Sources不同的是，Resources中资源是按文档类型分类的。 并且在Resources中可用查看，增加，删除，修改页面的html5 local storage，session storage,cookie等。

8.安全

9.监察