右键“另存为”常失效，因现代网页依赖JS动态渲染，仅保存空壳HTML；需用DevTools复制outerHTML或headless Chrome dump-dom获取真实DOM，但离线运行仍受路径、CSP等限制。
浏览器右键“另存为”为什么经常失效
因为现代网页大量依赖 JavaScript 动态渲染，右键 → 另存为只能保存初始 HTML（可能只有 <div id="root"></div>），真实内容根本没写进去。
真正起作用的是浏览器开发者工具里的“保存完整网页”能力，但得手动触发——不是右键菜单，而是通过 Elements 面板或 Network 面板抓取最终 DOM 或响应体。
- 静态页面（纯 HTML/CSS）：右键另存为基本可用
- React/Vue/Angular 页面：必须用 DevTools 保存渲染后 DOM
- 带登录态或反爬逻辑的页面：直接另存为会 403 或跳登录页
用 Chrome DevTools 保存渲染后的完整 HTML
打开 F12 → 切到 Elements 标签页 → 右键最外层 节点 → 选择 Copy → Copy outerHTML，然后粘贴到编辑器里保存为 .html 文件。
注意这不是“一键保存”，但能拿到 JS 执行完的真实结构。如果页面有内联样式或动态 script 标签，它们也会被复制进来。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 不包含外部 CSS/JS 文件，只保存当前 DOM 快照
- 图片、字体等资源链接仍是相对路径或绝对 URL，离线打不开
- 如果页面用了
Shadow DOM，需手动展开并复制对应节点
用 curl + headless Chrome 保存带 JS 渲染的页面
命令行下想自动化保存，就得让浏览器真跑一遍 JS。用 puppeteer 或 playwright 最稳，但最轻量的是 Chrome 自带的 headless 模式：
chrome --headless --disable-gpu --dump-dom https://example.com > page.html
这行命令会启动无界面 Chrome，执行 JS，然后输出最终 DOM 到文件。比 curl 直接请求强得多，因为 curl 拿不到 JS 渲染结果。
- 必须安装 Chrome（或 Chromium），且版本 ≥ 90
-
--dump-dom输出的是未格式化的 HTML，可加--crash-dumps-dir避免权限问题 - 遇到需要等待加载完成的页面（比如懒加载图片），得换
puppeteer控制page.waitForNetworkIdle
保存后打开是空白？检查这三处
即使 DOM 保存成功，本地双击打开仍可能白屏——不是保存错了，而是浏览器安全策略或路径问题。
- 页面引用了
http://资源但你本地用file://打开 → 浏览器会拦截混合内容，换成http-server或python3 -m http.server启个本地服务 - JS 里写了
window.location.origin或 API 请求硬编码域名 → 离线时调用失败，控制台报CORS或net::ERR_FAILED - HTML 里用了
<base href="/>%EF%BC%8C%E5%AF%BC%E8%87%B4%E6%89%80%E6%9C%89%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E6%8C%87%E5%90%91%E6%A0%B9%E7%9B%AE%E5%BD%95%20%E2%86%92%20%E4%BF%9D%E5%AD%98%E5%90%8E%E6%9C%AC%E5%9C%B0%E8%B7%AF%E5%BE%84%E9%94%99%E4%B9%B1%EF%BC%8C%E5%88%A0%E6%8E%89%E8%BF%99%E8%A1%8C%E6%88%96%E6%94%B9%E6%88%90%20<base%20href=" .>
真正麻烦的从来不是“怎么存”，而是“存下来之后能不能跑”。动态资源路径、运行时依赖、CSP 策略——这些不会在保存动作里体现，但决定你双击打开时看到的是内容还是空白页。
