ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器
一、概要
先看图
京豆多的离谱，你的第一想法肯定是：按F12修改了网页元素
没那么简单，你看支持刷新的
肯定还是假的，通过 Fiddler 或 Wireshark 等抓包工具修改了响应包；或者干脆改了本地host文件，指向了一个自己写的页面......
这些都太麻烦了，如果能在当前网页上拦截这个请求，并修改返回值，那才是最简单的
二、尝试
一个简单的ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div>
<input type="button" value="get_data" id="xhr_get">
</div>
<div>
<p>id -> <span id="id"></span></p>
<p>title -> <span id="title"></span></p>
<p>userId -> <span id="userId"></span></p>
<p>body -> <span id="body"></span></p>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script type="text/javascript">
$('#xhr_get').on('click', function () {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts/1',
type: 'GET',
success: function (data) {
$('#id').text(data.id);
$('#title').text(data.title);
$('#userId').text(data.userId);
$('#body').text(data.body);
}
});
});
</script>
</body>
</html>
运行起来，点下按钮看看
如何拦截这个ajax请求并修改返回内容呢？
可以实现一个自定义的构造函数重写默认的XMLHttpRequest构造函数，使其在触发实际事件之前重写响应即可。按F12在控制台向页面注入代码试试
再次点击按钮，页面已经渲染到新的值了
由此证明，这条路是行的通的，但是不能每次都按F12注入，应该做到自动注入，并把所有拦截规则维护起来
三、Chrome插件
浏览器插件最适合做这个了，新建一个Chrome插件，命名：ModifyAjaxResponse
manifest.json
{
"manifest_version": 3,
"name": "ModifyAjaxResponse",
"description": "Modify response text of ajax requests",
"version": "1.4.0",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"content_scripts.js"
],
"run_at": "document_start"
}
]
}
"run_at": "document_start"，页面加载之前就注入 content_scripts.js，看看其内容
const script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', chrome.runtime.getURL('dist/pageInjectScript.js'));
document.documentElement.appendChild(script);
向每个页面动态加载 pageInjectScript.js，用来重写默认的 XMLHttpRequest 构造函数，实现拦截页面 ajax请求的。打开博客园测试一下
可见 pageInjectScript.js 已经加载进来了，这个不是博客园服务器返回的，而是通过Chrome插件注入到页面上的
还差一个维护所有拦截规则的页面。使用 Chrome API 自带的存储 chrome.storage.local 保存即可。看看最终效果
至此，可以指哪打哪，随意修改页面展示内容了
四、总结
本插件当然不是改京豆数量自嗨用的，实际用途和开发初衷是：前后端对接接口，前端利用本插件，可以快速得到不同的返回值
注：
1）本方法仅重写XMLHttpRequest构造函数，F12网络面板里看到的还是原始返回值，但代码可以获取修改后的值；
2）非开发时间请关闭插件，避免向页面注入无用js
五、相关阅读
六、下载
源码：https://github.com/oppoic/ModifyAjaxResponse
Chrome 商店：https://chrome.google.com/webstore/detail/modifyajaxresponse/odpiadnfijfeggnnodoaaphkkjkmpnia
注：访问不了 Chrome 商店的话，下载源码本地加载src目录
ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器的更多相关文章
- 微信浏览器Ajax请求返回值走error
微信浏览器Ajax post请求是返回值走的error $.ajax({ type: "POST", url: "https://XXXX", cache: f ...
- AJAX请求,返回json进行页面绑值
AJAX请求,返回json进行页面绑值 后台 controller @RequestMapping(value = "backjson.do",method=RequestMeth ...
- Jquery ajax 得到返回值
Jquery ajax 得到返回值 1.ajax默认是异步调用的,所以得到的返回值是空值,要得到值必须改成同步:async: false,//同步. 2.必须定义一个全局变量 var result = ...
- ajax请求返回数据，模板中的数据处理
/*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开 ...
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
- jQuery中ajax如何返回值到上层函数
jQuery中ajax如何返回值到上层函数 一.总结 一句话总结: ajax的同步操作即可,设置 async: false, 二.jquery的同步操作 var can_submit=true; $. ...
- charles_01_打断点修改接口请求&返回数据
前言 测试过程中,为了模拟某场景测试,经常需要修改接口请求或者返回数据.可通过抓包工具打断点,实现模拟测试场景.常用的抓包工具charles和fiddler均可打断点mock数据.由于小编安装了cha ...
- 前后端分离的利器：fiddler的实用功能举例
# 前后端分离的利器:fiddler的实用功能举例 ##what's fiddler fiddler是一款代理软件,对于前后端分离开发非常重要.可以说,如果前端开发没有用上fiddler或类似软件,那 ...
- Ajax与json在前后端中的细节解惑
ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...
- 关于IE浏览器 ajax 请求返回数据不对的问题
在使用ajax向后台发送请求的时候,在使用ie 进行调试的时候发现根据条件进行查询时,返回的数据与没有根据条件进行查询时数据相同,也就是条件没有发生作用. 经过同事的帮助发现ajax初始化设置时没有c ...
随机推荐
- [ElasticSearch] ES集群状态由非正常状态(red)恢复为正常状态(green)的思路与实践
1 场景描述 1.1 资源与原规划 三台主机组成ES集群的规划: 集群名: xxx_elastic 172.15.3.7 es1 master 172.15.3.8 es2 (非master) 172 ...
- Nordic芯片烧录指南
本文讲介绍Nordic系列芯片的烧录方式 一.准备工作 1.硬件 首先需要准备一块Nordic的DK或者Jlink,但是需要注意的是x宝购买的盗版Jlink因为没有license,用一段时间可能会被锁 ...
- mysql的查询--子查询，order by，group by，having
一. 1.多表查询 格式1: select 字段列表 from 表1 join 表2 on 表1.字段1=表2.字段1 where 查询条件 格式2: select 字段列表 from 表1 join ...
- linux CentOS 7上安装Chrome浏览器
目录 linux CentOS 7上安装Chrome浏览器 添加Chrome浏览器的官方存储库,使用以下命令: 安装Chrome浏览器: 确认Chrome浏览器是否安装成功: linux CentOS ...
- vue表单绑定v-model
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Django 静态文件 request对象方法 pycharm和Django连接MySQL Django模型层初步了解 基本的ORM操作
目录 静态文件 一.概念 静态文件:不经常变化的文件,主要针对html文件所使用到的各种资源. 例如:css文件.js文件.img文件.第三方框架文件 ps: Django针对静态文件资源需要单独在根 ...
- qiankun vue子应用升级webpack5问题记录
升级的方式是使用最新版本的 vue-cli 脚手架,重新创建一个新项目,然后复制 @vue/cli-xxx , vue 相关依赖最新版本到子应用项目 -> 核对babel, eslint相关配置 ...
- Linux 升级sudo到 1.9.12p1，解决漏洞CVE-2022-43995
一.查看sudo版本 sudo -V 二.下载最新版本到服务器并解压 wget https://www.sudo.ws/dist/sudo-1.9.12p1.tar.gz && tar ...
- 手机端调试工具vConsole
vConsole 一个轻量.可拓展.针对手机网页的前端开发者调试面板. vConsole 是框架无关的,可以在 Vue.React 或其他任何框架中使用. 现在 vConsole 是微信小程序的官方调 ...
- 2022-07-13：给你一个整数数组 arr ，你一开始在数组的第一个元素处（下标为 0）。 每一步，你可以从下标 i 跳到下标 i + 1 、i - 1 或者 j ： i + 1 需满足：i +
2022-07-13:给你一个整数数组 arr ,你一开始在数组的第一个元素处(下标为 0). 每一步,你可以从下标 i 跳到下标 i + 1 .i - 1 或者 j : i + 1 需满足:i + ...