软件测试学习笔记丨Chrome开发者模式

本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/31914

一、Chrome开发者模式（DevTools）

1.1 主要面板选项

Elements：查看和编辑 HTML 结构及 CSS 样式。
Console：查看日志、调试 JavaScript 代码。
Sources：管理源文件，设置断点调试 JavaScript 代码。
Network：监控网络请求，分析页面加载性能。
Performance：记录和分析页面性能。
Memory：分析内存使用，查找内存泄漏。
Application：管理和查看存储在浏览器中的数据。
Security：查看页面的安全信息。
Lighthouse：生成网站性能、可访问性和 SEO 报告。

1.2 各面板详解

1.2.1 Elements

用途

检查和编辑HTML：查看和实时编辑页面的HTML结构。
检查和编辑CSS：查看和修改CSS样式，实时预览更改效果。
DOM断点：在DOM节点变化（如属性变化、节点移除等）时触发断点，帮助调试动态内容。

常见操作

Inspect Element：右键点击页面元素，选择"Inspect"以在Elements面板中查看该元素的HTML和CSS。
Styles面板：查看和修改选中元素的CSS样式。
Event Listeners面板：查看选中元素绑定的事件监听器。

子菜单和功能

Styles ：查看和编辑选中元素的 CSS 样式。
- 可以添加、修改、删除 CSS 规则，实时预览效果。
Computed ：显示选中元素的所有计算后的 CSS 属性。
- 可以查看元素最终的样式值，包括从多个 CSS 规则中继承的值。
Event Listeners ：查看选中元素绑定的事件监听器。
- 列出所有与该元素相关的 JavaScript 事件。
DOM Breakpoints ：设置 DOM 节点变化的断点。
- 可以在属性变化、节点移除、子节点变化时触发断点，帮助调试动态内容。
Properties ：查看选中元素的 JavaScript 属性。
- 显示该元素的所有属性及其值，便于调试。
Accessibility ：查看选中元素的无障碍属性。
- 帮助确保页面符合无障碍标准，提升用户体验。

1.2.2 Console

用途

调试JavaScript：执行和测试JavaScript代码，打印输出和错误信息。
查看日志：显示应用运行时的日志、警告和错误信息。
命令行API：提供多种命令行API用于快速操作DOM、调试和测试代码。

常见操作

执行代码：在Console中输入并执行JavaScript代码。
查看日志 ：通过console.log()、console.error()等方法查看日志信息。
使用命令行API ：如$0、$1用于快速访问最近选择的元素。

子菜单和功能

Console API ：提供多种命令行 API，用于快速操作 DOM、调试和测试代码。
- 如 $0 获取最近选中的元素，$ 执行 CSS 选择器，console.log() 打印日志。
Logging ：查看应用运行时的日志、警告和错误信息。
- 日志等级包括：log、info、warn、error。
Commands ：执行和测试 JavaScript 代码。
- 可以在控制台中输入并执行 JavaScript 代码，实时查看结果。

1.2.3 Sources

用途

调试JavaScript：设置断点、单步执行代码、查看变量和调用堆栈。
工作区（Workspace） ：将本地文件夹映射到DevTools中，实时编辑和保存文件。
网络请求捕获：查看和编辑JavaScript代码中的网络请求。

常见操作

设置断点：点击行号设置断点，调试代码执行。
逐步执行代码：使用"Step over"、"Step into"、"Step out"等按钮逐步执行代码。
查看变量：在Scope面板中查看当前作用域的变量和对象。

子菜单和功能

File Navigator ：浏览和打开页面中的所有资源文件。
- 包括 HTML、CSS、JavaScript 文件等。
Editor ：查看和编辑源文件。
- 可以实时编辑 JavaScript 代码，并保存到本地文件。
Breakpoints ：设置和管理代码断点。
- 包括行断点、条件断点、DOM 断点、XHR 断点等。
Watch ：监控变量和表达式的值。
- 可以添加变量或表达式，实时查看其值变化。
Call Stack ：查看当前执行的调用堆栈。
- 帮助了解代码执行路径和上下文。
Scope ：查看当前作用域中的变量和对象。
- 包括全局作用域、本地作用域等。

1.2.4 Network

用途

