挺实用的一个定位bug技巧

 

这里用谷歌浏览器(Chrome)来举一个例子

1.打开F12,打开百度

选中www.baidu.com ,再选Headers,就可以看到

F12 怎么查看request body f12查看请求_form表单

(1)General:

Request URL:请求的URL连接

Request Method: 使用的是Get请求的方法

Status Code: 状态码,200一般是指成功

Remote Address: 远程地址

Referrer Policy:一般指服务端请求来源

F12 怎么查看request body f12查看请求_字段_02

(2)Response Headers(响应头)

Connection:处理完这次请求后,是断开连接还是继续保持连接

Content-Encoding:数据的压缩格式

Content-Type:回送数据的类型

Date:当前时间

Server:服务器的类型

F12 怎么查看request body f12查看请求_搜索_03

(3)Request Headers(请求头)

Accept:用户机支持的数据类型

Accept-Encoding:用户机支持的数据压缩格式

Cache-Control:缓存控制

Connection:处理完这次请求,是断开连接还是保持连接

Cookie:用户机通过这个向服务器传数据

Host:访问的主机名

F12 怎么查看request body f12查看请求_form表单_04

注:这里没有每个都介绍,因为我感觉平常没怎么用到这些数据,有兴趣可以自行百度查阅。

 

可以看到General、Response Headers(响应头)和Request Headers(请求头)三个,由此可以得出www.baidu.com是没有表单数据提交的。

 

2.搜索123

找到对应的链接可以发现Headers中出现了 Query String Parameters

就可以看出刚刚我们搜索的123,通过了wd这个字段传递到了后端,然后后端把123的搜索结果的界面返回给我们。

Query String Parameters : 这个代表数据传递的方式是Get请求

把这个链接的URL拿过来就会比较清晰了(我这里只截取了一部分)

https://www.baidu.com/s?wd=123&rsv_spt=1&rsv_iqid=0xb49a7530000cc7de&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn

这时候我们就可以发现问号之后的传递的参数名和值,比如我们搜索了123,可以看到有一个URL中有 wd=123,实际上wd就是用来存储我们搜索内容的字段。(注:&是分隔符,?之后才是请求参数)

不难发现Query String Parameters中可以看到URL中的出现的字段和对应的值。

F12 怎么查看request body f12查看请求_form表单_05

3.当我们用POST请求时就会出现Form Data

用一个简单的页面做个例子,form表单传递参数的方式使用了post。

F12 怎么查看request body f12查看请求_搜索_06

点击注册后过来查看链接,就能看到Form Data。这5个字段名称对应着页面的5个输入框的值。

F12 怎么查看request body f12查看请求_字段_07

 

4.总结

实际上没有涉及到表单的提交,所以没有Query String Parameters / Form Data也是正常的。

提交的字段信息和其中存储的值。

(3)通过查看Headers可以看到一些从前端传递过来的值,由此我们就可以用来判断form表单是否成功提交。

         如果你明明提交了form表单,后端却拿不到值,那你就可以通过查看F12中的Headers来看看form表单的字段是否是真的提交成功了。(之前遇到过这种情况,明明后端代码都没啥问题,就是拿不到前端传过来的值,后面才发现前端的代码有误,没有正确识别到<form></form>之前的内容。所以可以用这个方法来判断前端的代码是否出现这种错误)

(4)根据数据传递的方式我们在Headers中能看到的东西也是不一样的,Get请求我们会看到Query String Parameters,Post请求我们会看到Form Data。