F12开发者工具的简单应用

目录

elements 元素

1、元素的定位和修改

2、UI自动化应用

console 控制台

sources 源代码

network 网络

1、定位问题

2、接口测试

3、弱网测试

performance 性能

memory 存储

application 应用

recorder 记录器


界面展示如下(设置中可以切换中英文)

 

 

 

elements 元素

页面的元素定位,做UI自动化的时候用的比较多;

1、元素的定位和修改

点击左上角箭头后,再单击页面上位置,下方就可以自动定位到相关元素:

 

定位到元素以后是可以修改的,比如我们可以把上面定位到的密码类型改成text,这样页面上密码就不会加密显示;

这个修改只对当前页面有效,页面刷新后会自动恢复原页面;

 

2、UI自动化应用

具体应用方式可以参考之前这篇文章:http://t.csdn.cn/Gn6Fb

 

console 控制台

调试页面错误,开发用的比较多;

sources 源代码

前端页面问题调试,开发用的比较多;

network 网络

这个页签记录了前后端交互,是测试使用最多的页签;抓包,问题定位;

首先认识2个比较常用的选项:

保留日志:勾选上这个选项后,界面跳转时,也能记录到;

停用缓存:是否保留界面缓存数据;

1、定位问题

1.1 前端没有发送请求           --前端问题

1.2 前端发送数据错误           --前端问题(保证信息没有传递错误,看参数)

1.3 后端没有给响应信息       --后端问题

1.4 后端响应信息数据错误    --后端问题

1.5 前端没有正确显示数据    --前端问题(保证前端显示与后端结果一致,看响应)

 

2、接口测试

具体应用方式可以参考之前这篇文章: http://t.csdn.cn/Qkfj6

3、弱网测试

 

performance 性能

前端性能,页面响应时间和数据分析;

 

memory 存储

网上有同学用来做内存泄漏测试;

application 应用

主要存储一些cookies和前端本地数据

recorder 记录器

录制并回放,可以用于重复工作或问题回放

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/48205.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Stable-Diffusion-Webui部署SDXL0.9报错参数shape不匹配解决

问题 已经在model/stable-diffusion文件夹下放进去了sdxl0.9的safetensor文件,但是在切换model的时候,会报错model的shape不一致。 解决方法 git pullupdate一些web-ui项目就可以,因为当前项目太老了,没有使用最新的版本。

android 如何分析应用的内存(十二)——HWASan

android 如何分析应用的内存(十二) 上一篇介绍了ASan,这次介绍ASan的加强版HWASan HWASan的使用 从NDK r21和Android 10 开始,Android支持HWAsan。HWAsan仅仅支持arm64架构的设备。 系统级准备 HWASan需要系统的支持&#xf…

【Terraform学习】TerraformCloud入门介绍(快速入门)

TerraformCloud入门介绍 什么是 TerraformCloud? Terraform Cloud是Hashicorp Terraform的SaaS版本。 免费版功能 免费版功能包括版本控制集成、远程计划和实施远程计划和实施、通知及webhook、全http API驱动、状态管理、模拟计划、私有化模块注册器以及全HTTP界…

9.NIO非阻塞式网络通信入门

highlight: arduino-light Selector 示意图和特点说明 一个 I/O 线程可以并发处理 N 个客户端连接和读写操作,这从根本上解决了传统同步阻塞 I/O 一连接一线程模型。架构的性能、弹性伸缩能力和可靠性都得到了极大的提升。 服务端流程 1、当客户端连接服务端时&…

PHP-Mysql图书管理系统--【白嫖项目】

强撸项目系列总目录在000集 PHP要怎么学–【思维导图知识范围】 文章目录 本系列校训本项目使用技术 首页phpStudy 设置导数据库后台的管理界面数据库表结构项目目录如图:代码部分:主页的head 配套资源作业: 本系列校训 用免费公开视频&am…

FPGA+EMMC 8通道存储小板

FPGA 采用XILINX公司A7100作为主芯片 AD采用AD7606及一款陀螺仪传感器,可以实时存储到EMMC,系统分为采集模式及回放模式 通过232接口对工作模式进行配置,采样率可以动态配置 回放采用W5100S通过TCP协议进行回放数据

【技术积累】Vue.js中的核心知识

Vue的生命周期 Vue中的生命周期是指组件从创建到销毁的整个过程中,会触发一系列的钩子函数 Vue2中的生命周期 Vue2中的生命周期钩子函数是在组件的不同阶段执行的特定函数。这些钩子函数允许开发者在组件的不同生命周期阶段执行自定义的逻辑。 Vue2中的生命周期钩…

