通过浏览器中F12来查看form表单的提交

挺实用的一个定位bug技巧

 

这里用谷歌浏览器（Chrome）来举一个例子

1.打开F12，打开百度

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

(1)General:

Request URL：请求的URL连接

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

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

Remote Address: 远程地址

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

(2)Response Headers(响应头)

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

Content-Encoding:数据的压缩格式

Content-Type:回送数据的类型

Date:当前时间

Server:服务器的类型

(3)Request Headers(请求头)

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

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

Cache-Control：缓存控制

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

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

Host:访问的主机名

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

 

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

 

2.搜索123

找到对应的链接可以发现Headers中出现了 Query String Parameters ，从中不难发现有个wd，值是123。

就可以看出刚刚我们搜索的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中的出现的字段和对应的值。

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

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

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

 

4.总结

  (1) 像打开百度这个链接www.baidu.com,实际上没有涉及到表单的提交，所以没有Query String Parameters / Form Data也是正常的。

  (2) 一般来说去搜索或者查询都会涉及到form表单的提交，所以搜索123的时候就可以看到前端提交的字段信息和其中存储的值。

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

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

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