开发者工具与BUG定位分析

多次拒绝offer

已于 2023-04-25 11:57:25 修改

阅读量506

点赞数

分类专栏：前端技术分享文章标签： bug 网络

于 2023-04-02 10:06:02 首次发布

本文链接：https://blog.csdn.net/m0_64813329/article/details/129907293

版权

前端技术分享专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.前提了解

1.包：

包(Packet)是TCP/IP协议通信传输中的数据单位，一般也称“数据包”。

TCP/IP协议是工作在OSI模型第三层(网络层)、第四层(传输层)上的，帧工作在第二层(数据链路层)。上一层的内容由下一层的内容来传输，所以在局域网中，“包”是包含在“帧”里的。

2.抓包：

抓包（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。

3.网络协议

网络协议为计算机网络中进行数据交换而建立的规则、标准或约定的集合。

有很多很多协议协议:TCP/IP,HTTP,socker，SOAP，RESTful（后四个是应用层的）

以百度为例，用f12打开，全称叫开发者工具。有很多table，选择网络，刷新后可以看到好多包

http://testingedu.com.cn:8081/inter/user.html

4.http状态码

123都代表成功

5.F12怎么抓包？

按F12启动
更多工具-开发者工具
ctrl+shift+I
鼠标右键选检查页面启动

6.f12常规设置

1.显示的位置调整：靠右，靠左，靠下，独立窗口

2.设置颜色和语言

3.手机版本切换，测试H5页面，小程序测试，可以方便再电脑操作和调试，可以选择尺寸和不同的手机型号

7.功能：

查看器：元素定位

控制台：调试错误

source：调试断点

network：测试，抓包

performance：响应时间，数据分析，性能排查

memory：本地储存，缓存，配合网络，性能分析

保留日志：保存操作过程所以的包

停用缓存：所有的包就不会走缓存了,开启后，页面资源不会存入缓存，可以在status栏的状态码看文件请求状态

网络快慢：弱网测试，2g，3g，离线，用于：模拟用户网络不佳的场景（web应用，手机模式），保证软件可以正常处理并给出友好的反应和提示

停止抓包（录制）：

筛选(过滤)：

url:域名或者文件部分包含这个URL

status-code:404

method:post

