Ajax学习:如何在Chrome网络控制台查看通信报文（请求报文/响应报文）

最新推荐文章于 2024-05-31 15:58:47 发布
最新推荐文章于 2024-05-31 15:58:47 发布
阅读量7k 收藏 14
点赞数 3
分类专栏： Ajax 文章标签： 网络 学习 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/128073742
版权

第一步：F12开启控制台，

第二步骤：打开网络标签

然后刷新页面

在网络标签位置处，这时候会出现所有发送的请求

 点击第一个：会出现内容

 预览部分:是解析 观察解析结果处

标头=headers:主要观察请求头和请求体部分

GET请求部分 

请求标头：

 点击上方查看源代码：就会出现请求行（请求类型 GET/POST等+url请求路径（网址后面）+ HTTP协议的版本、（HTTP/1.1等））--是get请求，请求体内容是空的

 查询字符串参数，是对请求报文中的请求行中的url参数进行解析（可以准确看到参数是否有成功发送）---是请求体部分

没有参数--这是get请求（有请求参数）

对url参数解析 （有参数）

 

查看响应标头（包含响应头+行）部分

点击查看源代码部分 （包含了响应行+响应头）

 响应体：在响应部分是html内容 （服务端返回的内容）

 

POST请求部分--使用插件powtwoman

查看请求标头源代码部分

 请求体在在负载里面--表单数据中--这是post

原始请求体内容在查看原代码处，点击发送按钮，浏览器帮我们将http报文封装好，发送到目标服务器的指定端口

 

 如果响应的内容是跳转，在响应中看不到

