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

打开 : option+cmd+j

常用的模块

谷歌开发者模式可以帮助开发者检查代码，提高开发效率，常用的板块有：Elements, Console, Source, Network, Application。对应浏览器引擎的这几大组成部分：UI界面，js解释器，渲染引擎，网络部分，数据存储。

1. Element

主要是样式调试，分成以下4个部分：

2. Console

控制台输出，js写的输出代码可以在这里看见，也可以在这里直接写js代码，这个板块主要为了在适当的时候加输出信息用来判断错误。

3. Sources

Sources功能面板是资源面板，分为五个部分，五部分不是独立的，他们互相关联，共同实现监控js在执行期的活动功能

4. Network

分析所有的网络活动，由五个窗格组成：

1. Controls： 使用这些选项可以控制 Network 面板的外观和功能。
2. Filters： 使用这些选项可以控制在 Requests Table 中显示哪些资源。
3. Overview： 此图表显示了资源检索时间的时间线。如果看到多条竖线堆叠在一起，则说明这些资源被同时检索。
4. Requests Table： 此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。
5. Summary： 此窗格列出了请求总数、传输的数据量和加载时间

默认情况下，Requests Table 会显示以下列:

1. Name： 资源的名称。
2. Status： HTTP 状态代码。T
3. type： 已请求资源的 MIME 类型。
4. Initiator： 发起请求的对象或进程。值为以下选项之一：
   Parser： Chrome 的 HTML 解析器发起请求。
   Redirect： HTTP 重定向发起请求。
   Script脚本： 发起请求。
   Other： 某些其他进程或操作发起请求，例如用户通过链接或者在地址栏中输入网址导航到页面。
   Size： 响应标头（通常为数百字节）加响应正文（由服务器提供）的组合大小。
   Time： 从请求开始至在响应中接收到最终字节的总持续时间。
   Timeline： Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。

5. Application

Application面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。

• Local Storage： 开发过程中使用了local storage来存储键值对(KVPs)，那就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
• Application Cache ： 可以使用Application Cache窗格去查看通过Application Cache API创建的资源。
• Frames： 将页面上的资源按frame类别进行组织显示。

在开发中常用的模块就是以上介绍的这些了！