domain:8.129.91.152:8765(域名）

remote-ip:123.237.176.160（ip地址）

mime-type:image/png

搜索请求：

1.点击搜索按钮打开搜索框

2.搜索关键字可以是请求和响应消息头和响应消息体

3.大小敏感：Aa

4.关闭搜索框

类型，按照类型处理

时间线：就是看抓包花了多少时间

2.具体介绍

1.Elements查看器

用途：

可用于页面结构分析也可用于自动化脚本的元素定位或者页面元素分析(元素大小，元素布局等)。

前端页面-html页面，标签语言。

1、查看元素的代码:

点击左上角的箭头图标(或按快捷键Ctrl+Shift+C)进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素 (Elements) 一栏中定位到该元素源代码的具体位置。

例如：查看密码

2.查看元素的属性:

定位到元素的源代码之后，可以从源代码中读出该元素的属性。如class、 Src、 width等属性的值。

3.修改元素的代码与属性:

点击元素，然查看右键菜单，可以看到chrome提供的可对元素进行的操作: 选择Edit as HTML选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。

当然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，所以这个功能也是作为调试页面效果而使用。

4.软件测试

UI自动化的元素定位

案例:

找到页面的用户名和密码输入框，点击登录按钮，完成页面的自动化登录操作。selenium工具 -- UI自动化测试工具 webdriver -- 八大元素定位方法 id name XPath，

要用到的语言是py/java

(xpath的表达式验证:) ctrl + F

from selenium import webdriver//导入包 from selenium.webdriver.common.by import By driver = webdriver.Chrome();//用谷歌浏览器打开 driver.get("http://8.129.91.152：8765/Index/login.html")//要打开的页面 driver.find_element(By.NAME,"phone").send_keys("123"); //没有name，没有id，要用XPath(右击代码行=》copy=》复制xpath driver.find_element(By.XPATH,'//input[@name="phone"]').send_keys("123") driver.find_element(By.XPATH,'//input[@type="password"]').send_keys("qwer") driver.find_element(By.XPATH,'//button[@type = "button"]').click()

2.Network（网络）

1.用途:

这是测试用的最多一个模块，主要用于进行测试问题的分析和定位，这个部分记录了前后端的交互，是我们学习F12工具的重点内容

前端和后端信息通过接口传输，Network记录了接口信息:

http请求消息: 请求行、请求头、请求体(客户端发送）

htp响应消息: 响应行，响应头，响应体（服务器回应）

2.抓到的报文分析:

状态: http的响应状态码

方法: http请求方法（get post put patch

域名: 服务器的域名或者IP+端口

文件和类型: html、css js png

发起者: 请求怎么发起的，比如script: 页面是由script脚本处理的时候发送的;传输和代销: 传输的文件及大小

详细报文内容:消息头，cookies，请求，响应，耗时

3.接口测试

右键后点击编辑并重发(chrome浏览器右击包，复制=》以fetch格式复制=》粘贴到控制台，修改参数，回车）
可以修改捕获到的请求的数据（参数）
发送接口请求
检查响应结果

点击新请求

自己手动添加请求地址，请求头，请求体等信息，进行发送。

可以修改参数，请求头，请求地址等，对接口的正常数据+异常数据进行测试

使用场景

前端检查了一些异常数据报错，接口层面是否也有检测这种异常数据的能力呢？所以要对接口进行这些异常数据的测试检查。

3.recorder（记录器，录制按钮）

chrome98版后才有的功能

录制脚本的用途（导入和导出）：

测试的时候一些重复性的工作，可以录制下来进行回放；也可以保存后导入进行repaly（重放）。

录制并进行replay
导出给开发进行replay 复现bug
导入进行replay
进入分析性能页面

4.memory（应用，存储）

用途:

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

本地存储和会话存储主要是前端开发人员在前端设置，一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。（提高访问速度）

本地存储和会话存储的操作代码完全相同，它们的区别仅在于数据的寿命。

本地存储:保存不受时间限制，用于长期保存网站的数据，除非用户自己删除，否则不会消失，并且站内任何页面都可以访问该数据主要用来保存访客将来还能看到的数据。

会话存储:用于临时保存针对一个窗口(或标签页)的数据，保存受时间限制，当前窗口一旦关闭，内容就会被浏览器删除。会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。

案例场景: 比如页面上输入一些内容信息(注册信息)，中途被打断，页面关闭，然后重新打开，能保留上次输入的内容。

Cookies:是下载到您计算机上的小文件。比如访问过的链接，单击的按钮，登录信息或过去访问过的页面，当我们下次访问该网站时，该网站将使用该信息来跟踪我们先前在其网站上的活动。它还可以记住以前输入到表单字段中的信息，例如姓名，日期，出生详细信息，信用卡号等。

Cookies的组成部分:

expires=date: 表示cookie的失效时间,默认是浏览器关闭时失效(可选) --会话默认

path=路径: 访问路径,默认为当前文件所在目录(可选); 设置了之后只有设置的那个路径文件才可以访问cookiesdomain=域名: 访问域名,限制在该域名下访问(可选) = 置的域名才可以访问okies 没有设置默认当前域名secure: 安全设置,如果设置了则必须使用https协议才可获取cookie(可选)

完整格式为:

name=value;[expires=date];[path=路径];[domain=域名];[secure]

cookies紧权:和session配套使用

5.console（控制台）

用途：开发用的测试

打印控制台的查看，用于测试查看报错内容（前端页面报错），前端开发编写js脚本调试前端代码，或打印分析问题。

6.performance（性能）

前端性能后端性能（接口-jmeter LR）

用途: 监控该网页的性能各种指标信息

场景:

当我们在进行大并发的直播互动这种类似的场景下，对浏览器的负荷是比较大的，Performance对网页进行分析就可以评估实时网页性能以及相关的数据。 (直播+ 游戏)

案例:

点击可以开始录制，它会记录用户的交互以及这些交互对页面性能教据的影响,当交互完成后，点击 Stop 来停止 Record，Performance 南板会展示出刚才灵制的页面性能教据

火焰图:

显示性能报告，我们根据性能报告用来分析页面得性能，从而找到性能瓶颈FP5(城率):主要和动画性能有关，代表每秒顿教。图表中的绿色长条越高，说明FPS越高，用户体验越好。如果其中有红色长条，代表着这部分顿数有卡顿，需要优化

NET网络:

主要展示了网络请求的先后顺序以及各自的请求耗时，可以被 Network 面板完美昔代，建议直接查看 Network

summary:

cpu图表的各种颜色表示在这个时间段内，CPU在处理各种时间上面所花费的时间，如果你看到某段颜色占据了大量的比重，就说明这个地方可能存在优化的空间

Main:

主要用来分析西面性能的部分，它属现了主线程在 Record 过程中做的所有事情，包括: LoadingScripting、Rendering等;横抽代表着时间，纵轴代表着调用堆钱，每一个长条代表执行了一个事件或函数，长条的长度代表着托时的长短。如果某个长条右上角是红色的则表示该函数存在性能问题，需要重点关注。

导出&导出火焰图:

导入和导出脚本进行分析，提高给开发进行问题分析/测试导入进行问题复现

3.怎么抓你想要的包

1.从名字去分析

2.清空-进行对应操作（一般来说你只会抓到操作对应的包）-停止

4.怎么看懂包

url:统一资源定位符(包的服务器地址)

http://testingedu.com.cn:8081/inter/index.html

htttp:协议

testingedu.com.cn:8081:域名和端口，也叫主机地址

testingedu.com.cn用域名在cmd中打开可以得到一个ip（ping testingedu.com.cn)，IP又叫IP地址（Internet Protocol Address）是指互联网协议地址，又译为网际协议地址。白话就是一个ip对应互联网一台电脑，现在查看的ip可以对应到特斯订学院的linux服务器电脑，通过8081发布出来

inter/HTTP/login:资源路径，或者叫接口