F12开发者工具的简单应用

news2024/11/16 16:00:28

目录

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.coloradmin.cn/o/799351.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云共享平台:助力企业数字化转型的利器

随着互联网技术的不断发展,云共享平台正在成为企业发展必不可少的工具之一。那么,云共享平台到底为企业带来了哪些助力呢? 1. 提高效率 云共享平台可以极大地提高企业的工作效率。传统的企业数据管理通常都需要人工操作,而且往往…

redis数据库与主从复制

目录 一 基本操作 二 执行流程 三 reids持久化 四 rdb和aof持久化的过程 五 为什么会有内存碎片 六 redis组从复制 一 基本操作 set :存放数据 例如 set 键值 内容 set k kokoko k就是键值 kokoko就是内容 get:获取数据 例如 get k 就会出来 k对应的数据 keys 查询键…

【大数据之Flume】三、Flume进阶之Flume Agent 内部原理和拓扑结构

1 Flume事务 2 Flume Agent 内部原理 重要组件: 1、ChannelSelector(选择器)   ChannelSelector 的作用就是选出 Event 将要被发往哪个 Channel。   (1)Replicating ChannelSelector(复制或副本&#x…

Python实现HBA混合蝙蝠智能算法优化LightGBM回归模型(LGBMRegressor算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 蝙蝠算法是2010年杨教授基于群体智能提出的启发式搜索算法,是一种搜索全局最优解的有效方法…

「前缀和以及差分数组」

文章目录 1 前缀和数组1.1 题解1.2 Code1.3 结果 2 二维矩阵的前缀和数组2.1 题解2.2 Code2.3 结果 3 差分数组 1 前缀和数组 适用于快速频繁的计算一个索引区间内的元素之和,核心思想就是使用一个前缀和数组,然后使用前缀和数组的两个元素之差&#xf…

Postman(一)--接口测试知识准备

1.0 前言 ​ 应用程序编程接口(Application Programming Interface, API)是这些年来最流行的技术之一,强大的Web应用程序和领先的移动应用程序都离不开后端强大的API。API技术的应用给系统开发带来了便利,但也对测试人员提出了更…

【AGI】Copilot AI编程辅助工具安装教程

GitHub和OpenAI联合为程序员们送上了编程神器——GitHub Copilot。 但是,Copilot目前不提供公开使用,需要注册账号通过审核,我也提交了申请:这里第一期记录下,开启教程,欢迎大佬们来讨论交流。

Jmeter性能测试:高并发分布式性能测试

一、为什么要进行分布式性能测试 当进行高并发性能测试的时候,受限于Jmeter工具本身和电脑硬件的原因,无法满足我们对大并发性能测试的要求。 基于这种场景下,我们就需要采用分布式的方式来实现我们高并发的性能测试要求。 二、分布式性能测…

微信云开发管理工具入门教程

前言 微信云开发管理工具是是什么? 提供了一套云开发的后台管理工具,并且提供低代码开发工具,开发者可基于低代码工具,连接到业务数据库,拖拽组件生成前端UI,从而定制各类管理端应用。 在这里肯定有同学会…

python 自动化数据提取之正则表达式

>>>> 前 言 我们在做接口自动化的时候,处理接口依赖的相关数据时,通常会使用正则表达式来进行提取相关的数据,今天在这边和大家聊聊如何在python中使用正则表达式。 正则表达式,又称正规表示式、正规表示法、正规…

华为数通HCIP-BGP EVPN基础

MP-BGP MP-BGP(Multiprotocol Extensions for BGP-4)在RFC4760中被定义,用于实现BGP-4的扩展以允许BGP携带多种网络层协议(例如IPv6、L3VPN、EVPN等)。这种扩展有很好的后向兼容性,即一个支持MP-BGP的路由…

企业数据,大语言模型和矢量数据库

随着ChatGPT的推出,通用人工智能的时代缓缓拉开序幕。我们第一次看到市场在追求人工智能开发者,而不是以往的开发者寻找市场。每一个企业都有大量的数据,私有的用户数据,自己积累的行业数据,产品数据,生产线…

MySQL数据库分库分表备份(shell脚本)

创建目录 mkdir /server/scripts 一、使用脚本实现分库备份 1、创建脚本并编写 [rootlocalhost scripts]# vim bak_db_v1.sh #!/bin/bash ######################################### # File Name:bak_db_v1.sh # Version: V1.0 # Author:Shen QL # Email:17702390000163.co…

Vue2基础十、Vuex

零、文章目录 Vue2基础十、Vuex 1、vuex概述 (1)vuex是什么 vuex 是一个 vue 的 状态管理工具,状态就是数据。大白话:vuex 是一个插件,可以帮我们管理 vue 通用的数据 (多组件共享的数据) 例如:购物车数…

驱动_阻塞io内核实现

相关API 1.定义等待队列头 wait_queue_head_t wq_head; 2.void init_waitqueue_head(struct wait_queue_head *wq_head) 功能:用于初始化一个等待队列 参数: wq_head:等待队列头节点指针 返回值:无3.wait_event(wq_head, condition) 功能&am…

Antd DatePicker 日期选择框设置中文不生效

Antd 版本:4.21.6 moment 版本: 2.29.4 这里是 Antd 官网对于日期选择框国际化配置的说明 我是对 DatePicker 单独进行配置,而没有使用全局配置,但是发现代码未生效。 后来发现问题在于引入的路径有误,如下&#xf…

Python中字符串拼接有哪些方法

目录 什么是字符串拼接 为什么要进行字符串拼接 Python中字符串拼接有哪些方法? 什么是字符串拼接 字符串拼接是将多个字符串连接在一起形成一个新的字符串的操作。在编程中,字符串拼接经常用于将不同的字符串组合在一起,以创建更长或更有…

GO语言日志切割 + 记录调用源

准备工作 日志记录对程序排查问题比较关键,记录下GO中日志选择,从以下出发点考虑: 日志文件能自动切割,以免过大能记录从哪个文件哪行代码调用的,方便排查问题配置简单明了库文件使用人数较多,稳定 经过一段…

一大波涨姿势的小众网站,带你解锁新大陆!

夏日炎炎,给大家分享20个涨姿势的小众网站,打开你的新世界大门! 1、电台公园 http://radio.garden/ 可以收听到世界各地的电台,在世界地图上选一个绿点,就可以收听当地的电台了。 2、下载 4K 画质 Bing 壁纸 https…

[OnWork.Tools]系列 03-软件设置

主题设置 点击右上角的设置按钮 可以切换为深色模式 系统设置 点击设置 开机自动运行: 开机自动启动 关闭最小化: 点击右上角关闭按钮时最小化到托盘 快捷键设置: 快速唤醒/隐藏界面 默认为AltO 关于 可以快速打开文件夹,方便调试使用