Chrome开发者工具介绍 ： 基础篇
Chrome浏览器一款Web开发的利器，具有不易崩溃、速度快、安全等诸多优点得到广大用户的一直好评，一经推出迅速占领市场，作为Web开发者我们更应该了解它强大的功能。
下面列举出一些常用技巧，帮助大家提高效率：
1.打开控制面板（通过右键->审查元素或F12快捷键)
2.编辑HTML元素
选取百度为例：
在 Elements 下的元素编辑器中选择一个Dom元素
双击选中的Dom元素，然后进行编辑，回车确认后页面会有相应的改变
ps: 在元素中进行查找用 Ctrl + F 输入关键字
3.展开所有节点
同上在Elements中，选中一个子节点的元素，按下 ALT + 鼠标点击该元素，会自动展开所有的子节点
4.快速查找与定位
快速查找：输入Ctrl + o 快速查询你要打开的Js文件，然会回车确认，如下图我输入a.js，控制台就会帮我查到与其相关的
快速定位：打开一个js文件，Ctrl +o 后输入 ：行号 （如：19），会准确的定位到具体的行
5.变换开发工具的位置
鼠标点击下图中右上角的图标或用快捷键 Ctrl+shift+D来切换开发工具显示的位置（浮动，右侧，底部），如下图：
6.触发伪类
选中一个元素，右键->Force Element State 或 点击下图中右上角图标（Toggle Element State图标）
7.使用$0获得选中元素
在Console标签下输入 $0 获得当前选中的元素
同时选中输出中一行元素，右键 选择Reveal in Elements Panel，定位到相关元素位置
8.查看事件监听器
选择Elements面板
右侧面板选择Event Listeners 导航，然后选择一个事件
对事件鼠标右键选择Show Function Definition，可定位到事件的函数定义
9.复制请求内容
选择Network面板，选中一个文件，右键会有 Copy request header , Copy response headers，Copy response等等
