开发者模式

开发者模式学习

一. 开发者模式延申
•元素（ELements）：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。测试工作者可以在这个模块查看各元素，验证定位元素的唯一性等；
•控制台（Console）：这个模块可以查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用；
•源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码等。该模块的断点调试功能，测试时用到的比例较高；
•网络（Network）：网络页面主要用于查看http请求等与网络连接相关的信息。测试过程中重点使用的模块；
•Performance（性能面板）：使用时间轴面板，可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能
•Memory（内存面板）：分析web应用或者页面的执行时间以及内存使用情况
•Application（应用面板）：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等
•Security（安全面板）：使用安全面板调试混合内容问题，证书问题等等
•Audits（审核面板）：对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等
•资源（resources）：可以清理缓存。浏览器的resources在移到了Application中；
5.1、网络（Network）重点详解
Network 面板记录页面上每个网络操作的相关信息，从发起网页请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态，资源信息，大小，所用时间，Request和Response等）。浏览器页面、嵌入了H5页面的程序测试过程中，经常通过这个模块查看接口请求、抓包、响应时间等，是频繁使用的模块。
注意：每个页面查看网络请求数据时，都需要重新调用Chrome DevTools，然后刷新页面才能获取页面数据。
Network主要包括5大块窗格：

1. Controls：控制Network的外观和功能。
2. Filters： 控制Requests Table具体显示哪些内容。
3. Overview： 显示获取到资源的时间轴信息。
4. Requests Table： 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
5. Summary： 显示总的请求数、数据传输量、加载时间信息。
   Network 面板按钮介绍如下图：

5.1.1、Requests Table(请求列表)
此列表列出了检索的每个资源。默认情况下，此表按时间顺序排序，也就是最早的资源在顶部。单击资源名称可以获得更多信息。提示：右键单击列表的任何标题栏可以以添加或删除信息列。

Requests Table列表中，每一列的含义：
• Name：资源名
• Status：响应状态
• Type：响应数据类型
• Size:响应数据大小
• Time：响应时间
5.1.2、资源详细信息
点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：
• Headers：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等。
• Preview：根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
• Response：显示HTTP的Response信息(未进行格式化)。
• Cookies：显示资源HTTP的Request和Response过程中的Cookies信息。
• Timing：显示资源在整个请求生命周期过程中各部分花费的时间。
1、 Headers页面中包含的http请求以及响应信息等，可以查看该资源、接口的状况，具体的数据含义如下：