简介这是一款面向开发者、SEO优化人员及网站备份需求者的整站扒站工具主打快速、一键式获取网页静态资源解决企业站、商城类网站本地镜像构建与离线分析难题。压缩包为RAR格式共217个文件、5.17MB包含69个HTML页面构成站点骨架、42个GIF与5个PNG图片视觉资源、35个TXT配置与说明文档、9个EXE可执行文件含便携版HTTrackPortable主程序、17个DLL动态库支撑功能模块以及C源码、CSS样式、INI配置等辅助文件结构完整开箱即用。已有4134人学习下载。用户可直接运行HTTrackPortable实现全站递归抓取自动重建链接关系与目录层级包内还提供Makefile.am、callbacks-example系列C示例代码及日志、readme等配套材料便于理解扒站原理、调试参数或二次开发是实践网页抓取、离线浏览与内容归档的实用型工具集。1. 网站整站扒站工具更快的获取网页静态代码不是爬虫是结构化快照引擎你有没有遇到过这样的场景前端团队要复刻一个竞品官网的视觉层但对方用了 Vue SSR 动态路由 Webpack 分包F12 里看到的 DOM 是运行时拼出来的Network 面板里全是chunk-xxx.js和/api/menu又或者安全审计需要比对某政务站点在 CDN、源站、WAF 后的真实 HTML 输出差异但curl -s只能拿首页wget --mirror却卡在 JS 跳转、AJAX 渲染、Token 校验上这时候“扒站”早已不是早期那种wget -r -l 5的粗暴镜像——它本质是一个带渲染能力的静态快照采集系统既要绕过前端框架的动态屏障又要保留原始 HTML/CSS/JS 的文件拓扑关系还要控制资源深度、去重逻辑和响应头继承。本篇讲的不是通用爬虫而是专为“获取网页静态代码”这一明确目标设计的轻量级整站快照工具链。它不模拟用户行为不登录、不提交表单、不触发事件只做一件事以最短路径、最高保真度把目标网站当前可访问的 HTML 结构及其依赖资源CSS、JS、图片、字体按真实引用关系下载到本地生成可离线打开、可 diff、可进 CI 流程的静态副本。适合前端架构师做 UI 沉淀、安全人员做基线比对、SEO 工程师做渲染一致性验证——如果你的需求是“我要一份和浏览器地址栏输入 URL 后 F12 查看源代码一模一样的 HTML 文件树”那它就是你要找的。2. 为什么不用 wget/curl从原理选型看“静态代码快照”的三个硬约束2.1 渲染层缺失传统工具的致命盲区wget和curl是纯 HTTP 客户端它们只管发请求、收响应体完全不执行 JavaScript。而现代网站中关键 HTML 内容往往由 JS 动态注入Vue Router 的router-view、React 的ReactDOM.createRoot().render()、甚至简单的document.write()都会让wget -r下载到的 HTML 是空壳如div idapp/div。这不是“没下全”而是根本没触发内容生成。我们曾用wget --convert-links --page-requisites --no-parent https://example.com对一个 Next.js 站点执行结果所有页面 HTML 文件大小均小于 2KB而实际浏览器渲染后 DOM 节点超 3000 个。这说明无渲染能力的工具在 SPA 时代已失去“获取静态代码”的资格。2.2 资源拓扑断裂相对路径与构建产物的错位即使网站是纯静态的wget的资源下载逻辑也常导致文件引用失效。例如源站 CSS 中写background: url(../images/logo.png)而wget默认将logo.png下载到images/logo.png但若 CSS 文件被下载到css/main.css则相对路径../images/logo.png在本地打开时会指向css/../images/logo.png→images/logo.png看似正确。但当网站使用 Webpack 构建时logo.png可能被哈希重命名为logo.a1b2c3.png并放在static/img/目录下而 CSS 中的引用是url(/static/img/logo.a1b2c3.png)绝对路径。wget无法识别这种构建产物的映射关系只会按原始 URL 下载导致本地 CSS 仍引用旧路径图片 404。真正的静态快照必须重建资源间的语义依赖而非机械复制 URL 路径。2.3 控制粒度粗糙深度、范围、状态不可控wget -l 5的“深度”是按 URL 路径层级算的/a/b/c.html算 3 层但现代前端路由是前端控制的/user/profile和/user/settings可能由同一份 JS 渲染wget却会当成两个独立页面反复请求。更严重的是它无法区分“真实页面”和“API 接口”——只要 URL 符合-l规则/api/v1/data这类 JSON 接口也会被下载为.html文件污染快照目录。而我们需要的是只抓取被a href显式链接的 HTML 页面且每个页面的 JS/CSS/图片仅下载一次无论被多少页面引用。这要求工具具备 DOM 解析能力能从 HTML 中提取src/href/>const puppeteer require(puppeteer); const fs require(fs).promises; const path require(path); async function takeSingleSnapshot(url, outputPath) { const browser await puppeteer.launch({ headless: new }); const page await browser.newPage(); // 关键禁用图片加载加速快照不影响 HTML/CSS/JS 获取 await page.setRequestInterception(true); page.on(request, (req) { if (req.resourceType() image) req.abort(); else req.continue(); }); await page.goto(url, { waitUntil: networkidle0 }); // 等待网络空闲 const html await page.content(); // 获取完整渲染后 HTML await fs.writeFile(outputPath, html, utf8); console.log(✅ 已保存 ${url} 到 ${outputPath}); await browser.close(); } takeSingleSnapshot(https://example.com, ./snapshot.html);这段代码做了三件关键事setRequestInterception拦截图片请求避免下载大图拖慢速度HTML 中img标签仍在只是src不加载waitUntil: networkidle0确保所有网络请求包括 JS 动态 fetch完成后再取 HTML比domcontentloaded更可靠page.content()返回的是浏览器最终渲染的 HTML 字符串包含 JS 注入的内容这才是真正的“静态代码”。3.2 扩展为整站快照广度优先遍历 资源提取单页不够需自动发现并抓取全站。我们改用广度优先搜索BFS从入口 URL 开始解析 HTML 中所有a href链接过滤出同域、非外链、非锚点的 URL逐个快照。同时为每个页面提取其依赖的 CSS/JS/字体等资源const puppeteer require(puppeteer); const { URL } require(url); const fs require(fs).promises; class SiteSnapshot { constructor(baseURL, options {}) { this.baseURL new URL(baseURL); this.maxPages options.maxPages || 100; this.visited new Set(); this.queue [baseURL]; } async run() { const browser await puppeteer.launch({ headless: new }); const page await browser.newPage(); while (this.queue.length 0 this.visited.size this.maxPages) { const url this.queue.shift(); if (this.visited.has(url)) continue; this.visited.add(url); try { await page.goto(url, { waitUntil: networkidle0, timeout: 30000 }); const html await page.content(); const parsedUrl new URL(url); const filename ${parsedUrl.hostname}${parsedUrl.pathname.replace(/\//g, _) || _index}.html; await fs.writeFile(./snapshots/${filename}, html, utf8); // 提取本页所有 CSS/JS/字体链接 const resources await page.evaluate(() { const links Array.from(document.querySelectorAll(link[relstylesheet], link[relpreload][asfont], script[src])) .map(el el.href || el.src) .filter(src src !src.startsWith(data:) !src.startsWith(blob:)); return [...new Set(links)]; // 去重 }); console.log( ${url} - ${filename}, 提取资源 ${resources.length} 个); await this.downloadResources(resources, page); } catch (err) { console.warn(⚠️ 快照失败 ${url}:, err.message); } } await browser.close(); } async downloadResources(urls, page) { for (const url of urls) { try { const response await page.goto(url, { waitUntil: networkidle0, timeout: 10000 }); if (response?.ok()) { const buffer await response.buffer(); const filename new URL(url).pathname.split(/).pop() || resource; await fs.writeFile(./snapshots/${filename}, buffer); } } catch (err) { console.debug(❌ 资源下载失败 ${url}:, err.message); } } } } // 启动 new SiteSnapshot(https://example.com, { maxPages: 50 }).run();这个脚本的关键升级在于BFS 队列管理this.queue存储待抓取 URLthis.visited防止重复资源提取逻辑page.evaluate()在浏览器上下文中执行能准确获取 JS 动态添加的link和script标签比服务端解析 HTML 更可靠资源下载隔离每个资源单独page.goto()避免page.content()只返回 HTML 而漏掉二进制资源。注意page.goto()下载资源时Puppeteer 会自动处理重定向、响应头如Content-Type所以buffer可直接写入文件无需手动解析 MIME 类型。4. 整站快照的 5 个必调参数从 URL 过滤到资源去重4.1--max-depth不是路径深度而是跳转链长度很多工具文档写“设置最大抓取深度”但对前端路由无效。我们定义maxDepth为从入口 URL 出发通过a标签跳转的最大边数。例如/→/products→/products/detail?id123是 2 跳。实现时在 BFS 队列中存储{url, depth}对象this.queue.push({ url: baseURL, depth: 0 }); // ... const { url, depth } this.queue.shift(); if (depth this.maxDepth) continue; // 跳过更深链接 // 解析出新链接后入队 {url: newUrl, depth: depth 1}这样能精准控制导航范围避免陷入/blog/page/1→/blog/page/2的无限分页。4.2--include-pattern与--exclude-pattern正则驱动的 URL 白名单硬编码过滤太脆弱。我们支持传入正则字符串如--include-pattern ^/((products|about|contact)/?$)只抓产品、关于、联系页--exclude-pattern \.(pdf|zip|exe)$|/admin/|/api/排除二进制文件、后台路径、API 接口。在解析a时应用const includeRegex new RegExp(options.includePattern || .*); const excludeRegex new RegExp(options.excludePattern || ^$); // ... if (!includeRegex.test(href) || excludeRegex.test(href)) continue;4.3--resource-dedup基于 Content-MD5 的全局资源去重同一张 logo 图片可能被 20 个页面引用wget会下载 20 次。我们为每个资源计算 MD5只保存首次出现的副本并在 HTML 中替换为本地路径const md5 require(md5); // ... const hash md5(buffer); if (!this.resourceHashes.has(hash)) { this.resourceHashes.set(hash, filename); await fs.writeFile(./snapshots/${filename}, buffer); } // 替换 HTML 中的 src/href html html.replace(new RegExp(${url}, g), ./${this.resourceHashes.get(hash)});4.4--timeout与--retry应对不稳定网络的弹性策略page.goto()默认 30 秒超时但某些页面 JS 执行慢或 CDN 延迟高。我们增加重试机制async function gotoWithRetry(page, url, options, maxRetries 3) { for (let i 0; i maxRetries; i) { try { return await page.goto(url, { ...options, timeout: 60000 }); } catch (err) { if (i maxRetries) throw err; console.log( 重试 ${url} (${i 1}/${maxRetries})); await new Promise(r setTimeout(r, 2000)); } } }4.5--output-dir与--flat目录结构决定后期维护成本默认按 URL 路径生成嵌套目录/products/list.html→./snapshots/products/list.html但有时需要扁平化所有 HTML 放根目录用url-encode命名。--flat参数开启后const safeFilename encodeURIComponent(url).replace(/[^a-z0-9._-]/gi, _); await fs.writeFile(./snapshots/${safeFilename}.html, html);扁平化便于grep全局搜索嵌套化则利于人工浏览——根据你的下游用途选择。5. 整站快照避坑指南5 条血泪经验总结5.1 现象快照 HTML 中大量!-- HTML comment --被清空但源站有重要注释原因Puppeteer 的page.content()方法返回的是序列化后的 DOM而浏览器在解析 HTML 时会丢弃部分注释尤其是跨标签的、含特殊字符的。这不是 bug是标准 DOM 行为。解决改用page.evaluate(() document.documentElement.outerHTML)它返回原始 HTML 字符串保留所有注释。但注意此方法不包含base标签的修正需手动补全。5.2 现象CSS 文件下载后本地打开显示乱码中文变方块原因源站 CSS 响应头Content-Type: text/css; charsetutf-8正确但 Puppeteerresponse.buffer()返回的是二进制fs.writeFile默认用 UTF-8 解码若 CSS 文件实际是 GBK 编码国内老站常见就会乱码。解决检测响应头charset或用iconv-lite库自动探测编码const iconv require(iconv-lite); const buffer await response.buffer(); const encoding response.headers()[content-type]?.match(/charset(\S)/)?.[1] || utf8; const content iconv.decode(buffer, encoding); await fs.writeFile(./snapshots/${filename}, content);5.3 现象快照中script typemodule的import路径全部 404原因ESM 模块的import是运行时解析的page.evaluate()提取的script[src]只拿到外链脚本漏掉了import ./utils.js这类相对路径模块。解决对每个 JS 文件内容做正则扫描提取import.*?from\s[]([^])[]加入资源队列。注意处理./、../、/开头的路径需结合当前 JS 文件 URL 计算绝对路径。5.4 现象img>const cleanHTML await page.evaluate(() { // 移除所有>const pixelmatch require(pixelmatch); const { PNG } require(pngjs); async function compareRenderings(url, envA, envB) { const browserA await puppeteer.launch({ executablePath: envA.executable }); const pageA await browserA.newPage(); await pageA.goto(url, { waitUntil: networkidle0 }); const screenshotA await pageA.screenshot(); const browserB await puppeteer.launch({ executablePath: envB.executable }); const pageB await browserB.newPage(); await pageB.goto(url, { waitUntil: networkidle0 }); const screenshotB await pageB.screenshot(); const img1 PNG.sync.read(screenshotA); const img2 PNG.sync.read(screenshotB); const { width, height } img1; const diff new PNG({ width, height }); const numDiffPixels pixelmatch( img1.data, img2.data, diff.data, width, height, { threshold: 0.1 } ); await fs.writeFile(./diff.png, PNG.sync.write(diff)); return { numDiffPixels, isSame: numDiffPixels 0 }; }当numDiffPixels 0说明两个环境渲染存在像素差异——可能是字体回退、CSS Grid 布局兼容性、或 Canvas 绘图精度问题。这比 DOM 结构比对更底层、更真实。6.3 快照即文档自动生成网站静态 API 文档很多网站的“静态代码”本身就是接口文档。例如一个展示商品列表的页面其 HTML 中div classproduct>const schema await page.evaluate(() { const products Array.from(document.querySelectorAll(.product)).map(el ({ id: el.dataset.id, price: el.dataset.price, name: el.querySelector(.name)?.textContent?.trim(), })); return { products, timestamp: Date.now() }; }); await fs.writeFile(./snapshots/api-schema.json, JSON.stringify(schema, null, 2));这样快照目录里不仅有 HTML还有api-schema.json可直接作为前端 Mock 数据源或 QA 测试用例。我坚持把快照工具当“显微镜”用而不是“复印机”。每次运行前我会问自己这次快照要回答什么问题是验证 CDN 是否缓存了错误 HTML还是确认新版本发布后某个按钮的class名没被误删答案决定了参数怎么调、哪些坑必须绕。工具没有银弹但清晰的目标能让每一步操作都落在实处。希望帮到你。本文还有配套的精品资源点击获取