火狐开发者工具修改HTML后如何在刷新页面后保留修改并查看效果？

Firefox 开发者工具没有原生支持直接持久化「元素面板中手动修改的DOM结构」的功能，刷新页面后手动修改的DOM会重置为服务器返回的原始版本，你可以通过以下两种方案实现HTML修改的持久化：

• 使用 DevTools 内置的 覆盖（Overrides） 功能

  1. 打开开发者工具切换到「调试器」面板，点击左侧边栏的「覆盖」选项卡
  2. 点击「选择文件夹」指定本地空目录作为覆盖存储路径，授权浏览器读取该目录的权限
  3. 切换到「源代码」面板，找到对应页面的原始HTML文件，右键选择「保存以备覆盖」
  4. 在编辑器内直接修改HTML内容、调整head子元素排列顺序后按Ctrl+S保存
  5. 后续刷新页面时浏览器会自动加载本地修改后的HTML文件，只要不关闭覆盖功能修改就会一直生效

• 使用用户脚本管理器扩展（如 Tampermonkey、Violentmonkey）
  安装扩展后新建适配目标站点的用户脚本，在脚本中编写DOM操作逻辑，页面加载时自动调整head子元素顺序，这种方式修改永久生效，重启浏览器也不会丢失。

你之前用到的CSS、JS修改持久化方案本质也是基于覆盖能力，把HTML文件加入覆盖列表即可实现和CSS、JS修改一样的留存效果。

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