开发者工具中修改仅临时生效，须手动复制outerHTML到编辑器并保存为UTF-8编码的.html文件，再检查路径、资源及部署方式确保生效。
改完 HTML 源码后直接刷新浏览器不会生效——除非你修改的是本地文件且已保存，或你有服务器写权限并完成了部署。所有在开发者工具里点几下就“改好了”的操作，只是内存里的临时快照。
用开发者工具改完 HTML 后怎么保存到本地文件
Elements 面板里右键某个节点选 Copy outerHTML，只能复制当前渲染后的结构，不包含原始 <script> 或动态插入的逻辑。要真正保存，得走下面几步：
- 全选
<html>根节点 → 右键 →Copy outerHTML - 粘贴到 VS Code / Notepad++ 等编辑器中
- 检查是否有内联
style或onxxx事件被覆盖，这些可能不是原始源码里的 - 保存为
index.html，编码选UTF-8，扩展名必须是.html（别漏了） - 双击打开时若页面空白或样式丢失，大概率是图片/CSS/JS 路径用了绝对 URL 或相对路径没对齐
保存后浏览器打不开或样式错乱怎么办
常见原因是资源路径失效。比如原网页引用了 <link rel="stylesheet" href="/css/main.css">，但你本地没建 css/ 文件夹，也没把 main.css 下载过来。
- 打开 DevTools 的
Network面板，刷新页面，看哪些css、js、img显示404 - 把缺失的文件手动下载到对应目录，或把
href/src改成绝对 URL（如https://example.com/css/main.css） - 更稳妥的做法：用浏览器菜单栏的
文件 → 另存为 → 网页，全部，它会自动生成一个xxx_files/文件夹，把资源一并存下来 - 如果用了
file://协议打开本地 HTML，部分浏览器（如 Chrome）会禁用fetch、localStorage或跨域请求，此时应起个本地服务：python3 -m http.server 8000
想让修改上线，只改 HTML 文件远远不够
线上网站通常不是单个 HTML 文件撑起来的。你看到的页面可能是由 CMS 渲染、SSR 生成、或前端框架（React/Vue）动态挂载的。直接替换 HTML 文件往往无效，甚至会被下次构建覆盖。
立即学习“前端免费学习笔记（深入）”；
- 先确认技术栈：查看源码里有没有
id="root"、data-v-属性、或__NEXT_DATA__等线索 - 如果是静态站（纯 HTML/CSS/JS），上传前需核对 FTP/SFTP 目录路径，确保覆盖的是真实生效的文件（比如有些站点实际加载的是
/dist/index.html，不是根目录下的） - 如果是托管在 GitHub Pages / Vercel / Netlify，改完代码后必须提交 Git 并触发构建，不能只传一个 HTML
- 某些后台系统（如 WordPress）改 HTML 源码毫无意义——模板在主题文件里，内容存在数据库，得进管理后台或改 PHP 文件
最容易被忽略的一点：开发者工具里看到的 DOM 是 JavaScript 运行后的结果，而“查看页面源代码”看到的是服务器吐出的原始 HTML。两者可能完全不同。保存前务必想清楚——你到底想备份渲染结果，还是想修改源逻辑？前者复制 outerHTML 就行，后者必须找到真实源文件再动手。
