admin管理员组文章数量:1565369
挺实用的一个定位bug技巧
这里用谷歌浏览器(Chrome)来举一个例子
1.打开F12,打开百度
选中www.baidu ,再选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是没有表单数据提交的。
2.搜索123
找到对应的链接可以发现Headers中出现了 Query String Parameters ,从中不难发现有个wd,值是123。
就可以看出刚刚我们搜索的123,通过了wd这个字段传递到了后端,然后后端把123的搜索结果的界面返回给我们。
Query String Parameters : 这个代表数据传递的方式是Get请求
把这个链接的URL拿过来就会比较清晰了(我这里只截取了一部分)
https://www.baidu/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,实际上没有涉及到表单的提交,所以没有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。
版权声明:本文标题:通过浏览器中F12来查看form表单的提交 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1725798772a1043310.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论