介绍
注意：chrome开发者工具介绍，已当前版本 24.0.1312.52 为参考。
如何打开开发者工具
打开设置(三条杠) > 工具 > 开发者工具；
也可以使用快捷键方式打开：
ctrl + shift + i 打开开发者工具；
ctrl + shift + j 打开开发者工具并定位到javascrit控制台；
初步了解开发者工具
如何设置开发者工具
设置共分为：General、Overrides、Shortcuts三个tag。根据实际需求可以做相应设置。
Elements
在元素面板中，可以看到整个页面的DOM树结构和每个元素的所有属性，同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。
功能包括：
DOM Elements Tree、CSS Styles、Box Model、Properties、DOM Breakpoints、Event Listeners
Resources
在资源面板中，可以看到从网络上下载的所有资源。
Network
在网络面板中，可以看到所有网络请求信息。
包括：Request timeline、Request details
Sources
在源码面板中，可以调试JavaScript代码；
包括：断点调试，处理异常。
Timeline
在时间轴面板中，共分为对Events、Frames、Memory三项耗时监测，为网页及网络应用程序做了一个详细的性能分析告诉开发者载入页面的时间究竟花在哪些地方。从加载资源到解析JavaScript脚本、计算样式表及页面渲染的所有步骤，开发者都可以在这里看到它们消耗的时间和内存。
Events
Frames
Memory
Profiles
在分析面板中，有CPU分析器，CSS分析器，和堆分析器组成，这个功能可以开发者分析时间花费在哪里，帮助开发者优化代码。
CPU分析器
CSS分析器
Heap(堆)分析器
Audits
在审计面板中，可以帮助开发者检查网络利用率和网页性能。
Console
在控制台面板中，可以帮助开发者检查DOM，调试JavaScript或HTML解析错误分析。
控制台还有很多实用的工具，希望大家在实践过程继续发现。