☰

Ajax请求监听器

监听Ajax请求，按F3启动/关闭

// ==UserScript==
// @name         Ajax请求监听器
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  监听Ajax请求，按F3启动/关闭
// @author       xiaoma
// @match         *://*/*
// @grant        none
// @run-at       document-start
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 配置参数
    const CONFIG = {
        hotkey: 'F3', // 激活热键
        maxRecords: 200, // 最大记录数
        autoScroll: true // 自动滚动到最新记录
    };

    // 状态管理
    let isListening = false;
    let ajaxRecords = [];
    let recordIndex = 0;
    let monitorPanel = null;
    let currentFilters = {
        searchText: '',
        method: 'all',
        status: 'all',
        searchReverse: false,
        methodReverse: false,
        statusReverse: false
    };

    // 原始Ajax方法备份
    const originalXHR = window.XMLHttpRequest;
    const originalFetch = window.fetch;

    // 创建监控面板
    function createMonitorPanel() {
        if (monitorPanel) return;

        // 创建面板容器
        monitorPanel = document.createElement('div');
        monitorPanel.id = 'ajax-monitor-panel';
        monitorPanel.innerHTML = `
            <div class="ajax-monitor-header">
                <h3>🔍 Ajax监听器</h3>
                <div class="ajax-monitor-controls">
                    <button id="clear-records" title="清空所有记录">🗑️ 清空</button>
                    <button id="export-records" title="导出为JSON文件">📥 导出</button>
                    <button id="toggle-auto-scroll" title="开启/关闭自动滚动">📜 滚动</button>
                    <button id="close-monitor" title="关闭监听器">❌ 关闭</button>
                </div>
            </div>
            <div class="ajax-monitor-stats">
                <span>📊 总请求: <span id="total-count">0</span></span>
                <span>✅ 成功: <span id="success-count">0</span></span>
                <span>❌ 失败: <span id="error-count">0</span></span>
                <span>⏱️ 平均耗时: <span id="avg-time">0</span>ms</span>
            </div>
            <div class="ajax-monitor-filters">
                <div class="filter-group">
                    <label>🔍 搜索:</label>
                    <input type="text" id="filter-search" placeholder="搜索URL、状态码..." />
                    <button id="search-reverse" class="reverse-btn" title="启用反向搜索，排除匹配的记录">🚫 反向</button>
                </div>
                <div class="filter-group">
                    <label>📝 方法:</label>
                    <select id="filter-method">
                        <option value="all">全部</option>
                        <option value="GET">GET</option>
                        <option value="POST">POST</option>
                        <option value="PUT">PUT</option>
                        <option value="DELETE">DELETE</option>
                        <option value="PATCH">PATCH</option>
                    </select>
                    <button id="method-reverse" class="reverse-btn" title="启用反向方法过滤，排除选中的方法">🚫 反向</button>
                </div>
                <div class="filter-group">
                    <label>📊 状态:</label>
                    <select id="filter-status">
                        <option value="all">全部</option>
                        <option value="success">成功 (2xx)</option>
                        <option value="error">失败 (4xx/5xx)</option>
                        <option value="pending">进行中</option>
                    </select>
                    <button id="status-reverse" class="reverse-btn" title="启用反向状态过滤，排除选中的状态">🚫 反向</button>
                </div>
                <div class="filter-group">
                    <button id="clear-filters" title="清空所有过滤条件">🗑️ 清空过滤</button>
                </div>
            </div>
            <div class="ajax-monitor-content">
                <div class="ajax-records-list" id="ajax-records-list">
                    <div class="ajax-record-header">
                        <div class="col-time">时间</div>
                        <div class="col-method">方法</div>
                        <div class="col-url">URL</div>
                        <div class="col-status">状态</div>
                        <div class="col-duration">耗时</div>
                        <div class="col-actions">操作</div>
                    </div>
                </div>
            </div>
            <div class="ajax-monitor-footer">
                <span>💡 提示: 按 F3 关闭监听 | 最多显示 ${CONFIG.maxRecords} 条记录</span>
            </div>
        `;

        // 添加样式
        const style = document.createElement('style');
        style.textContent = `
            #ajax-monitor-panel {
                position: fixed;
                top: 20px;
                right: 20px;
                width: 900px;
                max-height: 80vh;
                background: #fff;
                border: 2px solid #007acc;
                border-radius: 12px;
                box-shadow: 0 8px 32px rgba(0,122,204,0.2);
                z-index: 2147483647;
                font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
                font-size: 13px;
                backdrop-filter: blur(10px);
                resize: both;
                overflow: hidden;
                min-width: 600px;
                min-height: 400px;
            }

            /* 缩放指示器 */
            #ajax-monitor-panel::after {
                content: '';
                position: absolute;
                bottom: 2px;
                right: 2px;
                width: 16px;
                height: 16px;
                background: linear-gradient(-45deg, transparent 40%, #007acc 40%, #007acc 60%, transparent 60%);
                cursor: nw-resize;
                opacity: 0.6;
                border-radius: 0 0 10px 0;
            }

            #ajax-monitor-panel:hover::after {
                opacity: 1;
            }

            .ajax-monitor-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 12px 16px;
                background: linear-gradient(135deg, #007acc, #0099ff);
                color: white;
                border-radius: 10px 10px 0 0;
                cursor: move;
            }

            .ajax-monitor-header h3 {
                margin: 0;
                font-size: 16px;
                font-weight: 600;
            }

            .ajax-monitor-controls button {
                margin-left: 8px;
                padding: 6px 12px;
                border: none;
                background: rgba(255,255,255,0.2);
                color: white;
                border-radius: 6px;
                cursor: pointer;
                font-size: 12px;
                transition: all 0.2s;
                backdrop-filter: blur(5px);
            }

            .ajax-monitor-controls button:hover {
                background: rgba(255,255,255,0.3);
                transform: translateY(-1px);
            }

            .ajax-monitor-stats {
                padding: 10px 16px;
                background: #f8f9fa;
                border-bottom: 1px solid #e9ecef;
                font-size: 12px;
                display: flex;
                gap: 20px;
            }

            .ajax-monitor-stats span {
                color: #495057;
                font-weight: 500;
            }

            .ajax-monitor-filters {
                padding: 12px 16px;
                background: #ffffff;
                border-bottom: 1px solid #e9ecef;
                display: flex;
                gap: 16px;
                align-items: center;
                flex-wrap: wrap;
            }

            .filter-group {
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .filter-group label {
                font-size: 12px;
                color: #495057;
                font-weight: 500;
                white-space: nowrap;
            }

            .filter-group input,
            .filter-group select {
                padding: 6px 10px;
                border: 1px solid #ced4da;
                border-radius: 4px;
                font-size: 12px;
                background: white;
                min-width: 120px;
                transition: all 0.2s;
            }

            .filter-group input:focus,
            .filter-group select:focus {
                outline: none;
                border-color: #007acc;
                box-shadow: 0 0 0 2px rgba(0,122,204,0.1);
            }

            #clear-filters {
                padding: 6px 12px;
                border: 1px solid #6c757d;
                background: #f8f9fa;
                color: #495057;
                border-radius: 4px;
                cursor: pointer;
                font-size: 11px;
                transition: all 0.2s;
            }

            #clear-filters:hover {
                background: #e9ecef;
                border-color: #495057;
            }

            .reverse-btn {
                padding: 4px 8px;
                border: 1px solid #6c757d;
                background: #f8f9fa;
                color: #495057;
                border-radius: 4px;
                cursor: pointer;
                font-size: 10px;
                margin-left: 4px;
                transition: all 0.2s;
                white-space: nowrap;
            }

            .reverse-btn:hover {
                background: #e9ecef;
                border-color: #495057;
            }

            .reverse-btn.active {
                background: #fd7e14;
                color: white;
                border-color: #fd7e14;
                box-shadow: 0 0 0 2px rgba(253,126,20,0.2);
            }

            .reverse-btn.active:hover {
                background: #e8690b;
                border-color: #e8690b;
            }

            .ajax-monitor-content {
                flex: 1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                max-height: 400px;
            }

            .ajax-records-list {
                flex: 1;
                overflow-y: auto;
                overflow-x:hidden;
                max-height: calc(80vh - 160px);
            }

            .ajax-record-header {
                display: grid;
                grid-template-columns: 80px 60px 1fr 80px 80px 160px;
                gap: 8px;
                padding: 10px 16px;
                background: #e9ecef;
                border-bottom: 2px solid #dee2e6;
                font-weight: 600;
                font-size: 12px;
                color: #495057;
                position: sticky;
                top: 0;
                z-index: 10;
            }

            .ajax-record {
                display: grid;
                grid-template-columns: 80px 60px 1fr 80px 80px 160px;
                gap: 8px;
                padding: 10px 16px;
                border-bottom: 1px solid #e9ecef;
                cursor: pointer;
                font-size: 12px;
                transition: all 0.2s;
                position: relative;
            }

            .ajax-record:hover {
                background: #f8f9fa;
                transform: translateX(2px);
            }

            .ajax-record.success {
                border-left: 4px solid #28a745;
            }

            .ajax-record.error {
                border-left: 4px solid #dc3545;
            }

            .ajax-record.pending {
                border-left: 4px solid #ffc107;
            }

            .ajax-record-url {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-family: 'Courier New', monospace;
                min-width: 0; /* 确保在flex/grid布局中正确处理文本溢出 */
            }

            .ajax-monitor-footer {
                padding: 8px 16px;
                background: #f8f9fa;
                border-top: 1px solid #e9ecef;
                font-size: 11px;
                color: #6c757d;
                text-align: center;
            }

            .ajax-detail-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.6);
                z-index: 2147483648;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(3px);
            }

            .ajax-detail-content {
                background: #fff;
                width: 95%;
                max-width: 1200px;
                max-height: 90%;
                border-radius: 12px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            }

            .ajax-detail-header {
                padding: 16px 20px;
                background: linear-gradient(135deg, #007acc, #0099ff);
                color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .ajax-detail-header h3 {
                margin: 0;
                font-size: 16px;
                font-weight: 600;
            }

            .ajax-detail-body {
                padding: 20px;
                overflow-y: auto;
                flex: 1;
                background: #f8f9fa;
            }

            .ajax-detail-section {
                margin-bottom: 24px;
                background: white;
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }

            .ajax-detail-section h4 {
                margin: 0;
                padding: 12px 16px;
                color: #495057;
                font-size: 14px;
                font-weight: 600;
                background: #e9ecef;
                border-bottom: 1px solid #dee2e6;
            }

            .ajax-detail-code {
                padding: 16px;
                overflow-x: auto;
                white-space: pre-wrap;
                word-break: break-all;
                font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
                font-size: 13px;
                line-height: 1.5;
                max-height: 300px;
                overflow-y: auto;
                background: #f8f9fa;
            }

            .close-btn {
                background: rgba(255,255,255,0.2);
                color: white;
                border: none;
                padding: 8px 16px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 13px;
                transition: all 0.2s;
            }

            .close-btn:hover {
                background: rgba(255,255,255,0.3);
            }

            .view-btn {
                background: #007acc;
                color: white;
                border: none;
                padding: 4px 10px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 11px;
                transition: all 0.2s;
            }

            .view-btn:hover {
                background: #0099ff;
                transform: scale(1.05);
            }

            .copy-btn {
                background: #17a2b8;
                color: white;
                border: none;
                padding: 4px 8px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 10px;
                margin-left: 4px;
            }

            .resend-btn {
                background: #28a745;
                color: white;
                border: none;
                padding: 4px 8px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 10px;
                margin-left: 4px;
            }

            .resend-btn:hover {
                background: #218838;
                transform: scale(1.05);
            }

            .curl-btn {
                background: #6f42c1;
                color: white;
                border: none;
                padding: 4px 8px;
                border-radius: 4px;
                cursor: pointer;
                font-size: 10px;
                margin-left: 4px;
            }

            .curl-btn:hover {
                background: #5a32a3;
                transform: scale(1.05);
            }

            .status-success {
                color: #28a745;
                font-weight: 600;
            }

            .status-error {
                color: #dc3545;
                font-weight: 600;
            }

            .status-pending {
                color: #ffc107;
                font-weight: 600;
            }

            .duration-fast {
                color: #28a745;
            }

            .duration-medium {
                color: #ffc107;
            }

            .duration-slow {
                color: #dc3545;
            }

            /* 滚动条美化 */
            .ajax-records-list::-webkit-scrollbar,
            .ajax-detail-code::-webkit-scrollbar {
                width: 8px;
            }

            .ajax-records-list::-webkit-scrollbar-track,
            .ajax-detail-code::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 4px;
            }

            .ajax-records-list::-webkit-scrollbar-thumb,
            .ajax-detail-code::-webkit-scrollbar-thumb {
                background: #c1c1c1;
                border-radius: 4px;
            }

            .ajax-records-list::-webkit-scrollbar-thumb:hover,
            .ajax-detail-code::-webkit-scrollbar-thumb:hover {
                background: #a8a8a8;
            }

            /* 编辑请求模态框样式 */
            .ajax-edit-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.6);
                z-index: 2147483649;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(3px);
            }

            .ajax-edit-content {
                background: #fff;
                width: 95%;
                max-width: 800px;
                max-height: 90%;
                border-radius: 12px;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            }

            .ajax-edit-body {
                padding: 20px;
                overflow-y: auto;
                flex: 1;
                background: #f8f9fa;
            }

            .ajax-edit-form {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }

            .ajax-edit-group {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .ajax-edit-group label {
                font-weight: 600;
                color: #495057;
                font-size: 14px;
            }

            .ajax-edit-group input,
            .ajax-edit-group select,
            .ajax-edit-group textarea {
                padding: 10px 12px;
                border: 1px solid #ced4da;
                border-radius: 6px;
                font-size: 13px;
                font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            }

            .ajax-edit-group textarea {
                min-height: 120px;
                resize: vertical;
            }

            .ajax-edit-actions {
                display: flex;
                gap: 12px;
                justify-content: flex-end;
                padding: 16px 20px;
                background: #f8f9fa;
                border-top: 1px solid #dee2e6;
            }

            .ajax-edit-actions button {
                padding: 10px 20px;
                border: none;
                border-radius: 6px;
                cursor: pointer;
                font-size: 13px;
                font-weight: 500;
                transition: all 0.2s;
            }

            .send-btn {
                background: #007acc;
                color: white;
            }

            .send-btn:hover {
                background: #0099ff;
            }

            .cancel-btn {
                background: #6c757d;
                color: white;
            }

            .cancel-btn:hover {
                background: #5a6268;
            }
        `;

        document.head.appendChild(style);
        document.body.appendChild(monitorPanel);

        // 使面板可拖拽
        makeDraggable();

        // 绑定事件
        bindPanelEvents();
    }

    // 使面板可拖拽
    function makeDraggable() {
        const header = monitorPanel.querySelector('.ajax-monitor-header');
        let isDragging = false;
        let currentX;
        let currentY;
        let initialX;
        let initialY;
        let xOffset = 0;
        let yOffset = 0;

        header.addEventListener('mousedown', dragStart);
        document.addEventListener('mousemove', drag);
        document.addEventListener('mouseup', dragEnd);

        function dragStart(e) {
            initialX = e.clientX - xOffset;
            initialY = e.clientY - yOffset;

            if (e.target === header || header.contains(e.target)) {
                isDragging = true;
            }
        }

        function drag(e) {
            if (isDragging) {
                e.preventDefault();
                currentX = e.clientX - initialX;
                currentY = e.clientY - initialY;

                xOffset = currentX;
                yOffset = currentY;

                monitorPanel.style.transform = `translate(${currentX}px, ${currentY}px)`;
            }
        }

        function dragEnd() {
            isDragging = false;
        }
    }

    // 绑定面板事件
    function bindPanelEvents() {
        // 清空记录
        document.getElementById('clear-records').onclick = () => {
            ajaxRecords = [];
            recordIndex = 0;
            // 重置过滤器
            currentFilters = {
                searchText: '',
                method: 'all',
                status: 'all',
                searchReverse: false,
                methodReverse: false,
                statusReverse: false
            };
            // 重置过滤器UI
            if (document.getElementById('filter-search')) {
                document.getElementById('filter-search').value = '';
                document.getElementById('filter-method').value = 'all';
                document.getElementById('filter-status').value = 'all';

                // 重置反向按钮状态
                const searchReverseBtn = document.getElementById('search-reverse');
                const methodReverseBtn = document.getElementById('method-reverse');
                const statusReverseBtn = document.getElementById('status-reverse');
                if (searchReverseBtn) searchReverseBtn.classList.remove('active');
                if (methodReverseBtn) methodReverseBtn.classList.remove('active');
                if (statusReverseBtn) statusReverseBtn.classList.remove('active');
            }
            updateRecordsList();
            updateStats();
        };

        // 导出数据
        document.getElementById('export-records').onclick = exportRecords;

        // 切换自动滚动
        document.getElementById('toggle-auto-scroll').onclick = () => {
            CONFIG.autoScroll = !CONFIG.autoScroll;
            const btn = document.getElementById('toggle-auto-scroll');
            btn.style.background = CONFIG.autoScroll ? 'rgba(40,167,69,0.3)' : 'rgba(255,255,255,0.2)';
        };

        // 关闭监控
        document.getElementById('close-monitor').onclick = stopMonitoring;

        // 绑定过滤器事件
        bindFilterEvents();
    }

    // 过滤记录
    function filterRecords() {
        return ajaxRecords.filter(record => {
            // 搜索文本过滤
            if (currentFilters.searchText) {
                const searchText = currentFilters.searchText.toLowerCase();
                const matchUrl = record.url.toLowerCase().includes(searchText);
                const matchStatus = record.status.toString().includes(searchText);
                const matchMethod = record.method.toLowerCase().includes(searchText);
                const hasMatch = matchUrl || matchStatus || matchMethod;

                if (currentFilters.searchReverse) {
                    // 反向搜索：排除匹配的
                    if (hasMatch) {
                        return false;
                    }
                } else {
                    // 正向搜索：包含匹配的
                    if (!hasMatch) {
                        return false;
                    }
                }
            }

            // 方法过滤
            if (currentFilters.method !== 'all') {
                const methodMatches = record.method === currentFilters.method;

                if (currentFilters.methodReverse) {
                    // 反向方法过滤：排除选中的方法
                    if (methodMatches) {
                        return false;
                    }
                } else {
                    // 正向方法过滤：只显示选中的方法
                    if (!methodMatches) {
                        return false;
                    }
                }
            }

            // 状态过滤
            if (currentFilters.status !== 'all') {
                let statusMatches = false;
                switch (currentFilters.status) {
                    case 'success':
                        statusMatches = record.success && record.status >= 200 && record.status < 300;
                        break;
                    case 'error':
                        statusMatches = !record.success && record.status >= 400;
                        break;
                    case 'pending':
                        statusMatches = record.status === 0;
                        break;
                }

                if (currentFilters.statusReverse) {
                    // 反向状态过滤：排除选中的状态
                    if (statusMatches) {
                        return false;
                    }
                } else {
                    // 正向状态过滤：只显示选中的状态
                    if (!statusMatches) {
                        return false;
                    }
                }
            }

            return true;
        });
    }

    // 更新记录列表
    function updateRecordsList() {
        const listContainer = document.getElementById('ajax-records-list');
        const filteredRecords = filterRecords();

        const recordsHtml = filteredRecords.map(record => {
            const statusClass = record.success ? 'success' : 'error';
            const durationClass = record.duration < 200 ? 'duration-fast' :
                                  record.duration < 1000 ? 'duration-medium' : 'duration-slow';

            return `
                <div class="ajax-record ${statusClass}" onclick="showRecordDetail(${record.id})">
                    <div>${record.time}</div>
                    <div><span class="method-${record.method.toLowerCase()}">${record.method}</span></div>
                    <div class="ajax-record-url" title="${record.url}">${record.url}</div>
                    <div class="${record.success ? 'status-success' : 'status-error'}">${record.status}</div>
                    <div class="${durationClass}">${record.duration}ms</div>
                    <div>
                        <button class="view-btn" onclick="event.stopPropagation(); showRecordDetail(${record.id})">详情</button>
                        <button class="copy-btn" onclick="event.stopPropagation(); copyUrl('${record.url}')" title="复制URL">📋</button>
                        <button class="resend-btn" onclick="event.stopPropagation(); editAndResendRequest(${record.id})" title="修改并重发">🔄</button>
                        <button class="curl-btn" onclick="event.stopPropagation(); copyCurlCommand(${record.id})" title="复制curl">📜</button>
                    </div>
                </div>
            `;
        }).join('');

        const noResultsHtml = filteredRecords.length === 0 && ajaxRecords.length > 0 ?
            `<div style="padding: 20px; text-align: center; color: #6c757d;">
                <div>🔍 没有找到符合条件的请求</div>
                <div style="font-size: 11px; margin-top: 4px;">尝试调整过滤条件或清空过滤器</div>
            </div>` : '';

        listContainer.innerHTML = `
            <div class="ajax-record-header">
                <div class="col-time">时间</div>
                <div class="col-method">方法</div>
                <div class="col-url">URL</div>
                <div class="col-status">状态</div>
                <div class="col-duration">耗时</div>
                <div class="col-actions">操作</div>
            </div>
            ${recordsHtml}
            ${noResultsHtml}
        `;

        if (CONFIG.autoScroll && filteredRecords.length > 0) {
            listContainer.scrollTop = listContainer.scrollHeight;
        }

        // 更新过滤器状态显示
        updateFilterStatus(filteredRecords.length);
    }

    // 绑定过滤器事件
    function bindFilterEvents() {
        // 搜索框
        const searchInput = document.getElementById('filter-search');
        searchInput.addEventListener('input', (e) => {
            currentFilters.searchText = e.target.value;
            updateRecordsList();
        });

        // 方法选择器
        const methodSelect = document.getElementById('filter-method');
        methodSelect.addEventListener('change', (e) => {
            currentFilters.method = e.target.value;
            updateRecordsList();
        });

        // 状态选择器
        const statusSelect = document.getElementById('filter-status');
        statusSelect.addEventListener('change', (e) => {
            currentFilters.status = e.target.value;
            updateRecordsList();
        });

        // 反向搜索按钮
        const searchReverseBtn = document.getElementById('search-reverse');
        searchReverseBtn.addEventListener('click', () => {
            currentFilters.searchReverse = !currentFilters.searchReverse;
            searchReverseBtn.classList.toggle('active', currentFilters.searchReverse);
            updateRecordsList();
        });

        // 反向方法按钮
        const methodReverseBtn = document.getElementById('method-reverse');
        methodReverseBtn.addEventListener('click', () => {
            currentFilters.methodReverse = !currentFilters.methodReverse;
            methodReverseBtn.classList.toggle('active', currentFilters.methodReverse);
            updateRecordsList();
        });

        // 反向状态按钮
        const statusReverseBtn = document.getElementById('status-reverse');
        statusReverseBtn.addEventListener('click', () => {
            currentFilters.statusReverse = !currentFilters.statusReverse;
            statusReverseBtn.classList.toggle('active', currentFilters.statusReverse);
            updateRecordsList();
        });

        // 清空过滤器
        document.getElementById('clear-filters').addEventListener('click', () => {
            currentFilters = {
                searchText: '',
                method: 'all',
                status: 'all',
                searchReverse: false,
                methodReverse: false,
                statusReverse: false
            };

            // 重置UI
            searchInput.value = '';
            methodSelect.value = 'all';
            statusSelect.value = 'all';

            // 重置反向按钮状态
            searchReverseBtn.classList.remove('active');
            methodReverseBtn.classList.remove('active');
            statusReverseBtn.classList.remove('active');

            updateRecordsList();
        });
    }

    // 更新过滤器状态显示
    function updateFilterStatus(filteredCount) {
        const totalCount = ajaxRecords.length;
        const isFiltered = currentFilters.searchText ||
                          currentFilters.method !== 'all' ||
                          currentFilters.status !== 'all';

        const hasReverse = currentFilters.searchReverse ||
                          currentFilters.methodReverse ||
                          currentFilters.statusReverse;

        if (isFiltered && filteredCount !== totalCount) {
            let filterText = '(已过滤';
            if (hasReverse) {
                filterText += ' 🚫反向';
            }
            filterText += ')';

            document.getElementById('total-count').innerHTML =
                `${filteredCount} / ${totalCount} <span style="color: #007acc; font-size: 10px;">${filterText}</span>`;
        } else {
            document.getElementById('total-count').textContent = totalCount;
        }
    }

    // 复制URL到剪贴板
    window.copyUrl = function(url) {
        navigator.clipboard.writeText(url).then(() => {
            console.log('📋 URL已复制到剪贴板:', url);
        }).catch(err => {
            console.error('复制失败:', err);
        });
    };

    // 复制curl命令
    window.copyCurlCommand = function(recordId) {
        const record = ajaxRecords.find(r => r.id === recordId);
        if (!record) return;

        const curlCommand = generateCurlCommand(record);
        navigator.clipboard.writeText(curlCommand).then(() => {
            console.log('📜 cURL命令已复制到剪贴板');
            // 显示成功提示
            showToast('cURL命令已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            showToast('复制失败', 'error');
        });
    };

    // 编辑并重发请求
    window.editAndResendRequest = function(recordId) {
        const record = ajaxRecords.find(r => r.id === recordId);
        if (!record) return;

        const bodyFormat = record.bodyFormat || 'text';
        const modal = document.createElement('div');
        modal.className = 'ajax-edit-modal';
        modal.innerHTML = `
            <div class="ajax-edit-content">
                <div class="ajax-detail-header">
                    <h3>🔄 修改并重发请求</h3>
                    <button class="close-btn" onclick="this.closest('.ajax-edit-modal').remove()">关闭</button>
                </div>
                <div class="ajax-edit-body">
                    <form class="ajax-edit-form" id="edit-form-${recordId}">
                        <div class="ajax-edit-group">
                            <label for="edit-method-${recordId}">请求方法</label>
                            <select id="edit-method-${recordId}" name="method">
                                <option value="GET" ${record.method === 'GET' ? 'selected' : ''}>GET</option>
                                <option value="POST" ${record.method === 'POST' ? 'selected' : ''}>POST</option>
                                <option value="PUT" ${record.method === 'PUT' ? 'selected' : ''}>PUT</option>
                                <option value="DELETE" ${record.method === 'DELETE' ? 'selected' : ''}>DELETE</option>
                                <option value="PATCH" ${record.method === 'PATCH' ? 'selected' : ''}>PATCH</option>
                            </select>
                        </div>
                        <div class="ajax-edit-group">
                            <label for="edit-url-${recordId}">请求URL</label>
                            <input type="text" id="edit-url-${recordId}" name="url" value="${record.url}" />
                        </div>
                        <div class="ajax-edit-group">
                            <label for="edit-headers-${recordId}">请求头 (JSON格式)</label>
                            <textarea id="edit-headers-${recordId}" name="headers" placeholder='{"Content-Type": "application/json"}'>${JSON.stringify(record.requestHeaders, null, 2)}</textarea>
                        </div>
                        <div class="ajax-edit-group">
                            <label for="edit-body-format-${recordId}">请求体格式</label>
                            <select id="edit-body-format-${recordId}" name="bodyFormat" onchange="handleBodyFormatChange(${recordId})">
                                <option value="none" ${bodyFormat === 'none' ? 'selected' : ''}>无请求体</option>
                                <option value="text" ${bodyFormat === 'text' ? 'selected' : ''}>文本/字符串</option>
                                <option value="json" ${bodyFormat === 'json' ? 'selected' : ''}>JSON</option>
                                <option value="form" ${bodyFormat === 'form' ? 'selected' : ''}>表单数据</option>
                            </select>
                        </div>
                        <div class="ajax-edit-group" id="body-group-${recordId}" ${bodyFormat === 'none' ? 'style="display:none"' : ''}>
                            <label for="edit-body-${recordId}">请求体内容</label>
                            <textarea id="edit-body-${recordId}" name="body" placeholder="请求体内容..." rows="6">${formatRequestBodyForEdit(record.requestBody, bodyFormat)}</textarea>
                            <small id="body-hint-${recordId}" style="color: #6c757d; font-size: 11px;">
                                ${getBodyFormatHint(bodyFormat)}
                            </small>
                        </div>
                    </form>
                </div>
                <div class="ajax-edit-actions">
                    <button class="cancel-btn" onclick="this.closest('.ajax-edit-modal').remove()">取消</button>
                    <button class="send-btn" onclick="sendEditedRequest(${recordId})">发送请求</button>
                </div>
            </div>
        `;

        document.body.appendChild(modal);

        // 点击背景关闭
        modal.onclick = (e) => {
            if (e.target === modal) {
                modal.remove();
            }
        };
    };

    // 格式化请求体用于编辑
    function formatRequestBodyForEdit(body, format) {
        if (!body) return '';

        switch (format) {
            case 'json':
                if (typeof body === 'string') {
                    try {
                        return JSON.stringify(JSON.parse(body), null, 2);
                    } catch {
                        return body;
                    }
                }
                return JSON.stringify(body, null, 2);
            case 'form':
                if (body instanceof FormData) {
                    const entries = [];
                    for (let pair of body.entries()) {
                        entries.push(`${pair[0]}=${pair[1]}`);
                    }
                    return entries.join('&');
                }
                return body.toString();
            case 'text':
            default:
                return body.toString();
        }
    }

    // 获取请求体格式提示
    function getBodyFormatHint(format) {
        switch (format) {
            case 'json':
                return '请输入有效的JSON格式数据，例如: {"key": "value"}';
            case 'form':
                return '请输入表单数据格式，例如: key1=value1&key2=value2';
            case 'text':
                return '请输入纯文本内容';
            case 'none':
                return '该请求不包含请求体';
            default:
                return '';
        }
    }

    // 处理请求体格式变化
    window.handleBodyFormatChange = function(recordId) {
        const formatSelect = document.getElementById(`edit-body-format-${recordId}`);
        const bodyGroup = document.getElementById(`body-group-${recordId}`);
        const bodyHint = document.getElementById(`body-hint-${recordId}`);

        const selectedFormat = formatSelect.value;

        if (selectedFormat === 'none') {
            bodyGroup.style.display = 'none';
        } else {
            bodyGroup.style.display = 'block';
            bodyHint.textContent = getBodyFormatHint(selectedFormat);
        }
    };

    // 发送编辑后的请求
    window.sendEditedRequest = function(recordId) {
        const form = document.getElementById(`edit-form-${recordId}`);
        const formData = new FormData(form);

        const method = formData.get('method');
        const url = formData.get('url');
        const headersText = formData.get('headers');
        const bodyText = formData.get('body');
        const bodyFormat = formData.get('bodyFormat');

        let headers = {};
        try {
            if (headersText.trim()) {
                headers = JSON.parse(headersText);
            }
        } catch (e) {
            showToast('请求头格式错误，请使用正确的JSON格式', 'error');
            return;
        }

        // 根据格式处理请求体
        let processedBody = null;
        if (bodyFormat !== 'none' && bodyText && method !== 'GET') {
            switch (bodyFormat) {
                case 'json':
                    try {
                        // 验证JSON格式
                        JSON.parse(bodyText);
                        processedBody = bodyText;
                        // 确保Content-Type正确
                        if (!headers['Content-Type'] && !headers['content-type']) {
                            headers['Content-Type'] = 'application/json';
                        }
                    } catch (e) {
                        showToast('JSON格式错误，请检查请求体内容', 'error');
                        return;
                    }
                    break;
                case 'form':
                    processedBody = bodyText;
                    // 确保Content-Type正确
                    if (!headers['Content-Type'] && !headers['content-type']) {
                        headers['Content-Type'] = 'application/x-www-form-urlencoded';
                    }
                    break;
                case 'text':
                default:
                    processedBody = bodyText;
                    break;
            }
        }

        // 发送请求
        const requestOptions = {
            method: method,
            headers: headers
        };

        if (processedBody !== null) {
            requestOptions.body = processedBody;
        }

        console.log('🚀 发送编辑后的请求:', {
            method,
            url,
            headers,
            body: processedBody,
            bodyFormat
        });

        fetch(url, requestOptions)
            .then(response => {
                console.log('✅ 请求发送成功，状态:', response.status);
                showToast(`请求已发送，状态: ${response.status}`, response.ok ? 'success' : 'error');
                // 关闭模态框
                document.querySelector('.ajax-edit-modal').remove();
            })
            .catch(error => {
                console.error('❌ 请求发送失败:', error);
                showToast(`请求发送失败: ${error.message}`, 'error');
            });
    };

     // 显示提示信息
     function showToast(message, type = 'info') {
         const toast = document.createElement('div');
         toast.style.cssText = `
             position: fixed;
             top: 20px;
             left: 50%;
             transform: translateX(-50%);
             padding: 12px 24px;
             border-radius: 6px;
             color: white;
             font-size: 14px;
             font-weight: 500;
             z-index: 2147483650;
             box-shadow: 0 4px 16px rgba(0,0,0,0.2);
             transition: all 0.3s ease;
             backdrop-filter: blur(10px);
         `;

         switch (type) {
             case 'success':
                 toast.style.background = 'linear-gradient(135deg, #28a745, #20c997)';
                 break;
             case 'error':
                 toast.style.background = 'linear-gradient(135deg, #dc3545, #fd7e14)';
                 break;
             default:
                 toast.style.background = 'linear-gradient(135deg, #007acc, #0099ff)';
         }

         toast.textContent = message;
         document.body.appendChild(toast);

         // 3秒后移除
         setTimeout(() => {
             toast.style.opacity = '0';
             toast.style.transform = 'translateX(-50%) translateY(-20px)';
             setTimeout(() => {
                 if (toast.parentNode) {
                     toast.parentNode.removeChild(toast);
                 }
             }, 300);
         }, 3000);
     }

     // 更新统计数据
    function updateStats() {
        const filteredRecords = filterRecords();
        const total = ajaxRecords.length;
        const success = ajaxRecords.filter(r => r.success).length;
        const error = total - success;
        const avgTime = total > 0 ? Math.round(ajaxRecords.reduce((sum, r) => sum + r.duration, 0) / total) : 0;

        // 检查是否有过滤条件
        const isFiltered = currentFilters.searchText ||
                          currentFilters.method !== 'all' ||
                          currentFilters.status !== 'all';

        const hasReverse = currentFilters.searchReverse ||
                          currentFilters.methodReverse ||
                          currentFilters.statusReverse;

        if (isFiltered && filteredRecords.length !== total) {
            let filterText = '(已过滤';
            if (hasReverse) {
                filterText += ' 🚫反向';
            }
            filterText += ')';

            document.getElementById('total-count').innerHTML =
                `${filteredRecords.length} / ${total} <span style="color: #007acc; font-size: 10px;">${filterText}</span>`;
        } else {
            document.getElementById('total-count').textContent = total;
        }

        document.getElementById('success-count').textContent = success;
        document.getElementById('error-count').textContent = error;
        document.getElementById('avg-time').textContent = avgTime;
    }

    // 显示记录详情
    window.showRecordDetail = function(recordId) {
        const record = ajaxRecords.find(r => r.id === recordId);
        if (!record) return;

        const modal = document.createElement('div');
        modal.className = 'ajax-detail-modal';
        modal.innerHTML = `
            <div class="ajax-detail-content">
                <div class="ajax-detail-header">
                    <h3>🔍 ${record.method} ${record.url}</h3>
                    <button class="close-btn" onclick="this.closest('.ajax-detail-modal').remove()">关闭</button>
                </div>
                <div class="ajax-detail-body">
                    <div class="ajax-detail-section">
                        <h4>📊 基本信息</h4>
                        <div class="ajax-detail-code">时间: ${record.time}
方法: ${record.method}
URL: ${record.url}
状态: ${record.status} ${record.success ? '✅' : '❌'}
耗时: ${record.duration}ms
用户代理: ${navigator.userAgent}</div>
                    </div>
                    <div class="ajax-detail-section">
                        <h4>📤 请求头
                            <button class="copy-btn" onclick="copyRequestHeaders(${recordId})">复制</button>
                        </h4>
                        <div class="ajax-detail-code">${JSON.stringify(record.requestHeaders, null, 2)}</div>
                    </div>
                    <div class="ajax-detail-section">
                        <h4>📝 请求参数 (格式: ${record.bodyFormat || 'auto'})
                            <button class="copy-btn" onclick="copyRequestBody(${recordId})">复制</button>
                        </h4>
                        <div class="ajax-detail-code">${formatRequestBody(record.requestBody, record.bodyFormat)}</div>
                    </div>
                    <div class="ajax-detail-section">
                        <h4>📥 响应头
                            <button class="copy-btn" onclick="copyResponseHeaders(${recordId})">复制</button>
                        </h4>
                        <div class="ajax-detail-code">${JSON.stringify(record.responseHeaders, null, 2)}</div>
                    </div>
                    <div class="ajax-detail-section">
                        <h4>📋 响应数据
                            <button class="copy-btn" onclick="copyResponseData(${recordId})">复制</button>
                        </h4>
                        <div class="ajax-detail-code">${formatResponse(record.response)}</div>
                    </div>
                    <div class="ajax-detail-section">
                        <h4>🔄 cURL命令
                        <button class="copy-btn" onclick="copyCurlCommand(${recordId})">复制</button>
                        </h4>
                        <div class="ajax-detail-code">${generateCurlCommand(record)}</div>
                    </div>
                </div>
            </div>
        `;

        document.body.appendChild(modal);

        // 点击背景关闭
        modal.onclick = (e) => {
            if (e.target === modal) {
                modal.remove();
            }
        };
    };

    // 复制到剪贴板
    window.copyToClipboard = function(text) {
        navigator.clipboard.writeText(text).then(() => {
            console.log('📋 内容已复制到剪贴板');
        }).catch(err => {
            console.error('复制失败:', err);
        });
    };

    // 复制响应数据
    window.copyResponseData = function(recordId) {
        const record = ajaxRecords.find(r => r.id === recordId);
        if (!record) return;

        const responseText = record.response || '';
        navigator.clipboard.writeText(responseText).then(() => {
            console.log('📋 响应数据已复制到剪贴板');
            showToast('响应数据已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            showToast('复制失败', 'error');
        });
    };
    window.copyCurlCommand = function(recordId) {
        const record = ajaxRecords.find(r => r.id === recordId);
        if (!record) return;

        const curlCommand = generateCurlCommand(record);
        navigator.clipboard.writeText(curlCommand).then(() => {
            console.log('📋 cURL命令已复制到剪贴板');
            showToast('cURL命令已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            showToast('复制失败', 'error');
        });
    };
    // 复制请求头
    window.copyRequestHeaders = function(recordId) {
        const record = ajaxRecords.find(r => r.id === recordId);
        if (!record) return;

        const headersText = JSON.stringify(record.requestHeaders, null, 2);
        navigator.clipboard.writeText(headersText).then(() => {
            console.log('📋 请求头已复制到剪贴板');
            showToast('请求头已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            showToast('复制失败', 'error');
        });
    };

    // 复制请求体
    window.copyRequestBody = function(recordId) {
        const record = ajaxRecords.find(r => r.id === recordId);
        if (!record) return;

        const bodyText = formatRequestBodyForCopy(record.requestBody);
        navigator.clipboard.writeText(bodyText).then(() => {
            console.log('📋 请求体已复制到剪贴板');
            showToast('请求体已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            showToast('复制失败', 'error');
        });
    };

    // 复制响应头
    window.copyResponseHeaders = function(recordId) {
        const record = ajaxRecords.find(r => r.id === recordId);
        if (!record) return;

        const headersText = JSON.stringify(record.responseHeaders, null, 2);
        navigator.clipboard.writeText(headersText).then(() => {
            console.log('📋 响应头已复制到剪贴板');
            showToast('响应头已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            showToast('复制失败', 'error');
        });
    };

    // 生成cURL命令
    function generateCurlCommand(record) {
        let curl = `curl -X ${record.method} '${record.url}'`;

        // 添加请求头
        Object.entries(record.requestHeaders).forEach(([key, value]) => {
            curl += ` \\\n  -H '${key}: ${value}'`;
        });

        // 添加请求体
        if (record.requestBody) {
            curl += ` \\\n  -d '${record.requestBody}'`;
        }

        return curl;
    }

    // 格式化请求体
    function formatRequestBody(body, bodyFormat) {
        if (!body) return '无请求体';

        // 如果有格式信息，按格式处理
        if (bodyFormat) {
            switch (bodyFormat) {
                case 'json':
                    if (typeof body === 'string') {
                        try {
                            return JSON.stringify(JSON.parse(body), null, 2);
                        } catch {
                            return body;
                        }
                    }
                    return JSON.stringify(body, null, 2);
                case 'form':
                    if (body instanceof FormData) {
                        const entries = [];
                        for (let pair of body.entries()) {
                            entries.push(`${pair[0]}: ${pair[1]}`);
                        }
                        return entries.join('\n');
                    }
                    return body.toString();
                case 'text':
                case 'none':
                default:
                    return body.toString();
            }
        }

        // 回退到原有逻辑（为了兼容性）
        if (typeof body === 'string') {
            // 只在确实是JSON格式时才格式化
            try {
                const parsed = JSON.parse(body);
                // 检查是否真的是对象/数组
                if (typeof parsed === 'object' && parsed !== null) {
                    return JSON.stringify(parsed, null, 2);
                }
                return body;
            } catch {
                return body;
            }
        }
        if (body instanceof FormData) {
            const entries = [];
            for (let pair of body.entries()) {
                entries.push(`${pair[0]}: ${pair[1]}`);
            }
            return entries.join('\n');
        }
        return JSON.stringify(body, null, 2);
    }

    // 格式化请求体用于复制
    function formatRequestBodyForCopy(body) {
        if (!body) return '';
        return typeof body === 'string' ? body.replace(/'/g, "\\'") : JSON.stringify(body).replace(/'/g, "\\'");
    }

    // 格式化响应数据
    function formatResponse(response) {
        if (!response) return '无响应数据';
        if (typeof response === 'string') {
            try {
                return JSON.stringify(JSON.parse(response), null, 2);
            } catch {
                return response;
            }
        }
        return JSON.stringify(response, null, 2);
    }

    // 导出记录
    function exportRecords() {
        const exportData = {
            exportTime: new Date().toISOString(),
            environment: {
                userAgent: navigator.userAgent,
                url: window.location.href,
                timestamp: Date.now()
            },
            records: ajaxRecords
        };

        const data = JSON.stringify(exportData, null, 2);
        const blob = new Blob([data], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `ajax_records_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`;
        a.click();
        URL.revokeObjectURL(url);

        console.log('📥 导出完成，包含', ajaxRecords.length, '条记录');
    }

    // 检测请求体格式
    function detectBodyFormat(body, contentType) {
        if (!body) return 'none';

        contentType = (contentType || '').toLowerCase();

        if (contentType.includes('application/json')) {
            return 'json';
        } else if (contentType.includes('application/x-www-form-urlencoded')) {
            return 'form';
        } else if (contentType.includes('multipart/form-data')) {
            return 'multipart';
        } else if (contentType.includes('text/')) {
            return 'text';
        }

        // 尝试检测是否是JSON字符串
        if (typeof body === 'string') {
            try {
                JSON.parse(body);
                return 'json';
            } catch {
                return 'text';
            }
        }

        if (body instanceof FormData) {
            return 'form';
        }

        return 'text';
    }

    // 记录Ajax请求
    function recordAjaxRequest(data) {
        if (ajaxRecords.length >= CONFIG.maxRecords) {
            ajaxRecords.shift(); // 删除最早的记录
        }

        // 检测请求体格式
        const contentType = data.requestHeaders['Content-Type'] || data.requestHeaders['content-type'] || '';
        const bodyFormat = detectBodyFormat(data.requestBody, contentType);

        ajaxRecords.push({
            id: ++recordIndex,
            time: new Date().toLocaleTimeString(),
            timestamp: Date.now(),
            bodyFormat: bodyFormat,
            ...data
        });

        if (monitorPanel) {
            updateRecordsList();
            updateStats();
        }
    }

    // 拦截XMLHttpRequest
    function interceptXMLHttpRequest() {
        window.XMLHttpRequest = function() {
            const xhr = new originalXHR();
            const startTime = Date.now();
            let requestData = {
                method: 'GET',
                url: '',
                requestHeaders: {},
                requestBody: null,
                responseHeaders: {},
                response: '',
                status: 0,
                success: false,
                duration: 0
            };

            // 拦截open方法
            const originalOpen = xhr.open;
            xhr.open = function(method, url, async, user, password) {
                requestData.method = method.toUpperCase();
                requestData.url = url;
                return originalOpen.apply(this, arguments);
            };

            // 拦截setRequestHeader方法
            const originalSetRequestHeader = xhr.setRequestHeader;
            xhr.setRequestHeader = function(name, value) {
                requestData.requestHeaders[name] = value;
                return originalSetRequestHeader.apply(this, arguments);
            };

            // 拦截send方法
            const originalSend = xhr.send;
            xhr.send = function(body) {
                requestData.requestBody = body;

                // 监听状态变化
                const originalOnReadyStateChange = xhr.onreadystatechange;
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        requestData.duration = Date.now() - startTime;
                        requestData.status = xhr.status;
                        requestData.success = xhr.status >= 200 && xhr.status < 400;
                        requestData.response = xhr.responseText;

                        // 获取响应头
                        const responseHeadersStr = xhr.getAllResponseHeaders();
                        if (responseHeadersStr) {
                            responseHeadersStr.split('\r\n').forEach(line => {
                                const parts = line.split(': ');
                                if (parts.length === 2) {
                                    requestData.responseHeaders[parts[0]] = parts[1];
                                }
                            });
                        }

                        if (isListening) {
                            recordAjaxRequest(requestData);
                        }
                    }

                    if (originalOnReadyStateChange) {
                        originalOnReadyStateChange.apply(this, arguments);
                    }
                };

                return originalSend.apply(this, arguments);
            };

            return xhr;
        };

        // 复制原始构造函数的静态属性
        Object.setPrototypeOf(window.XMLHttpRequest, originalXHR);
        Object.setPrototypeOf(window.XMLHttpRequest.prototype, originalXHR.prototype);
    }

    // 拦截fetch请求
    function interceptFetch() {
        window.fetch = function(input, init = {}) {
            const startTime = Date.now();
            const url = typeof input === 'string' ? input : input.url;
            const method = (init.method || 'GET').toUpperCase();

            const requestData = {
                method: method,
                url: url,
                requestHeaders: init.headers || {},
                requestBody: init.body || null,
                responseHeaders: {},
                response: '',
                status: 0,
                success: false,
                duration: 0
            };

            return originalFetch(input, init).then(response => {
                requestData.duration = Date.now() - startTime;
                requestData.status = response.status;
                requestData.success = response.ok;

                // 获取响应头
                response.headers.forEach((value, name) => {
                    requestData.responseHeaders[name] = value;
                });

                // 克隆响应以读取内容
                const responseClone = response.clone();
                responseClone.text().then(text => {
                    requestData.response = text;
                    if (isListening) {
                        recordAjaxRequest(requestData);
                    }
                }).catch(() => {
                    // 如果无法读取响应内容，仍然记录请求
                    if (isListening) {
                        recordAjaxRequest(requestData);
                    }
                });

                return response;
            }).catch(error => {
                requestData.duration = Date.now() - startTime;
                requestData.status = 0;
                requestData.success = false;
                requestData.response = error.message;

                if (isListening) {
                    recordAjaxRequest(requestData);
                }

                throw error;
            });
        };
    }

    // 开始监听
    function startMonitoring() {
        if (isListening) return;

        isListening = true;
        ajaxRecords = [];
        recordIndex = 0;

        // 安装拦截器
        interceptXMLHttpRequest();
        interceptFetch();

        // 创建监控面板
        createMonitorPanel();

        console.log('🎯 Ajax监听已启动');
        console.log('📍 当前URL:', window.location.href);
        console.log('🔧 按 F3 可关闭监听');
    }

    // 停止监听
    function stopMonitoring() {
        isListening = false;

        // 恢复原始方法
        window.XMLHttpRequest = originalXHR;
        window.fetch = originalFetch;

        // 移除监控面板
        if (monitorPanel) {
            monitorPanel.remove();
            monitorPanel = null;
        }

        console.log('🔴 Ajax监听已停止');
    }

    // 热键监听
    function setupHotkey() {
        document.addEventListener('keydown', function(e) {
            if (e.key === 'F3') {
                e.preventDefault();

                if (isListening) {
                    stopMonitoring();
                } else {
                    startMonitoring();
                }
            }
        });
    }

    // 初始化
    function init() {
        setupHotkey();
        console.log('📡 Ajax监听器已加载');
        console.log('🚀 按 F3 启动Ajax请求监听');
        console.log('🌐 当前环境:', window.location.href);
    }

    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址