应使用Ctrl+U获取原始HTML源码并用Diff插件比对,禁用缓存后可通过网络面板复制document响应体进行字节级差异分析。

你需要在火狐浏览器中快速比对两个网页的原始HTML结构差异,比如验证A/B测试页面是否仅修改了指定DOM节点、排查CDN缓存导致的代码不一致,或确认上线前后源码是否被意外篡改。
先获取两份纯净的源代码文本
打开第一个目标网页 → 按 Ctrl+U 查看源代码 → 全选(Ctrl+A)→ 复制(Ctrl+C)→ 粘贴到记事本或VS Code中保存为 page_a.html。
切换标签页,打开第二个目标网页 → 同样按 Ctrl+U → 注意:这一步必须用 Ctrl+U,不能用开发者工具里的 Elements 面板内容,因为 Elements 显示的是渲染后动态生成/修改过的 DOM,而你要对比的是服务器返回的原始 HTML 字节流。
全选→复制→粘贴到新文件,保存为 page_b.html。
用浏览器插件一键比对(推荐)
在火狐地址栏输入 about:addons → 点击右上角“浏览所有扩展” → 搜索 “diff” → 安装官方评分 4.7+ 且近期更新的插件,例如 Diff Checker for Firefox 或 Page Diff。
安装后重启浏览器,访问任意网页 → 点击工具栏新增的 Diff 图标 → 选择“Compare two files” → 分别上传 page_a.html 和 page_b.html → 点击 Compare。
插件会高亮显示新增、删除、修改的行,左侧为 A 版本,右侧为 B 版本,颜色区分清晰。注意:部分插件默认忽略空白符和换行差异,如需严格字节级比对,请在设置中关闭“ignore whitespace”选项。
不用插件:用火狐内置开发者工具辅助定位差异点
方法一:用响应式设计模式并排查看
打开第一个网页 → 按 Ctrl+Shift+M 进入响应式设计模式 → 点击右上角“…(更多选项)”→ 选择“显示两个视图” → 在第二个视图中输入第二个网页 URL 并加载。
此时两个网页并排渲染,可肉眼快速识别布局、文字、按钮等可见层差异;但此法无法发现隐藏注释、meta 标签顺序、script src 路径微小变动等源码级变化。
方法二:用控制台提取关键节点做字符串比对
在第一个网页按 Ctrl+Shift+I 打开开发者工具 → 切换到 Console 面板 → 输入:document.documentElement.outerHTML.substring(0, 5000) → 回车,复制输出结果前5000字符。
切换到第二个网页 → 同样打开 Console → 输入相同命令 → 复制结果。
把两段字符串粘贴进在线 diff 工具(如 diffchecker.com)→ 点击 Compare。这招适合只关心开头关键结构(doctype、head、首屏 script)是否一致,省去下载完整文件的步骤。
方法三:用网络面板抓取原始响应体
第一步:在第一个网页按 Ctrl+Shift+E 打开网络面板 → 刷新页面 → 找到顶部第一行(通常是文档本身,类型为 document)→ 右键 → “复制” → “复制响应”。
第二步:切换到第二个网页 → 同样操作,复制其 document 响应体。
第三步:把两段响应体分别粘贴进文本编辑器 → 使用编辑器自带的“比较文件”功能(VS Code 按 Ctrl+P 输入 >Compare Active File with…)→ 立即看到逐行差异。
【关键前提】 必须确保两次抓包时都禁用了浏览器缓存:在网络面板左上角勾选“禁用缓存”,否则第二次可能拿到的是内存缓存副本,导致误判。











