我的浏览器版本为51.0.2704.106 (64-bit) osx系统 (mac) 。
1. Element
可以查看元素的css样式，并可实时编辑修改。
处理hover状态下的css
查看css3动画效果，并可视化调整塞贝尔曲线的值
快速查看dom是是否定义了事件，并点击快速跳转到事件定义的js代码中
2. Network
通过网络，你可以方便的查看所有资源的加载情况，以及内容。
经常用来查看ajax的请求过程，包括你发送的参数、请求头等等，以及由服务器返回的结果。勾选Disable cache来禁用缓存，这样儿就不用每次还得手动来清缓存了。
通过筛选功能可以只查看你关注的内容
选定你想查看的文件，右键选择Open in Sources Panel 可以切换到源码面板。 在源码面板里，ctrl+f 查找、断点、格式化，来协助查看代码或定位问题。
3. Sources
断点，在Sources面板内，通过点击行号，定义断点。在调试代码的时候经常会通过console.log()来确定问题。断点可以代替console.log()，点击行号，可以打一个断点，重新刷新页面，页面运行到断点处会中止，这时候，通过鼠划过或选中某个变量或表达式，可以查看它的值。以此来判断问题的原因。
所有你打的断点，会显示在右侧的面板里，方便你取消或查看。
点击左下的{}按钮，可以格式化你的代码，对于查看压缩文件非常有用。在sources可以通过 ctrl+f 来进行查找，还可以使用正则，非常的方便。
通过筛选功能可以只查看你关注的内容
Resources
在资源里面，你可以方便的查看cookies, 以及local Storage。并可随时进行编辑。
查看cookies
console
勾选Preserve log可以使你的日志不会因为页面的刷新而消失。在这里面可以进行代码片断调试，以及一些报错都会体现在这里，这个应该是用得最多的，就不再多说了。
chrome实用功能还有很多很多（比如对移动端的调式），欢迎讨论，你觉得最实用的功能。
