一、概要

先看图

ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器

京豆多的离谱，你的第一想法肯定是：按F12修改了网页元素

没那么简单，你看支持刷新的

ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器

肯定还是假的，通过 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>

运行起来，点下按钮看看

ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器

如何拦截这个ajax请求并修改返回内容呢？

可以实现一个自定义的构造函数重写默认的XMLHttpRequest构造函数，使其在触发实际事件之前重写响应即可。按F12在控制台向页面注入代码试试

ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器

再次点击按钮，页面已经渲染到新的值了

由此证明，这条路是行的通的，但是不能每次都按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请求的。打开博客园测试一下

ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器