可通过浏览器开发者工具Network面板抓取XHR/Fetch请求数据，或重写XMLHttpRequest、fetch、WebSocket原型方法拦截请求与响应，还可利用Performance Observer监控资源加载。
如果您尝试获取网页中通过HTML5技术动态加载的数据，例如AJAX请求返回的JSON内容或WebSocket传输的实时信息，则可能需要借助浏览器开发者工具或JavaScript代码进行拦截与提取。以下是实现该目标的具体方法：
一、使用浏览器F12开发者工具Network面板抓取HTTP请求数据
此方法适用于监听页面发起的所有基于HTTP/HTTPS协议的请求，包括XMLHttpRequest和fetch调用，可直接查看请求头、响应体及状态码。
1、在目标网页按F12键打开开发者工具，切换到Network（网络）标签页。
2、刷新页面或触发目标数据加载行为（如点击按钮、滚动到底部等），使相关请求发出。
立即学习“前端免费学习笔记（深入）”；
3、在Network列表中查找类型为XHR或Fetch的条目，点击选中后查看右侧的Response或Preview选项卡。
4、若响应为JSON格式，可直接阅读结构化数据；右键对应请求条目，选择Copy → Copy response保存原始内容。
二、重写XMLHttpRequest原型方法拦截请求与响应
该方法通过覆盖原生XMLHttpRequest构造函数的行为，在请求发送前和响应接收后插入自定义逻辑，从而捕获全部AJAX通信过程中的数据。
1、在开发者工具的Console面板中粘贴并执行以下脚本：
2、const originalOpen = XMLHttpRequest.prototype.open;
3、const originalSend = XMLHttpRequest.prototype.send;
4、XMLHttpRequest.prototype.open = function(method, url) { console.log('XHR open:', method, url); this._url = url; this._method = method; return originalOpen.apply(this, arguments); };
5、XMLHttpRequest.prototype.send = function(data) { this.addEventListener('load', function() { console.log('XHR response:', this.responseText); }); return originalSend.apply(this, arguments); };
三、监听fetch API调用并劫持响应结果
现代网页广泛使用fetch替代XMLHttpRequest，因此需单独处理其全局函数，通过代理方式记录所有请求参数与响应体。
1、在Console中执行以下覆盖代码：
2、const originalFetch = window.fetch;
3、window.fetch = function(resource, options) { console.log('Fetch request:', resource, options); return originalFetch.apply(this, arguments).then(response => { response.clone().json().then(data => console.log('Fetch response data:', data)).catch(() => {}); return response; }); };
四、通过WebSocket事件监听实时数据流
当HTML5页面使用WebSocket建立长连接时，数据通常以消息帧形式持续推送，可通过重写WebSocket原型方法捕获onmessage事件中的payload。
1、在Console中运行如下脚本：
2、const originalWebSocket = window.WebSocket;
3、window.WebSocket = function(url, protocols) { const ws = new originalWebSocket(url, protocols); ws.addEventListener('message', event => console.log('WebSocket message:', event.data)); return ws; };
五、利用Performance Observer监控资源加载与导航事件
该方法不直接拦截请求内容，但可用于识别关键数据接口的URL路径，尤其适合发现未在Network面板明显显示的预加载或异步资源请求。
1、在Console中输入并执行：
2、const observer = new PerformanceObserver(list => { list.getEntries().forEach(entry => { if (entry.initiatorType === 'xmlhttprequest' || entry.initiatorType === 'fetch') { console.log('Performance entry:', entry.name, entry.initiatorType); } }); });
3、observer.observe({ entryTypes: ['resource'] });
