chrome开发调试小技巧—Replay XHR（重新请求）

最新推荐文章于 2024-03-11 14:57:43 发布
最新推荐文章于 2024-03-11 14:57:43 发布
阅读量2.2k 收藏
点赞数
文章标签： chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010865136/article/details/131540847
版权

一、需求

想要验证一个ajax请求，需要每次都需要在页面点几次才会触发或者刷新页面，着急调试看效果时，可以通过chrome的Replay XHR功能直接同参数重新请求ajax

二、实现

chrome调试工具network下找到要重新发起的ajax请求，右键找到Replay XHR点击即可重新请求

 

zpjing~.~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
reXHRTools-crx插件
03-26
语言:English (United States) A tool about replay XHR ## 工具介绍 一款用于 chrome 下的 HTTP 包重放工具 HTTP 请求记录又 2 种模式，一种为记录全部标签页的请求，另一种为记录当前`devtool`所在标签页的请求。 ## 使用流程 - F12 打开后，选到 reXHR 标签。 - 选择监听方式。 - 选择 view 即可修改 HTTP 请求。对于 POST 的 HTTP 请求，可以添加 body 的参数。 ## 注意事项 - 在进行 POST 的时候，将以`application/x-www-form-urlencoded`的类型添加参数。 - 如无特殊需求，请自行删除`content-length`的内容。 - 重放某些攻击不生效可能原因是请求了缓存，通常对于图片会发生这种情况。可以勾选`Network`选项卡种的`Disable cache`
谷歌浏览器手动重新发送请求
qq_31794615的博客
08-09 1万+
谷歌浏览器重新发送请求
chrome浏览器Network重放重新发送网络请求方法
最新发布
03-11 3462
1. 打开Chrome浏览器，并进入需要重放HTTP请求的网页。2. 在Chrome浏览器中，按下“F12”键，或者点击菜单栏中的“更多工具” -> “开发者工具”，打开开发者工具面板。3. 在开发者工具面板中，选择“Network”选项卡，在该选项卡下，可以看到所有的HTTP请求和响应信息。4. 找到需要重放的HTTP请求，右键点击该请求，并选择“Replay XHR”选项，即可重放该请求。
谷歌浏览器重发请求
youdiban9221的博客
06-19 265
网络->右键->复制，以fetch复制->粘贴至console->添加下面这段代码。时隔多年，从一个码农变成菜鸡了。最近换了工作，终于有空，又上来写点东西。
写了一个chrome插件：拦截ajax请求并修改返回结果
Y__G__Y的博客
04-24 9608
这个插件可以拦截页面上的 ajax 请求，并把返回结果替换成任意文本。它对 mock 数据、排查一些线上问题等会有很大帮助。（当然 chales 等抓包软件也可以做到，然而使用起来比较繁琐，做成 chrome 插件的形式会方便许多） 使用示例（视频） weibo.com/tv/v/HlVZD8cR9?fid=1034:4352275389595232 Chrome 商店地址 地址：http...
开发中的小tips
冷月心的博客
05-30 464
开发中的小tips
request-replay:通过 Rack env 重放请求
06-28
请求重放 by( ) 链接： 描述： 通过 Rack env 重放请求 要求： 使用 MRI（官方 CRuby）、Rubinius 和 JRuby 进行测试。 安装： gem install request-replay 概要： 您可能希望将其用作中间件来重播请求： 请...
Cygwin及windows上安装tcpreplay必要软件
06-07
在Windows操作系统上，为了进行网络数据包的回放和分析，常常需要用到tcpreplay这款工具。tcpreplay是一个开源的网络测试工具，主要用于在网络设备、应用程序或者服务上重放捕获的数据包，这对于网络性能测试、故障...
Portapack应用开发教程（二）代码结构
01-07
由于我要做的程序基本是replay改的，所以我只要找到replay程序所在的几个代码的目录，然后依样画葫芦，写一个类似的程序即可，除此之外还要把自己写的cpp文件加到相应的CMakeLists.txt里去就行了。 我看了一下几个...
linux设备tcpreplay安装
06-17
在Linux设备上安装tcpreplay包回放工具
xhr-devtool-crx插件
04-02
xhr-devtool-crx插件是一款专为开发者设计的Chrome扩展程序，主要功能是帮助开发者在进行Web应用开发和调试时，能够便捷地查看和修改XMLHttpRequest（XHR）请求的响应结果。这款插件以中文（简体）界面呈现，使得...
元数据与数据治理实战｜ Google Chrome抓包分析详解（7）
十年呵护的专栏
01-27 1360
开篇点题 虽然和数据主力关系不大，在学习的过程当中，无意穿插了爬虫的知识，也就有了此篇的抓包分析，感兴趣的可以看下，还是有用的。 正文部分 前言：因作LaGou网翻页教程，频繁访问，导致IP被封，所以先来篇我们该如何抓包。 目标：学会利用Chrome浏览器的开发者工具进行HTTP请求分析 一：什么是抓包 即抓取我们本地电脑与远端服务器通信时候所传递的数据包 二：Chrome浏览器讲解...
Chrome 浏览器调试的日常使用总结
薛定谔的猫-前端领域
04-27 4349
这篇文章对日常开发中使用 Chrome 浏览器进行调试的方法总结。 使用 F12 或右键“检查（Inspect Element）”即可打开浏览器的调试工具（笔者使用的 Mac,Windows 也是一样的）。 1. 强制激活伪类 网页中一些动效是基于例如:active、:hover等，当鼠标移动到控制台时，这些伪类就不生效，在控制台中也无法调试css样式，此时可以使用强制激活伪类 选中具有伪类效果的元素 点击:hov 根据代码情况，勾选相应伪类 在styles面板可动态调试伪类样式 或者在元.
Python爬虫（入门+进阶）学习笔记 3-1 爬虫工程师进阶（七）：HTTP请求分析
kissazhu的博客
06-30 1656
Chrome浏览器相对于其他的浏览器而言，DevTools（开发者工具）非常强大。这节课将为大家介绍怎么利用Chrome浏览器的开发者工具进行HTTP请求分析Chrome浏览器讲解Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析打开Chrome开发工具在Chrome菜单中选择更多工具 >开发者工具在页面元素上右键点击，选...
XHR简介及基本使用
wenxin_liu的博客
06-14 7422
XHR简介 XHR是XMLHttpRequest 的简写 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。XHR接口强制要求每个请求都具备严格的HTTP语义–应用提供数据和URL，浏览器格式化请求并管理每个连接的完整生命周期，所以XHR仅仅允许应用自定义一些HTTP首部，但更多的首部是不能自
谷歌控制台操作备注
sven_chen93的博客
04-17 507
1.alt加点击，element全部展开 2.Ctrl+shift+p 选择截图全部 9.重新发送请求，replay XHR（重放XHR） 3.xhr点击copy 选择copy as fetch，控制台输入 可以修改传参 4.精确点击后 0可以获取这个元素5.0可以获取这个元素 5.0可以获取这个元素5._ 返回console控制台上次的输出结果 6.Ctrl+shift+p 输入theme（主题），切换黑色或亮色主题 7.$(‘h1’) ==> document.querySe
Chrome浏览器地址栏访问接口url，重复请求问题解决
热门推荐
一点点进步
04-06 1万+
今天在Chrome浏览器调试接口时，发现会请求两次接口，但是换Firefox浏览器就没有这个问题，后来发现是Chrome浏览器Jsonview插件的原因导致的。 将图片中红色框内的勾去掉即可，如果选择了该项，那么浏览器会被强制重复发送一次HTTP请求来获取原始HTTP内容。
chrome浏览器的跨域设置并测试发送post请求及简单渲染
jackie_bobo的博客
07-12 6922
window用户win+r打开cmd命令行，如果你的环境变量没有问题的话，直接输入chrome即可新建一个chrome进程。chrome版本号为49之后可以直接通过在命令行输入--disable-web-security --user-data-dir=C:\Users\Administrator\Desktop\MyChromeDevUserData ,–user-data-dir的值就是刚才...
谷歌浏览器怎么重发请求_chrome浏览器上post提交两次怎么解决
weixin_39722025的博客
12-30 819
Chrome is preflighting the request to look for CORS headers. If the request is acceptable, it will then send the real request. If you're doing this cross-domain, you will simply have to deal with it o...
replay xhr
01-10
XHR 是 XMLHttpRequest 的缩写，它是一种可以在不重新加载整个页面的情况下，通过 JavaScript 发送 HTTP 请求和接收服务器响应的技术。在网页开发中，我们经常会用到 XHR 来实现异步数据交互，比如获取远程数据、发送表单数据等等。 要实现一个简单的 XHR 请求，我们可以通过以下几个步骤来操作： 1. 创建一个 XMLHttpRequest 对象 2. 指定请求的方法、URL 和是否异步 3. 发送请求 4. 监听 XHR 对象的状态变化，并在接收到响应后处理数据 下面是一个简单的示例代码： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.send(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { console.log('成功收到响应：', xhr.responseText); } else { console.log('请求出错：', xhr.status); } } }; ``` 在这个例子中，我们创建了一个 XHR 对象，并使用 GET 方法向 https://api.example.com/data 发送了一个异步请求。然后，我们监听 XHR 对象的状态变化，当 readyState 变为 XMLHttpRequest.DONE 时，表示请求完成。此时我们可以通过 status 属性来判断请求的状态，通过 responseText 属性来获取服务器返回的数据。 总之，XHR 是一种非常有用的技术，可以让我们在网页中实现更加流畅的用户体验，并为用户提供更加丰富的交互功能。希望这个回答能够帮助你更好地了解并使用 XHR。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值