软件测试学习笔记丨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模拟不同的设备和环境。

推荐学习

【霍格沃兹测试开发】7天软件测试快速入门带你从零基础/转行/小白/就业/测试用例设计实战

【霍格沃兹测试开发】最新版！Web 自动化测试从入门到精通/ 电子商务产品实战/Selenium （上集）

【霍格沃兹测试开发】最新版！Web 自动化测试从入门到精通/ 电子商务产品实战/Selenium （下集）

【霍格沃兹测试开发】明星讲师精心打造最新Python 教程软件测试开发从业者必学（上集）

【霍格沃兹测试开发】明星讲师精心打造最新Python 教程软件测试开发从业者必学（下集）

【霍格沃兹测试开发】精品课合集/ 自动化测试/ 性能测试/ 精准测试/ 测试左移/ 测试右移/ 人工智能测试

【霍格沃兹测试开发】腾讯/ 百度/ 阿里/ 字节测试专家技术沙龙分享合集/ 精准化测试/ 流量回放/Diff

【霍格沃兹测试开发】Pytest 用例结构/ 编写规范 / 免费分享

【霍格沃兹测试开发】JMeter 实时性能监控平台/ 数据分析展示系统Grafana/Docker 安装

【霍格沃兹测试开发】接口自动化测试的场景有哪些？为什么要做接口自动化测试？如何一键生成测试报告？

【霍格沃兹测试开发】面试技巧指导/ 测试开发能力评级/1V1 模拟面试实战/ 冲刺年薪百万！

【霍格沃兹测试开发】腾讯软件测试能力评级标准/ 要评级表格的联系我

【霍格沃兹测试开发】Pytest 与Allure2 一键生成测试报告/ 测试用例断言/ 数据驱动/ 参数化

【霍格沃兹测试开发】App 功能测试实战快速入门/adb 常用命令/adb 压力测试

【霍格沃兹测试开发】阿里/ 百度/ 腾讯/ 滴滴/ 字节/ 一线大厂面试真题讲解，卷完拿高薪Offer ！

【霍格沃兹测试开发】App自动化测试零基础快速入门/Appium/自动化用例录制/参数配置

【霍格沃兹测试开发】如何用Postman 做接口测试，从入门到实战/ 接口抓包（最新最全教程）