测试⼈员必备技能——如何利⽤F12快速定位前后端BUG
前⾔
在测试⼈员测试过程中经常需要通过抓包来区分⼀些前后端的Bug，特别是Web端的测试，利⽤浏览器中的F12开发者选项，就能进⾏⽹站界⾯测试、调试，分析⽹页所出现的问题，查看html元素、查看响应事件等⽅⾯。
F12开发者⼯具⾯板
⽤Google打开⼀个页⾯，点击键盘右上⽅的F12按钮，弹出F12开发者⼯具⾯板。如下：
1. 元素（Elements）：查⽹页HTML中的任⼀元素,⼿动修改任⼀元素的属性和样式且能实时在浏览器⾥⾯得到反馈。
2. 控制台（Console）：控制台⼀般⽤于执⾏⼀次性代码，查看JavaScript对象，查看调试⽇志信息或异常信息。
3. 源代码（Sources）：该页⾯⽤于查看页⾯的HTML⽂件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试
JavaScript源代码，可以给JS代码添加断点等。
4. ⽹络（Network）：从发起⽹页页⾯请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、⼤⼩、所⽤
时间等），测试⼈员重点要掌握该功能模块。
Network⾯板
1. 窗格功能
：点击后进⼊选择元素模式，然后从页⾯中选择需要查看的元素，然后可以在开发者⼯具元素（Elements）⼀栏中定位到该元素源代码的具体位置 。
：默认开启，会在⾯板进⾏⽹络连接的信息记录，关闭后则不会记录。
：点击清除⽹络请求列表。
：过滤⽹络请求，点击打开Filters控制Requests Table具体显⽰哪些内容。
：重新加载当前页⾯的时候，之前的请求资源信息将会保留。
：是否进⾏缓存。启动开关时页⾯资源不会存⼊缓存，可从Status栏的状态码看⽂件请求状态。
：⽹络连接开关，可设置限速模拟各种⽹络环境下的不同⽤户访问本页的情况。
2.请求资源⾯板
Name：资源名称的URL路径。
点击某个资源的Name可查看该资源的详细信息，根据选择的资源类型显⽰的信息也不太⼀样。
1. Headers：该资源的HTTP头信息。
General
Request URL：资源的请求url（URL和域名的区别：域名就是到 .org就结束了；URL就是除了域名 还有右⾯
的/asl;dajs;dlfsdf.html ⼀长串）
Request Method：HTTP请求⽅法
Status Code：响应状态码——200（状态码） OK（原因短语）、301 - 资源（⽹页等）被永久转移到其它URL、404 - 请求的资源（⽹页等）不存在、500 - 内部服务器错误。
Remote address：请求的远程地址
Referrer policy: Referrer-Policy ⾸部⽤来监管哪些访问来源信息，会在中发送应该被包含在⽣成的请求当中。
Response Headers
1. Connection：keep-alive ——维护客户端和服务端的连接关系
2. Content-Encoding：gzip ——压缩编码类型
3. Content-Type：text/html ——服务端发送的类型及采⽤的编码⽅式
4. Date：Tue, 14 Feb 2021 03:38:28 GMT ——客户端请求服务端的时间
5. Server：nginx/1.2.4 ——服务端的Web服务端名
6. Transfer-Encoding：chunked ——分块传递数据到客户端
7. Vary：告诉下游代理是使⽤缓存响应还是从原始服务器相应
Request Headers
Accept:text/html ——客户端能接收的资源类型
Accept-Encoding:gzip, deflate ——客户端能接收的压缩数据的类型
Accept-Language:en-US,zh;q=0.9——客户端接收的语⾔类型
Connection:keep-alive ——维护客户端和服务端的连接关系
Cookie: ——客户端暂存服务端的信息
Host:www.jnshu ——连接的⽬标主机和端⼝号
Referer:www.jnshu/daily/15052 ——来于哪⾥
2.Preview：根据所选的资源类型（JSON、图⽚、⽂本）显⽰相应的预览
3.Response：显⽰HTTP的Response信息
4.Cookies：显⽰资源HTTP的Request和Response过程中的Cookies信息。
5.Timing：显⽰资源在整个请求⽣命周期过程中各部分花费的时间
status：Http的状态码。
Type：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)。
Initiator：标记请求是由哪个对象或者进程发起的（请求源）。
Size：从服务器下载的⽂件和请求的资源⼤⼩，若是从缓存中取得资源则该列会显⽰“from cache”。
Time：请求或下载的时间，从发起Request到获取到Response所⽤的总时间。
404页面网站源码Waterfall：显⽰所有⽹络请求的可视化瀑布流（时间状态轴），点击时间轴，可查看该请求的详细信息。
定位前后端Bug
1. 定位前端的问题
点击页⾯上的某个按钮⽆反应时，在Console处看到js报错，并在Network中没看到前端对后端的功能接⼝发起调⽤，点击按钮⽆返回数据，⼀般为前端的Bug。
红⾊⽅框圈出来的地⽅是参数，若要求参数不能为空，但上图中如name字段的参数为空，那就是前端传参的错误，如果这⾥的参数错误，那也是前端的问题。
和接⼝⽂档对⽐⼀下参数是否⼀致，如若不⼀致，request url错误，就是前端的BUG，若接⼝⽂档有
这个数据，但实际为空，也是前端的错误。
2.定位后端的问题
preview和response都可以定位后端bug，但是preview更加直观，可以看到所有数据的返回值。⽽response只会返回你选中的那条数据的返回值。
在⽹页点击某个按钮⽆反应时，在Console处看到js没有报错，并在Network中看到请求返回的状态码是500，那么这个BUG就是由后端导致的。
上图response和preview的返回值内容如果为空或者返回值不对，那就是后端的Bug。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。