¡Venceremo
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax Interceptor一个用于修改 ajax 请求响应的 chrome 扩展
04-21
Ajax Interceptor一个用于修改 ajax 请求响应的 chrome 扩展，修改ajax请求并返回结果的ch 注意事项 不需要使用该插件直接关闭插件 安装完成后需要刷新页面 该插件修改了全局的XMLHTTPRequest对象和fetch方法里的...
【Chrome控制台】network选项卡的使用
owo_ovo的博客
03-26 3075
【Chrome控制台】network选项卡的使用
&3 在浏览器中查看请求报文和响应报文
sanda_nd的博客
06-29 1万+
1、在搜索网页中按下F12（以chrome浏览器为例） 2、点击 Network，此时下方没有内容，可以刷新页面；点击第一个文件 3、 蓝色标注为响应头，黄色标注为请求头，红色标注为响应体（由于为 GET 请求，因此没有请求体，POST 请求的请求体会在请求头的下面显示）4、点开响应头，点击右面的 View source；最顶部的代码即为响应行（请求行同理）...
【前端爬虫】关于如何获取自己的请求头信息(user-agent和cookie)
weixin_47040861的博客
05-31 962
注意：由于user-agent和cookie中保存了部分账户信息，所以一定不要随意泄露给他人！！！ 1.首先打开某个页面，点击键盘的F12键进入控制台，或者鼠标右键页面选择打开控制台
如何用chrome查看表单post提交的数据
hkhl_235的博客
12-08 2万+
例如PUST提交表单后，想查看提交的内容， 用在在客户端上包装数据 F12-Network-Headers拉到最下边可以看见username=zhang&password=1 拉到下边点击viewsource 可以看见提交的post数据 ...
Chrome-谷歌浏览器-查看http报文-跟踪访问链接
插件开发
06-25 2169
Network->XHR，如下图所示： 产生访问链接，查看对应信息。 POST /userapi/login/login HTTP/1.1 Host: 8.131.79.162 Connection: keep-alive Content-Length: 76 Accept: application/json, text/javascript, /; q=0.01 X-Requested-With: XMLHttpRequest User-Agent: Mozilla/5.0 (Windows NT 10
chrome浏览器自带的开发者工具查看http头以及详解http头
热门推荐
日拱一卒无有尽，功不唐捐终入海
05-09 4万+
HTTP/1.0 的性能和可扩展性都存在一定的局限性。HTTP 请求头和响应头是 HTTP 协议中非常重要的组成部分，本文将详细介绍常见的 HTTP 请求头和响应头，以及它们的作用和场景，同时还会对比不同 HTTP 协议版本中的差异。HTTP/1.0 默认使用非持久连接，即每次请求都需要建立一个新的连接，而 HTTP/1.1 默认使用持久连接，即多个请求可以使用同一个连接。HTTP/1.0 和 HTTP/1.1 是 HTTP 协议的两个主要版本，而 HTTP/2.0 是 HTTP 协议的最新版本。
web问题定位：F12，如何找到对应接口
crhnb的博客
06-09 3445
接口查看法，是我们最常用的定位前后端问题的方法。即：一般用来查看是后端返回给前端的数据有误，还是前端显示有误。主流浏览器（如Chrome，FireFox，等）都有自带的接口查看工具，可以通过F12（设置–工具–开发者工具）开启抓包。每进行一个操作，一般都会调用对应的接口，在NetWork中可以看到当前页面发送的每个请求。
chrome扩展插件获取ajax请求记录
04-06
这些插件可以在后台监听和记录所有的网络请求，包括Ajax请求，以便开发者进行分析。 以"Network"面板为例，这是Chrome开发者工具的一个核心部分，它可以详细展示页面加载过程中的所有网络活动，包括Ajax请求。每条...
HTTP报文及ajax基础知识
10-19
客户端传递给服务器的内容 和 服务器传递给客户端的内容 都属于HTTP报文。Ajax是客户端JS中的方法，用来向服务端发送请求,下面通过本文给大家分享HTTP报文及ajax基础知识，感兴趣的朋友一起看看吧
chrome插件，修改对应URL的http请求的header头，包括ajax请求
最新发布
06-25
chrome插件 1. 根据正则表达式指定URL 2. 对自定义header头的修改对url正则表达式有效 3. 自定义header对页面中的ajax代码依然有效 4. 自定义header对页面中的css、js文件依然有效 5. 自定义header可对浏览器中所有...
AJAX-Debugger:Chrome扩展程序，它将所有AJAX（XMLHttpRequest）活动记录到开发工具控制台，允许检查AJAX调用，并在新标签页中打开调用
05-15
AJAX调试器会将所有AJAX（XMLHttpRequest）活动记录到Chrome的开发者工具控制台。 这使开发人员可以轻松查看顶级请求信息，例如HTTP状态，响应时间和大小。 单击URL在新选项卡中打开AJAX调用，包括所有输入，从而使...
简单实用的Chrom浏览器模拟POST请求方式
努力奋斗
02-24 3万+
实现post请求方式有很多种，比如postman等，但是有时候接口做了登录拦截，这个时候使用postman等工具要配置相关的cookie等信息，这个过程是很繁琐，最后也不一定能达到预期效果。 本篇使用chrom的console控制台，满足你的诉求 步骤如下： 1.打开控制台-如下图所示（或者浏览器页面右键->检查->切换到console控制台即可） 2.控制台输入如下代码 fetch(new Request('url地址',{method:'POST'})).then((r..
介绍一下主流的浏览器的开发者工具(js调试和查看网络请求）
pythonxxoo的博客
01-16 1649
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 1、打开开发者工具：右键–>检查 (快捷键 f12) 2、开发者工具介绍： （1）： 选择页面的dom进行查看 （2）：设备适配 （3）元素： ① 可以查找到界面对应的dom； ② 通过计算样式，查看盒模型； ③ 在元素上选择右键，还可以：[当我们看到某个网站的css样
网络复习之TCP报文段的详细解析
qq2904529388的博客
03-20 2559
举个例子:当主机B中的接收缓冲区只剩下1000字节大小的时候，那么主机B会将回应过去的Tcp协议中的窗口大小是1000,当主机A收到主机B的响应后，通过响应的窗口大小判断出主机B的接收缓冲区剩余的大小，因此下一次主机A给主机B发送数据的时候是不会超过1000个字节的数据，这样就可以防止主机B接收缓冲区满了之后出现丢包的情况。假设主机A收到主机B的1~1000的所有字节，同时假设它要发送一个报文段给主机B，主机A等待主机B中1001即其以后的字节，那么主机A会在报文段的确认序号字段填充上1001.
如何在浏览器中获得请求头Headers的信息
sunshine2304的博客
02-14 1万+
浏览器中获取网页的头部Headers信息
HTTP1.1(三)如何用Chrome的Network面板分析HTTP报文
wzj_110的博客
05-14 272
认识Network面板。如何用Chrome的。
利用chrome控制台调试post请求
清雨小竹
09-09 8307
F12打开开发者模式，在控制台内粘贴代码。 var url = "http://127.0.0.1:8080/open/test"; var params = { "ids": [11] }; var xhr = new XMLHttpRequest(); xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onload = function(e) { if
如何在chrome浏览器中抓取POST数据包
luluzsa的博客
01-06 5914
1.首先打开chrome浏览器，然后按F12，选择network菜单，如下图 ch 然后选中其中的filter，在其中输入method:POST,然后登陆网站就可以抓到POST的数据包，如下图
写个chrome插件 要求：拦截ajax请求并修改返回结果
06-11
好的，下面是大致的步骤： 1. 创建一个新的Chrome插件项目，可以在manifest.json文件中指定需要的权限，例如拦截网络请求和访问DOM。 2. 在background.js文件中编写拦截请求的代码。可以使用chrome.webRequest.onBeforeRequest监听XMLHttpRequest和fetch请求，并在回调函数中修改响应结果。 ```javascript chrome.webRequest.onBeforeRequest.addListener( function(details) { // 拦截请求并修改响应结果 return {redirectUrl: "data:text/plain;charset=UTF-8," + encodeURIComponent("Hello, World!")}; }, {urls: ["<all_urls>"]}, ["blocking"] ); ``` 3. 在manifest.json文件中指定需要注入的内容脚本，例如可以在所有页面注入一个JS文件，以便在页面上修改响应结果。 ```json "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] ``` 4. 在content.js文件中编写修改响应结果的代码。可以使用MutationObserver监听DOM的变化，并在回调函数中修改响应结果。 ```javascript var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // 修改响应结果 mutation.target.textContent = "Hello, World!"; }); }); observer.observe(document, {subtree: true, characterData: true, childList: true}); ``` 5. 打包并安装插件。在Chrome浏览器中打开扩展程序页面，点击“加载已解压的扩展程序”按钮，选择插件的根目录，即可安装插件并测试拦截和修改请求的功能。 以上是一个简单的拦截和修改请求的Chrome插件的步骤，具体实现还需要根据自己的需求进行调整。希望这些信息能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值