测试必备知识：Web 测试F12的用处

最新推荐文章于 2024-05-15 08:43:47 发布
置顶 最新推荐文章于 2024-05-15 08:43:47 发布
阅读量3.9k 收藏 40
点赞数 4
分类专栏： 接口测试 文章标签： 软件测试 接口 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43953200/article/details/117321311
版权
本文介绍了Web测试中F12开发者工具的用途，包括Elements的页面元素查看，Console的错误和消息检查，Sources的脚本调试，以及Network的请求和响应分析。同时，讲解了接口测试的关键点，如GET和POST请求的区别，HTTP状态码的含义，如200、300、400和500系列的状态码代表的意义。
摘要由CSDN通过智能技术生成

申明：目前学习资料和观点 均受网络资料影响，如有侵权，请及时联系。

 

目录

一、Web 测试网站F12的用处    

二、接口测试的相关知识点

一、Web 测试网站F12的用处    

【1】 Elements：查看页面元素属性和进行修改

 

【2】Console：这是一个web控制台，可以查看网页运行后提示的消息，错误或者警告以及输出内容等

【3】Sources：显示资源文件的，可以查看运行的脚本，调试一般都是在Sources调试的

 

【4】Network：可以看到请求报文和响应报文以及其他的东西

最低0.47元/天 解锁文章
周周在测试
关注
  • 4
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
浏览器F12功能键对测试工程师的重要性
wangxing8282的博客
05-14 998
浏览器F12功能键对测试工程师的重要性 F键，功能键，Function键。F12常用于网站界面测试、调试，分析网页所出现的问题，查看html元素、查看响应事件等方面。 打开一个网页，点击F12，弹出一个窗口，其窗口的功能如下： 1 Elements（页面元素） 查看网页页面的所有元素，修改元素的代码与属性。用于查看元素的属性、CSS属性、监听事件以及端点等等。 2 Console（控制台） 当网页的JS代码中使用了console.log( )函数时，该函数输出的日志信息会在控制台中显示。日志信息
web测试技术总结
04-10
Web测试技术是对Web应用程序的功能、性能、安全性等各个方面进行全面验证的过程。本文主要总结了Web测试中的功能测试、异常测试和输入框测试的关键点。 一、输入框测试 1. 字符型输入框测试： - 验证各种字符类型...
web问题定位：F12，如何找到对应接口
qq_48811377的博客
06-08 1535
接口查看法，是我们最常用的定位前后端问题的方法。即：一般用来查看是后端返回给前端的数据有误，还是前端显示有误。主流浏览器（如Chrome，FireFox，等）都有自带的接口查看工具，可以通过F12（设置–工具–开发者工具）开启抓包。每进行一个操作，一般都会调用对应的接口，在NetWork中可以看到当前页面发送的每个请求。
F12 开发人员工具调试网页 入门教程
11-20
F12 开发人员工具调试网页 入门教程
浏览器的F12是干什么的？一共有哪些属性？
最新发布
长风破浪会有时的博客
05-15 408
F12是一个非常强大的工具，它可以帮助我们查看和修改网页上的内容，甚至还可以帮助我们调试网页的问题。这个工具通常被叫做“开发者工具”，因为它主要是给开发网页的人使用的。除了以上这些主要面板外，F12开发者工具还有很多其他的功能和属性等待你去探索。总的来说，F12是一个非常强大且复杂的工具，但只要你愿意花时间去学习和实践，它就可以成为你探索和理解网页世界的一把利器！当你按下F12键时，通常会弹出一个窗口，这个窗口里有很多不同的面板或选项卡，每个都有自己的特殊功能。
浏览器F12功能键对测试开发工程师的重要性
测试开发之路BeeTester
01-09 1万+
浏览器F12功能键对测试开发工程师的重要性 F键，功能键，Function键。F12常用于网站界面测试、调试，分析网页所出现的问题，查看html元素、查看响应事件等方面。 打开一个网页，点击F12，弹出一个窗口，其窗口的功能如下： 1 Elements（页面元素） 查看网页页面的所有元素，修改元素的代码与属性。用于查看元素的属性、CSS属性、监听事件以及端点等等。 2 Console（控制台） 当...
Web测试-笔记-F12的用处
qq_39361350的博客
02-01 5119
最近开始做web端的测试，和之前C/S的测试在一些方式上还是有明显区别的。 总结一下在干活的过程中遇到的一些技巧和测试的工具，以便日后整理关于B/S的相关资料。 在测试的时候遇到报错。需要自己去定位这个问题的原因，然后再联系开发修改。 这也是目前测试需要掌握的能力之一（提高工作效率，也能锻炼自己的能力）。 今天就来总结和学习一下——F12开发者选项。 1. Elements 关于Elements...
超详细性能测试思维导图
03-10
此外，像PerfDog这样的移动应用性能测试工具，以及浏览器的F12开发者工具也是测试者的重要助手。 性能测试的主要指标包括最大TPS（每秒事务处理数）、响应时间（如95%和99%分位数）、成功率等。一般来说，如果压测...
优化标准测试函数及MATLAB代码
02-09
在优化领域，标准测试函数是评估和比较不同优化算法性能的重要工具。这些函数通常具有已知的全局最优解，或者具备特定的复杂性，如多模态、非线性、约束等特性，使得它们能够全面地检验优化算法的寻优能力和稳健性。...
[测试开发技术] 面试必问：如何快速定位BUG？
10-21
而在常规的多人协同开发项目中，测试人员需具备对系统、业务的了解，以及使用F12开发者工具或抓包工具的能力。 定位问题时，通常遵循数据流向，先记录BUG现象，然后分析问题场景。比如，5开头的错误代码通常指向...
前端性能测试工具-Lighthouse (灯塔)插件
03-14
2. **运行审计**：安装完毕后，打开开发者工具（F12或右键选择检查），在审计（Audits）或Lighthouse选项卡中点击“Run Audit”开始测试。 3. **查看报告**：Lighthouse会生成一份详细的报告，列出每个方面的得分、...
如何使用web端的控制台（F12）
热门推荐
m0_52033082的博客
11-09 1万+
在web测试的时候需要使用控制台来进行查看接口和定位问题 在测试过程中打开控制台的方法： 1：直接电脑上按F12 2:在浏览器上右键点击“检查” 这是是Chrome浏览器的开发者工具界面 Elements（元素），Console（控制台），Network（网络接口），Sources（源代码），Application（记录加载的资源信息）这几个类型是常见的、需要关注的 使用场景 Elements（元素） 场景1：比如说在测试过程中，浏览页面上多出一些多余的文字和图片或者是其他不符合预期的页面
Web测试必备技能——F12定位bug属于前端还是后台
彩虹的博客
10-08 1万+
chrom浏览器为例 （1）打开开发者工具，在浏览器菜单栏选择工具-开发者工具，快捷键是F12 （2）打开之后切换到Network页签，操作就可以看到请求响应 （3）再选择响应的链接，切换到Preview页签，可以看到响应的结果数据；切换到Headers页签可以看到请求的地址，请求的方式，结果等信息 （4）Response结果中可以看到返回的数据字段、值 如图，此时页面出现报错 点击该条报错信息 ...
测试人员如何使用浏览器的f12_如何使用浏览器的F12调试页面？
weixin_39597987的博客
12-22 591
如何使用浏览器的F12调试页面？一个程序员按照要求编写一个网页，不可能一次编写就完全达到目的，一般要对自己的的代码修改调试几次后才能到达要求，浏览器的F12开发人员工具就可以很方便的帮助程序员调试自己的代码。F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络...
chrome浏览器F12测试使用
sumeixiaoxiao的博客
11-24 7629
chrome浏览器F12测试使用
Web开发经验谈之F12开发者工具/Web调试
前进者
11-08 7167
Web开发经验谈之F12开发者工具/Web调试
测试人员必备技能——如何利用F12快速定位前后端BUG
软件测试技术交流分享
10-20 4336
在测试人员测试过程中经常需要通过抓包来区分一些前后端的Bug，特别是Web端的测试，利用浏览器中的F12开发者选项，就能进行网站界面测试、调试，分析网页所出现的问题，查看html元素、查看响应事件等方面。
软件测试-自动化测试-web自动化-教学研究
02-10
该资源是一份针对软件测试-自动化测试，特别是Web自动化测试的教学研究材料。它旨在帮助学习者入门并理解自动化测试的基本概念和实践。主要内容涵盖了以下几个方面： 1. 自动化测试概述： - 自动化测试的优点主要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值