Google Chrome 共提供了8大组工具：
- Elements：可以看到chrome渲染页面所需要的HTML、CSS和DOM对象。也可以编辑这些内容更改页面显示效果。
- Network：可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。另外，还可以查看HTTP请求头，返回内容等。
- Sources：主要用来调试JS。
- TimeLine：提供加载页面时花费时间的完整分析。所有事件，从下载资源到处理JavaScript,计算CSS样式等花费的时间都展示在TimeLine中；
- Profiles(‘简况，轮廓’)：分析web应用或者页面的执行时间以及内存使用情况。
- Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
- Audits（‘审计’）: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
- Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
此外，开发者工具还提供了Emulation（‘仿真’）功能，做移动开发时特别有用。
打开控制面板（右键->审查元素或F12快捷键）
- 编辑HTML元素
以百度为例：
elements.png
在 Elements 下的元素编辑器中选择一个Dom元素
双击选中的Dom元素，然后进行编辑，回车确认后页面会有相应的改变
ps: 在元素中进行查找用 Ctrl + F 输入关键字
- 展开所有节点
同上在Elements中，选中一个子节点的元素，按下 ALT + 鼠标点击该元素，会自动展开所有的子节点
- 快速查找与定位
快速查找：输入Ctrl + o 快速查询你要打开的Js文件，然会回车确认，如下图我输入a.js，控制台就会帮我查到与其相关的
ctrl+o.png
快速定位：打开一个js文件，Ctrl +o 后输入 ：行号 （如：19），会准确的定位到具体的行
Js_ctrl+o会准确的定位到具体的行.png
- 变换开发工具的位置
鼠标点击下图中右上角的图标或用快捷键 Ctrl+shift+D来切换开发工具显示的位置（浮动，右侧，底部），如下图：
切换开发工具显示的位置.png
- 触发伪类
选中一个元素，右键->Force Element State 或 点击下图中右上角图标（Toggle Element State图标）
触发伪类.png
- 使用$0获得选中元素
在Console标签下输入 $0 获得当前选中的元素
$0.png
同时选中输出中一行元素，右键 选择Reveal in Elements Panel，定位到相关元素位置
查看事件监听器
选择Elements面板
右侧面板选择Event Listeners 导航，然后选择一个事件
对事件鼠标右键选择Show Function Definition，可定位到事件的函数定义-
复制请求内容
选择Network面板，选中一个文件，右键会有 Copy request header , Copy response headers，Copy response等等
