Chrome开发者模式及debug mode的使用

开发者模式

• 右键–审查元素
• 快捷键：
  • windows7: f12
  • windows10: fn+f12
  • mac: fn+f12

分模块学习

1.Elements

• 在Element中主要分两块大的部分
  (1) HTML结构面板
  (2) 操作dom样式、结构、时间的显示面板

• 查看伪类样式,比如：hover

• $(selector)的用法

  • $0、$1、$2、$3 和 $4 命令用作在 Elements 面板中检查的最后五个 DOM 元素。$0 返回最近一次选择的元素，$1 返回仅在最近一次之前选择的元素或对象，依此类推。
  • $ ==> document.querySelector and $$ ==> document.querySelectorAll
  • $_ 返回最近评估的表达式的值。

  了解更多请参考：command line api

2.Console

这个除了查看错误信息、打印调试信息、写一些测试脚本以外，还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行。

[点击查看图片](http://www.cr173.com/up/2012-9/2012091013365076964.png)

3.Sources

• 说明
  Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。
• 命令断点调试(很重要)

4.Network

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。

• Network是一个监控当前网页所有的http请求的面版，它主体部分展示的是每个http请求，每个字段表示着该请求的不同属性和状态 。

  点击查看图片

  • Name：请求文件名称
  • Method：方法（常见的是get post）
  • Status：请求完成的状态
  • Type：请求的类型
  • Initiator：请求源也就是说该链接通过什么发送
  • Size：下载文件或者请求占的资源大小
  • Time：请求或下载的时间
  • Timeline：该链接在发送过程中的时间状态轴（我们可以把鼠标移动到这些红红绿绿的时间轴上，对应的会有它的详细信息：开始下载时间，等待加载时间，自身下载耗时）。

• 单击面板中的任意一条http信息，会在底部弹出一个新的面板，其中记录了该条http请求的详细参数。

  点击查看图片

  • Headers（表头信息、返回信息、请求基本状态）
  • Preview（返回的格式化转移后文本信息）
  • response（转移之前的原始信息）
  • Cookies（该请求带的cookies）
  • Timing（请求时间变化）