chrome浏览器 memory调试教程 chrome浏览器调试模式

转载

mob6454cc7a6087 2024-04-18 10:19:16

文章标签 chrome 软件测试 Web 分块数据 文章分类 机器学习人工智能

一、谷歌浏览器开发者模式

F12打开调试模式

chrome浏览器 memory调试教程 chrome浏览器调试模式_Web

【箭头图标】用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态
【设备图标】切换到不同的移动终端设备模式，同时可以选择不同的尺寸比例
【Elements】元素面板，查看Web页面的HTML与CSS，可以双击对当前页面进行修改
【Console】控制台面板，JavaScript输出信息的控制台，在这里可以查看到JS的错误信息，也可以执行键入的JS脚本
【Sources】源代码面板，我们在这个页面对JS代码进行调试，可设置断点
【Network】网络面板，可以明确的查看到访问Web页面所产生的全部请求（包括应答状态、响应时间、数据量等信息）和下载的资源文件，并可以模拟不同的网络状态（在线、离线、3G等）下对Web的加载情况，可以用于分析和优化网页加载性能
【Performance】性能面板，记录和查看Web页面在浏览器中运行时的性能表现，主要用于发现Web页面运行时性能瓶颈和性能调优
【Memory】内存面板，记录执行JS函数对CPU和内存的使用情况，可以识别开销大的JS函数，跟踪内存泄露，帮助代码优化，提高JS执行性能
【Application】应用面板，记录Web页面加载的所有资源信息，包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等
【Lighthouse】审计面板，从性能（Performance）、PWA兼容性（Progressive Web App）、可访问性（Accessibility）、最佳实践（Best Practices）、搜索引擎优化（SEO）这五个维度给出网站的评估报告
【Security】安全面板，查看Web页面的安全和认证情况，确保网站上正确地实现了HTTPS

二、常用功能菜单

1、【Elements】查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息

chrome浏览器 memory调试教程 chrome浏览器调试模式_chrome_02

2、【Console】打印和输出相关的命令信息，执行JS脚本

chrome浏览器 memory调试教程 chrome浏览器调试模式_chrome_03

3、【Sources】1-资源区、2-工作区、3-监控台

chrome浏览器 memory调试教程 chrome浏览器调试模式_数据_04

资源区：

【Page】：展示当前Web页面所包含的资源文件（图片、CSS样式表、JS脚本等）

【Filesystem】：当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）

【Overrides】：当我们的Web页面在远程服务器上，本地没有项目源码，我们也可以通过Overrides选项卡选定目录让DevTools创建一个文件夹来保存对远程Web页面的所有修改。修改完成后，用这些文件直接去覆盖远程服务器上的源文件就完成了页面的修改

【Content script】：用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间（这里的JS脚本共享页面DOM与消息机制，与页面的JS脚本互相不知道对方的存在，无法访问对方的变量和函数）

【Snippets】：可以在这里创建代码片段，并独立运行和调试，刷新页面不会丢失

工作区：

针对JS脚本可以添加/移除断点，在断点上打开右键菜单可以禁用断点，以及设置断点触发条件进行编辑

监控台：

【Watch】：跟踪监控变量，点击"+"号添加变量名

【Call Stack】：函数调用栈，显示执行路径

【Scope】：查看属性作用域

【Beakpoints】：这里可以查看到所有的断点启用状态及位置

【XHR/fetch Breakpoints】：当XHR的请求URL包含某一特定的字符串时所触发的断点

【DOM Breakpoints】：当改变一个节点或其子元素时所触发的断点

【Global Listeners】：全局监听器，绑定在 window 对象上的事件

【Event Listener Breakpoints】：事件发生时所触发的断点

说明：上图中“{ }”可以格式化JS脚本。

4、【Network】网络请求

chrome浏览器 memory调试教程 chrome浏览器调试模式_数据_05

【区域1】

从左至右，功能分别为：

请求信息记录按钮，关闭状态则不会记录

请求信息清楚按钮，一键清除请求信息

请求过滤，可以自定义筛选条件

请求检索，检索符合条件的请求

Preserve log 保留日志，重新加载url时，之前请求显示的资源信息，会保留下来，不会清空

Disable cache 否进行缓存，打开这个开关，则页面资源不会存入缓存

No throttling 模拟多种网络的访问

Network conditions 网络请求设置

