如何完整保存微软（GitHub等）网页以在Chrome或Firefox内核浏览器中正常渲染？

老兄，我完全懂你遇到的这种糟心情况——现在很多网页尤其是微软Learn、GitHub这类动态化程度高的站点，用浏览器自带的保存功能存下来后，要么CSS乱套，要么动态内容直接消失，跟你描述的一模一样！结合我折腾这类问题的经验，给你几个实用的解决办法：

• 调整浏览器自带保存的选项：别选“网页，仅HTML”，一定要用“网页，完整”（Chrome里叫「完整网页」，Firefox是「网页，全部」）。不过这个方法对动态DOM驱动的站点（比如微软Learn那种靠JS修改页面结构的）效果有限，因为它只能保存页面初始加载时的静态资源，后续JS生成的内容抓不到。

• 用SingleFile插件并优化设置：你提到的SingleFile其实是目前最靠谱的工具之一，但得调整它的配置才能适配这类动态站点：

  • 开启「保存执行JavaScript后的DOM」选项，确保把JS渲染后的最终页面结构存下来，而不是初始的空架子；
  • 勾选「包含所有资源」和「将相对路径替换为绝对路径」，避免本地打开时找不到CSS、图片等资源；
  • 针对微软Learn这类有内联动态代码的站点，额外开启「保存懒加载的资源」，确保所有折叠的章节、代码块都被完整保存。

• 试试打印存PDF的方式：如果只是需要离线阅读，用浏览器的打印功能（快捷键Ctrl+P），然后选择「另存为PDF」。这个方法会强制浏览器渲染所有可见内容，包括动态生成的代码块、折叠内容，而且PDF的渲染一致性比HTML好太多，完全不用担心CSS失效的问题。

• 手动复制DOM（进阶操作）：如果上面的方法都不行，还可以用开发者工具手动抓页面：

  1. 按F12打开开发者工具，切换到「Elements」面板；
  2. 右键点击最顶层的<html>标签，选择「Copy > Copy outer HTML」；
  3. 新建一个HTML文件，把复制的内容粘贴进去；
  4. 手动下载页面用到的CSS、JS资源，把HTML里的资源路径改成本地路径。这个方法比较繁琐，但适合需要定制化保存的场景。

另外，保存前记得让页面完全加载，最好滚动到底部，把所有懒加载的内容都触发出来，不然存下来的页面可能会有空白区域。

备注：内容来源于stack exchange，提问作者FredThompson