浏览器F12调试如何捕获所有返回302请求的代码发起位置？-Go服务器开发

在浏览器开发者工具（F12）中捕获所有返回 302 重定向 请求的发起位置，可以通过以下步骤实现：

1. 使用 Network 面板过滤并追踪

步骤：

打开开发者工具
- 按 F12 或右键选择“检查” → 切换到 Network（网络）面板。
启用持久化记录
- 勾选 ✅ Preserve log（保留日志），确保页面跳转后请求记录不被清空。
过滤 302 请求
- 在筛选框输入以下条件之一：
  - status-code:302
  - status:302
  - method:POST|GET status:302（按需组合）。

分析请求详情

点击任意一条 302 请求 → 查看以下关键字段：

General:

   - `Request URL`: 被重定向的原始 URL。  
   - `Status Code`: `302 Found` + `Location`（目标 URL）。

Initiator: （核心字段）显示触发请求的代码位置，可能为：

   - JS文件及行号（如 `app.js:123`）。  
   - HTML表单提交（如 `<form>`）。  
   - Fetch/XHR调用栈（点击可展开）。

追踪调用栈
- 若 Initiator 显示为 JavaScript，点击文件名链接跳转到源码，查看完整调用栈（Call Stack）。

2. XHR/Fetch API 监听

如果是通过 JavaScript（如 Fetch/AJAX）触发的重定向：

// Monkey Patch：劫持 Fetch API
const originalFetch = window.fetch;
window.fetch = async function(...args) {
    const response = await originalFetch(...args);
    if (response.redirected || response.status === 302) {
        console.trace("Redirect detected:", args[0], "→", response.url);
    }
    return response;
};

// Monkey Patch：劫持 XMLHttpRequest
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
    this.addEventListener('readystatechange', function() {
        if (this.readyState === XMLHttpRequest.DONE && 
            (this.status === 302 || this.responseURL !== url)) {
            console.trace("XHR Redirect:", url, "→", this.responseURL);
        }
    });
    originalOpen.apply(this, arguments);
};

效果: Console面板会打印所有通过代码触发的重定向及其调用栈。

3. DOM/全局事件监听

如果是用户交互触发的重定向（如点击链接、表单提交）：

// 监听所有 <a> 标签点击
document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', (e) => {
        if (e.target.href && !e.defaultPrevented) { 
            console.trace("Link redirect:", e.target.href); 
        }
    });
});

// 监听表单提交
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', (e) => { 
        console.trace("Form redirect:", e.target.action); 
    });
});