本文转自测试人社区，原文链接：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 ！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
