软件测试学习笔记丨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 :查看应用运行时的日志、警告和错误信息。
    • 日志等级包括:loginfowarnerror
  • 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 做接口测试,从入门到实战/ 接口抓包(最新最全教程)

相关推荐
小A15911 分钟前
STM32完全学习——SPI接口的FLASH(DMA模式)
stm32·嵌入式硬件·学习
金创想15 分钟前
chrome主页被被篡改的修复方法
chrome·主页篡改
亦枫Leonlew18 分钟前
微积分复习笔记 Calculus Volume 2 - 5.1 Sequences
笔记·数学·微积分
岁岁岁平安33 分钟前
spring学习(spring-DI(字符串或对象引用注入、集合注入)(XML配置))
java·学习·spring·依赖注入·集合注入·基本数据类型注入·引用数据类型注入
武昌库里写JAVA37 分钟前
Java成长之路(一)--SpringBoot基础学习--SpringBoot代码测试
java·开发语言·spring boot·学习·课程设计
qq_5895681042 分钟前
数据可视化echarts学习笔记
学习·信息可视化·echarts
爱码小白1 小时前
网络编程(王铭东老师)笔记
服务器·网络·笔记
LuH11241 小时前
【论文阅读笔记】Learning to sample
论文阅读·笔记·图形渲染·点云
兔C2 小时前
微信小程序的轮播图学习报告
学习·微信小程序·小程序
海海不掉头发2 小时前
苍穹外卖-day05redis 缓存的学习
学习·缓存