打开浏览器，网站完整按下F12，源码你看到的工具代码和服务器上跑的代码是两码事。前端框架会把DOM改得面目全非，网站完整JavaScript动态注入的源码内容在“查看源代码”里连影子都没有。想拿到一个网站真正完整的工具源码，靠右键另存为基本是网站完整白费力气。

我上个月想扒一个设计参考站的源码CSS变量，用Chrome的工具“查看网页源代码”打开，满屏都是网站完整<div id="app"></div>。整个页面是源码Vue渲染的，原始HTML就是工具个空壳。这时候需要的网站完整是能执行JS、等页面渲染完再抓取的源码工具。

wget和curl：老派但管用

命令行工具里，工具wget的--page-requisites参数能把页面依赖的CSS、JS、图片全拽下来。但遇到SPA（单页应用）就歇菜——它拿到的还是那个空壳。curl同理，除非你手动分析API请求，用curl去调接口拿JSON数据，再自己拼出完整内容。这招对懂网络面板的人有效，普通用户直接劝退。

HTTrack：离线整站下载

HTTrack是个老牌工具，Windows和Linux都有。它会递归抓取站内链接，把整个网站镜像到本地。我拿它下过一个文档站，大概三百多页，跑了一刻钟。问题是它默认不执行JavaScript，对现代前端站点效果差。设置里能调“抓取深度”和“排除路径”，但面对动态路由（比如/post/:id）经常抓不全。适合静态博客或者老式网站。

Chrome DevTools + 本地覆盖

更实际的做法：打开开发者工具，切到“源代码”面板，在左侧文件树里能看到所有加载的资源。右键保存单个JS或CSS文件。想要整页渲染后的DOM，在控制台输入document.documentElement.outerHTML，回车后复制结果。这拿到的是运行时快照，包含所有动态插入的节点。缺点是内联样式和事件监听器不会体现在HTML里，但作为源码参考已经够用。

Puppeteer和Playwright：程序化抓取

写代码的话，Puppeteer最顺手。启动无头浏览器，page.goto(url)，等networkidle事件，然后page.content()拿到完整HTML。想抓CSS和JS？监听response事件，把text/css和application/javascript的响应体存下来。我写过一个脚本抓取某在线工具站的源码，二十行代码，连字体文件都一并下载了。Playwright的API类似，跨浏览器支持更好。这法子对反爬不强的站点几乎通杀。

SingleFile扩展：一键保存

不想写代码就用SingleFile。Chrome和Firefox都有扩展，点一下图标，它把当前页面所有资源内联成一个HTML文件。CSS、图片转base64，JS直接嵌在<script>里。我拿它存过一篇长文，打开本地文件跟在线看几乎一样。缺点是文件体积大，一个普通页面能到几MB。适合存档，不适合分析代码结构。

几个坑

Cloudflare的JS挑战会让无头浏览器卡住，得配合puppeteer-extra-plugin-stealth。有些站点检测navigator.webdriver，需要手动改。还有，别拿这些工具去抓人家后台或者付费内容——技术本身中立，用在哪是自己的事。

工具选型看场景：静态页用wget，动态页用Puppeteer，偶尔存一篇用SingleFile。没有哪个工具能100%还原服务器上的原始文件，但拿到渲染后的完整DOM和资源，对大多数分析需求已经够了。