1） Elements 元素
右侧Computed列出了当前DOM元素的盒模型图示，以及最终的CSS样式值，因为每个标签的样式属性可能定义在多个文件多个片段中。
右侧Event Listeners列出了当前选择的DOM节点上绑定的监听动作。
2）Console 控制台
在这里可以执行任意的Javascript代码来调试页面，可以调用页面中的Javascript函数操作DOM。
也可以在代码中使用下面列举的方法来记录调试日志和错误信息，这些信息是不会展示在页面上的，只有当打开控制台才可以看见。
常用的console的方法：
console.log() 基本记录
console.error() 显示错误消息
console.group() 和 console.groupEnd() 对消息进行分组显示
console.assert() 显示条件性错误消息
console.time() 和 console.timeEnd() 记录一段代码的时耗
console.clear() 清除控制台记录
console.count() 计数
console.table() 以表格形式展示数据
还有更多的方法不一而足，控制台使用时会有支持的函数自动完成提示。
一些公司前端开发团队会在控制台这里发布招聘信息以便寻求人才。
3）Sources 资源
这个栏目以树状结构列举出来当前页面加载的所以页面要素，包括HTML/CSS/Javascript以及图片资源。
可以查看当前页面加载的所有文件资源的源码，也可以在Javascript文件中设置断点方便调试。
4 ) Network 网络
此栏目会记录页面的所有的网络请求， 请看下图的标注说明：
可以看到，网络捕获功能十分强大，可以记录所有发出的请求的HTTP详情，可以按条件过滤需要特别关心的请求，可以定位加载时候有问题的资源， 可以看到时延的时间，可以看到HTTP数据包的详细内容。
5 ) Performance 性能
分析运行时性能，这个属于比较高级的功能，如果Javascript出现卡顿，视差滚动，页面不够流畅时可以使用这个功能，分析器可以在函数级别上找到开销大的代码，建议在匿名模式下去分析，这样可以避免安装的插件带来的外部影响。这里列举出Google官方给出的建议：
*）不要编写会强制浏览器重新计算布局的 JavaScript。将读取和写入功能分开，并首先执行读取。
*）不要使您的 CSS 过于复杂。减少使用 CSS 并保持 CSS 选择器简洁。
*）尽可能地避免布局。选择根本不会触发布局的 CSS。
*）绘制比任何其他渲染活动花费的时间都要多。请留意绘制瓶颈。
6）Applications 应用
这个栏目可以查看Manifest，离线缓存等信息，可以浏览和修改Cookie信息。
综上所述，Chrome开发者工具的功能非常强大，本文只是浅显的做了介绍，还有更多更专业的功能需要读者发现和使用，掌握好这个工具，程序的开发调试工作便如虎添翼，简化工作复杂度，提高工作效率！