监控网络请求：查看页面加载时的所有网络请求，包括XHR、Fetch、资源文件等。
分析性能：查看请求的详细信息，如请求头、响应头、数据负载、加载时间等。
模拟网络条件：模拟不同的网络速度和离线状态，测试应用在各种网络条件下的表现。

常见操作

查看请求详情：点击请求条目，查看其详细信息。
过滤请求：使用过滤器只显示特定类型的请求（如XHR）。
模拟网络条件：在Throttling菜单中选择模拟的网络条件（如"Slow 3G"）。

子菜单和功能

Overview ：查看页面加载过程中所有网络请求的时间轴。
- 直观显示各请求的开始和结束时间。
Headers ：查看请求和响应的头信息。
- 包括请求 URL、方法、状态码、服务器等。
Payload ：查看 POST 请求的负载数据。
- 通常是表单数据或 JSON 数据。
Preview ：预览响应的数据。
- 适用于 JSON、HTML 等可读格式。
Response ：查看完整的响应数据。
- 显示服务器返回的全部内容。
Timing ：查看请求的时间分段信息。
- 包括 DNS 查询、连接、等待、接收等各阶段的耗时。
Cookies ：查看请求和响应的 Cookie 信息。
- 列出所有相关的 Cookie 及其详细信息。

1.2.5 Performance

用途

性能分析：记录和分析页面的性能表现，包括加载时间、脚本执行时间、渲染时间等。
帧率分析：查看页面在运行时的帧率，识别性能瓶颈。
内存快照：查看和分析内存使用情况，查找内存泄漏和性能问题。

常见操作

记录性能：点击"Record"按钮记录页面性能。
查看分析结果：分析记录的性能数据，查看各阶段的耗时。
内存快照：通过"Heap Snapshot"捕获内存快照，分析内存使用情况。

子菜单和功能

Record ：记录页面性能数据。
- 包括加载时间、脚本执行时间、渲染时间等。
Frames ：查看页面在运行时的帧率。
- 识别性能瓶颈，优化动画和交互效果。
Flame Chart ：查看和分析性能数据。
- 以火焰图形式展示各阶段的耗时，直观显示性能瓶颈。
Summary ：总结性能数据。
- 显示各阶段的总体耗时，帮助识别性能问题。
Bottom-Up ：从底层向上分析性能数据。
- 显示各函数调用的总耗时，帮助优化代码。
Call Tree ：查看函数调用树。
- 展示函数调用的层级关系和各函数的耗时。

1.2.6 Memory

用途

内存分析：分析页面的内存使用情况，查找和解决内存泄漏问题。
三种快照模式：包括Heap Snapshot、Allocation Instrumentation on Timeline、Allocation Sampling，帮助深入分析内存问题。

常见操作

捕获快照：选择一种快照模式并点击"Take snapshot"按钮捕获内存快照。
分析快照：查看和分析内存快照，查找不必要的内存占用。

子菜单和功能

Heap Snapshot ：捕获内存快照。
- 分析内存中所有对象及其引用关系，查找内存泄漏。
Allocation Instrumentation on Timeline ：记录内存分配情况。
- 分析内存分配和回收的时间轴，识别内存泄漏。
Allocation Sampling ：采样内存分配。
- 提供内存分配的采样数据，帮助优化内存使用。

1.2.7 Application

用途

查看应用数据：管理和查看存储在浏览器中的数据，如Cookies、Local Storage、Session Storage、IndexedDB等。
管理缓存：查看和管理应用的缓存，包括Service Workers和Cache Storage。
安全性检查：查看应用的安全性信息，如HTTPS证书和混合内容警告。

常见操作

管理存储数据：查看和编辑Local Storage、Session Storage、IndexedDB等数据。
管理Cookies：查看、添加、删除Cookies。
查看Service Workers：查看和管理Service Workers，检查其状态和注册情况。

子菜单和功能