chrome浏览器 memory调试教程 chrome浏览器调试模式_Web_06

上、下箭头导入或导出网页交互操作产生的报文

【区域2】请求过滤

过滤条件输入框，可以输入一些字符串、域、大小、状态码、媒体类型等等

data URLs指一些嵌入到文档中的小型文件，在请求表里面以data:开头的文件就是，如较为常见的svg文件。勾选Hide data URLs复选框即可隐藏此类文件

All、XHR、JS、CSS、Img、Media、Font、Doc、WS、Manifest、Other 根据请求资源类型筛选，其中All是所有类型，XHR指异步网络请求，WS指webSocket连接

【区域3】时间轴

根据请求发出时间呈现，可选择时间段展示该时段内请求

【区域4】请求明细（右键Header Options可以增删展示的明细项）

Name：文件的名字或者资源的标识符

Status：HTTP状态码

Type：请求资源的MIME类型

Initiator：标记请求是由哪个对象或进程发起的（请求源）

Parse：Chrome的HTML解析器
Redirect：HTTP重定向
Script：js函数
Other：一些别的处理或操作，比如通过链接导航到一个页面，或者是在浏览器的地址栏输入一个地址然后回车

Size：响应头大小+响应体大小

Time：总的持续时间，从发起请求到资源下载完成

Waterfall：每一个请求活动的不同阶段的可视化展示

说明：底部为请求的统计信息

三、请求响应信息

chrome浏览器 memory调试教程 chrome浏览器调试模式_chrome_07

【General】请求的一般信息

其中Remote Address是请求的IP地址，

Referrer Policy 引荐来源策略，表明页面从何处跳转

Referrer-Policy: no-referrer——不显示Referrer的任何信息在请求头中。

Referrer-Policy: no-referrer-when-downgrade——这是默认值。当从https网站跳转到http网站或者请求其资源时（安全降级HTTPS→HTTP），不显示Referrer的信息，其他情况（安全同级HTTPS→HTTPS，或者HTTP→HTTP）则在Referrer中显示完整的源网站的URL信息。

Referrer-Policy: origin——表示浏览器在Referrer字段中只显示源网站的源地址（即协议、域名、端口），而不包括完整的路径。

Referrer-Policy: origin-when-cross-origin——当发请求给同源网站时，浏览器会在Referrer中显示完整的URL信息，发给非同源网站时，则只显示源地址（协议、域名、端口）

Referrer-Policy: same-origin——表示浏览器只会显示Referrer信息给同源网站，并且是完整的URL信息。【所谓同源网站，是协议、域名、端口都相同的网站】

Referrer-Policy: strict-origin——该策略更为安全些，和origin策略相似，只是不允许Referrer信息显示在从https网站到http网站的请求中（安全降级）。

Referrer-Policy: strict-origin-when-cross-origin——和origin-when-cross-origin相似，只是不允许Referrer信息显示在从https网站到http网站的请求中（安全降级）。

Referrer-Policy: unsafe-url——浏览器总是会将完整的URL信息显示在Referrer字段中，无论请求发给任何网站。

【Response Headers】响应头信息

Connection: 处理完这次请求后，是断开连接还是继续保持连接

Content-Encoding: 数据的压缩格式

Content-Length: 服务器回送数据的长度

Content-Type: 服务器回送数据的类型

Date: 当前时间值

Server: 服务器的类型

Transfer-Encoding: chunked 分块编码，在头部加入 Transfer-Encoding: chunked 之后，就代表这个报文采用了分块编码。这时，报文中的实体需要改为用一系列分块来传输。每个分块包含十六进制的长度值和数据，长度值独占一行，长度不包括它结尾的 CRLF（\r\n），也不包括分块数据结尾的 CRLF。最后一个分块长度值必须为 0，对应的分块数据没有内容，表示实体结束

【Request Headers】请求头信息

Accept: 浏览器能够处理的内容类型

Accept-Charset: 浏览器能够显示的字符集

Accept-Encoding: 浏览器能够处理的压缩编码

Accept-Language: 浏览器当前设置的语言

Connection: 浏览器与服务器之间连接的类型

Cookie: 当前页面设置的任何Cookie

Host: 发出请求的页面所在的域

Referer: 发出请求的页面的URL

User-Agent: 浏览器的用户代理字符串

cache-control: 缓存信息

说明：具体可参考链接