Git基本操作

Git使用 1.命令行操作 1.1 本地库操作 1.1.1 本地库初始化 命令: git init 效果: 注意:.git目录中存放的是本地库相关的子目录和文件,不能删除和修改。 1.1.2 设置签名 作用:区分不同的开发人员身份 格式&…

Kubernetes 简介:容器编排与集群管理的进化

🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~&#x1f33…

NetApp FAS2750 和 FAS2820:适用于分布式企业和从远程到核心的 FAS

NetApp FAS2750 和 FAS2820:适用于分布式企业和从远程到核心的 FAS 拥有分布式企业和多个办公位置的客户希望使用这些系统进行虚拟化,以及为大型 FAS 和 AFF 系统提供简单且经济高效的备份和灾难恢复。 为什么要从 NetApp FAS 系列中选择一个型号&…

jmeter-断言

断言作用:让脚本自动化执行过程中,能够自动判定执行结果是否正确,需要添加断言 响应断言 添加方式:测试计划–》线程组–》HTTP请求–》(右键添加)断言–》响应断言 案例 请求:https://www.baidu.com 检查:让程序检查…

英文审稿意见回复

编辑:Cover Letter 审稿人:Response Letter 审稿意见回复 - 搜索结果 - 知乎知乎,中文互联网高质量的问答社区和创作者聚集的原创内容平台,于 2011 年 1 月正式上线,以「让人们更好的分享知识、经验和见解&#xff0c…

WPF icon的设置

想给控件设置个圆形图片&#xff0c;代码如下&#xff1a; ​<Setter Property"Icon"><Setter.Value><Image Source"/WpfApp1;component/Resource/1.ico" Width"16" Height"16"/></Setter.Value></Setter&…

意外:WPS编程新工具,不用编程,excel用户:可以不用VBA啦

来来来&#xff0c;拓宽一下视野&#xff01; 别总以为excel和WPS只能用VBA编程&#xff0c;也别总是想着ACCESS这些老生常谈的工具。其实对于电子表格高级用户来讲&#xff0c;不会VBA&#xff0c;不用ACCESS&#xff0c;也一样可以解决复杂问题或者高级应用。 尤其是WPS用户…

数据结构和算法——排序算法的比较和排序综测测验

目录 排序算法的比较 排序综合测验 快又稳定 元素错位 有序排序 排序结果 排序算法的比较 排序方法平均时间复杂度最坏情况下时间复杂度额外空间复杂度稳定性简单选择排序不稳定冒泡排序稳定直接插入排序稳定希尔排序不稳定堆排序不稳定快速排序不稳定归并排序稳定基数排…

Springboot之把外部依赖包纳入Spring容器管理的两种方式

前言 在Spring boot项目中&#xff0c;凡是标记有Component、Controller、Service、Configuration、Bean等注解的类&#xff0c;Spring boot都会在容器启动的时候&#xff0c;自动创建bean并纳入到Spring容器中进行管理&#xff0c;这样就可以使用Autowired等注解&#xff0c;…

关注这些问题,助你找到理想工作

导语&#xff1a;在寻找理想工作的过程中&#xff0c;有一些关键问题需要我们特别关注。了解并回答这些问题将有助于我们更好地定位自己&#xff0c;并找到符合自身需求和目标的职位。本文将介绍一些在找工作时需要关注的重要问题。 个人定位&#xff1a;首先&#xff0c;我们…

Vue源码学习 - 异步更新队列 和 nextTick原理

目录 前言一、Vue异步更新队列二、nextTick 用法三、原理分析四、nextTick 源码解析1&#xff09;环境判断2&#xff09;nextTick() 五、补充 前言 在我们使用Vue的过程中&#xff0c;基本大部分的 watcher 更新都需要经过 异步更新 的处理。而 nextTick 则是异步更新的核心。…

视频剪辑矩阵分发系统Unable to load FFProbe报错技术处理?

问题一 报错处理 对于视频剪辑矩阵分发系统中出现的“Unable to load FFProbe”报错问题&#xff0c;可以采取以下技术处理措施进行解决。 1.检查系统中是否正确安装了FFProbe工具&#xff0c;并确保其路径正确配置。 2.检查系统环境变量是否正确设置&#xff0c;包括FFPr…

CSS鼠标样式(cursor)

CSS cursor 属性值 属性值示意图描述auto默认值&#xff0c;由浏览器根据当前上下文确定要显示的光标样式default 默认光标&#xff0c;不考虑上下文&#xff0c;通常是一个箭头none不显示光标initial将此属性设置为其默认值inherit从父元素基础 cursor 属性的值context-menu…