Local Storage ：查看和管理 Local Storage 数据。
- 本地存储的键值对数据。
Session Storage ：查看和管理 Session Storage 数据。
- 会话存储的键值对数据。
IndexedDB ：查看和管理 IndexedDB 数据库。
- 复杂结构化数据的本地存储。
Cookies ：查看和管理 Cookies。
- 列出所有相关的 Cookie 及其详细信息。
Cache Storage ：查看和管理 Cache Storage 数据。
- 缓存存储的数据，通常由 Service Worker 使用。
Service Workers ：查看和管理 Service Workers。
- 检查其状态和注册情况，调试离线缓存等功能。
Web SQL ：查看和管理 Web SQL 数据库。
- 已过时的客户端存储技术，但仍有部分旧应用使用。
Application Cache ：查看和管理应用缓存。
- 已废弃的缓存机制，使用现代缓存 API 替代。

1.2.8 Security

用途

安全性检查：查看页面的安全性信息，包括HTTPS证书、混合内容、内容安全策略（CSP）等。
问题提示：显示页面存在的安全问题，提供解决建议。

常见操作

查看HTTPS信息：查看证书的详细信息和有效性。
检查混合内容：识别页面中不安全的资源请求。

子菜单和功能

Overview ：显示页面的总体安全状态。
- 包括 HTTPS 证书、混合内容、安全性警告等。
Certificate ：查看 HTTPS 证书的详细信息。
- 包括证书颁发者、有效期等。
Mixed Content ：检查页面是否存在不安全的混合内容。
- 列出所有通过 HTTP 加载的资源，建议全部改为 HTTPS。

1.2.9 Lighthouse

用途

网站性能和优化建议：生成网站性能、可访问性、最佳实践、SEO和PWA的报告，提供优化建议。
综合评估：帮助开发者全面评估和优化Web应用。

常见操作

生成报告：选择需要评估的指标，点击"Generate report"生成报告。
查看优化建议：分析报告中的各项指标和优化建议，改进网站性能和用户体验。

子菜单和功能

Audit ：选择需要评估的指标，点击"Generate report"生成报告。
- 评估包括性能、可访问性、最佳实践、SEO 和 PWA 等方面。
Reports ：查看生成的评估报告。
- 分析各项指标的得分和改进建议，优化网站表现。

1.2.10 Console Drawer

用途

快速访问工具：提供对多种工具的快速访问，如Console、Network conditions、Rendering等。
命令面板：通过命令面板快速执行各种操作。

常见操作

切换工具 ：按 Esc 打开/关闭Console Drawer，快速切换到需要的工具。
命令面板 ：按 Ctrl+Shift+P (Windows) 或 Cmd+Shift+P (Mac) 打开命令面板，输入命令快速执行操作。

1.2.11 Sources Drawer

用途

文件管理：快速访问和管理源文件，包括页面脚本、样式表和图片等资源。
断点管理：管理和查看所有设置的断点。

常见操作

打开文件 ：按 Ctrl+P (Windows) 或 Cmd+P (Mac) 打开文件，快速定位和查看源文件。
管理断点：在"Breakpoints"面板中查看和管理所有断点。

1.2.12 More Tools

用途

附加工具：访问和使用更多开发者工具，如Performance Monitor、Coverage、Sensors等。
自定义工具栏：根据需要添加或移除工具，定制DevTools工具栏。

常见操作

添加工具：点击菜单栏中的"三点图标"，选择"More Tools"，添加需要的工具。
使用附加工具：根据需求使用Performance Monitor监控性能、使用Coverage分析代码覆盖率、使用Sensors模拟不同的设备和环境。

软件测试学习笔记丨Chrome开发者模式

一、Chrome开发者模式（DevTools）

1.1 主要面板选项

1.2 各面板详解

1.2.1 Elements

用途

常见操作

子菜单和功能

1.2.2 Console

用途

常见操作

子菜单和功能

1.2.3 Sources

用途

常见操作

子菜单和功能

1.2.4 Network

用途

常见操作

子菜单和功能

1.2.5 Performance

用途

常见操作

子菜单和功能

1.2.6 Memory

用途

常见操作

子菜单和功能

1.2.7 Application

用途

常见操作

子菜单和功能

1.2.8 Security

用途

常见操作

子菜单和功能

1.2.9 Lighthouse

用途

常见操作

子菜单和功能

1.2.10 Console Drawer

用途

常见操作

1.2.11 Sources Drawer

用途

常见操作

1.2.12 More Tools

用途

常见操作

推荐学习