介绍 chrome 开发者工具的功能区

Google Chrome 共提供了8大组工具：

1. Elements：可以看到chrome渲染页面所需要的HTML、CSS和DOM对象。也可以编辑这些内容更改页面显示效果。

2. Network：可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。另外，还可以查看HTTP请求头，返回内容等。
3. Sources：主要用来调试JS。
4. TimeLine：提供加载页面时花费时间的完整分析。所有事件，从下载资源到处理JavaScript,计算CSS样式等花费的时间都展示在TimeLine中；
5. Profiles(‘简况，轮廓’)：分析web应用或者页面的执行时间以及内存使用情况。
6. Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
7. Audits（‘审计’）: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
8. 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等等

  
  

12345