如何对比DevTools中两个请求/Node JSON对象的差异？

前置：确认目标请求节点 #

先确保已精准筛选出codesandbox.io中URL含httpapi的请求对象（以下示例假设你已拿到待对比的两个请求req1和req2）：

// 从性能条目筛选目标请求（可根据实际场景调整筛选条件）
const targetRequests = performance.getEntriesByType('resource').filter(entry => 
    entry.name.includes('httpapi')
);
// 取待对比的两个请求，按需调整索引
const [req1, req2] = targetRequests;

方案1：Console输出结构化差异 #

实现递归对比函数，将差异以分组形式输出，清晰展示属性路径与对应值的区别：

function compareObjects(obj1, obj2, path = '') {
    const diffs = [];
    const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
    // 可添加忽略固定属性的列表
    const ignoredKeys = ['startTime', 'duration'];

    allKeys.forEach(key => {
        if (ignoredKeys.includes(key)) return;
        
        const currentPath = path ? `${path}.${key}` : key;
        const val1 = obj1[key];
        const val2 = obj2[key];

        if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
            const nestedDiff = compareObjects(val1, val2, currentPath);
            if (nestedDiff.length) diffs.push(...nestedDiff);
        } else if (val1 !== val2) {
            diffs.push({
                path: currentPath,
                value1: val1,
                value2: val2
            });
        }
    });
    return diffs;
}

// 执行对比并输出
const diffResults = compareObjects(req1, req2);
console.group('Request对象差异');
diffResults.forEach(diff => {
    console.log(`属性路径: ${diff.path}`);
    console.log('请求1的值:', diff.value1);
    console.log('请求2的值:', diff.value2);
    console.log('---');
});
console.groupEnd();

方案2：Console渲染HTML表格展示差异 #

生成格式化表格，在Console中直观展示差异：

function renderDiffTable(diffs) {
    let tableHtml = `
        <table border="1" cellpadding="8" cellspacing="0">
            <thead>
                <tr><th>属性路径</th><th>请求1的值</th><th>请求2的值</th></tr>
            </thead>
            <tbody>
    `;
    diffs.forEach(diff => {
        tableHtml += `
            <tr>
                <td>${diff.path}</td>
                <td>${JSON.stringify(diff.value1)}</td>
                <td>${JSON.stringify(diff.value2)}</td>
            </tr>
        `;
    });
    tableHtml += '</tbody></table>';

    console.log('%cRequest差异对比表格', 'font-size:16px; font-weight:bold;');
    console.log(tableHtml);
}

// 先获取差异再渲染表格
const diffResults = compareObjects(req1, req2);
renderDiffTable(diffResults);

方案3：导出JSON格式差异结果 #

将差异结果导出为JSON文件或复制到剪贴板：

const diffResults = compareObjects(req1, req2);

// 方案A：复制到剪贴板
copy(JSON.stringify(diffResults, null, 2));
console.log('差异结果已复制到剪贴板');

// 方案B：下载为JSON文件
const blob = new Blob([JSON.stringify(diffResults, null, 2)], {type: 'application/json'});
const downloadUrl = URL.createObjectURL(blob);
const aTag = document.createElement('a');
aTag.href = downloadUrl;
aTag.download = 'request-diff.json';
aTag.click();
URL.revokeObjectURL(downloadUrl);

内容的提问来源于stack exchange，提问作者Rick