一键扒网站源码

右键“查看网页源代码”只能看到初始的HTML骨架，真正跑在浏览器里的网站DOM早就被JavaScript改得面目全非。想拿到渲染后的源码完整结构，得换条路。键扒

我上周想扒一个电商比价页面的网站商品列表，按F12复制outerHTML，源码粘到记事本里发现少了动态加载的键扒三十多个条目。刷新一下，网站页面闪两下才出来，源码源码里根本没有。键扒这时候单纯的网站“查看源代码”就是摆设。

浏览器其实留了后门。源码document.documentElement.outerHTML 这行命令扔进控制台，键扒回车，网站整个渲染后的源码DOM树——包括所有JS动态插入的节点——瞬间变成字符串。复制出来，就是一份完整的、浏览器实际渲染的源码。比右键菜单那个版本多出至少40%的内容。我第一次用的时候盯着控制台愣了两秒，原来之前扒的都是半成品。

“右键源码是出厂设置，控制台输出才是改装后的真车。”

但控制台复制有个烦人的地方：长页面会截断。超过几万字符，Chrome DevTools 直接给个 ...，复制出来缺斤少两。解决办法也简单——先 copy(document.documentElement.outerHTML)，这命令直接把字符串塞进系统剪贴板，不经过控制台显示，再长的页面也不截断。我第一次知道 copy() 这个函数的时候，感觉自己像个原始人。

还有更懒的招。写个书签小工具，地址栏里塞一行 javascript:copy(document.documentElement.outerHTML);alert('扒完了')，以后点一下书签，源码自动进剪贴板。我给自己做了个，图标是个小钩子，点一下弹个“OK”，比按F12再敲命令快三秒。三秒也是命。

扒下来的源码别直接扔给后端。里面全是浏览器自动补全的标签、内联样式、事件监听器残留的 data-* 属性。我一般先丢进 tidy 或者 prettier 过一遍，把乱七八糟的缩进和空属性清掉。有次偷懒没清，直接贴进CMS，结果多出两百多个空 class=""，页面渲染慢了半拍。

移动端页面更麻烦。桌面浏览器扒的是桌面DOM，想拿手机版得改 User-Agent 再刷新。Chrome DevTools 的设备模拟器切到iPhone，然后控制台跑同样的命令，出来的才是移动端结构。我试过用桌面版源码硬改成响应式，结果媒体查询全对不上，图片尺寸乱套。后来学乖了，要哪端就切哪端再扒。

有人问能不能一键扒多个页面。能。写个循环，把URL列表喂给 fetch，但 fetch 拿的是原始HTML，没有JS执行。想要渲染后的，得用 Puppeteer 或者 Playwright 开无头浏览器，每个页面 page.content() 一下。我拿 Puppeteer 扒过一套文档站，五十个页面，三分钟跑完，每个都带完整DOM。代价是内存吃了1.2G，风扇呼呼转。

最后说个冷门的。Chrome 的 --dump-dom 命令行参数，启动时直接输出渲染后DOM到stdout。适合塞进shell脚本里批量跑。不过它只输出一次，SPA那种路由切换后再加载的内容就抓瞎了。还是得靠 DevTools 协议。

扒源码这事，工具越顺手，越容易忘记一个事实：你扒下来的只是某一时刻的快照。页面每刷新一次，DOM可能就变一次。要精确复现，得连网络请求、时间戳、随机种子一起存。我现在的习惯是扒完立刻存一份带时间戳的副本，文件名加 _20250407_1530，省得三天后对着两份源码找不同。