Chrome DevTools的Capture full size screenshot是最可靠零依赖全页截图方案，基于Blink引擎真实渲染快照，完整支持阴影、滤镜、SVG、WebGL等效果，不拼接不模拟；而html2canvas等库仅靠CSS解析重绘，对字体、跨域图、伪元素、Flex/Grid等支持极弱，仅适用于简单静态模块。
Chrome DevTools 的 Capture full size screenshot 是目前最可靠、零依赖的全页截图方案，它基于 Blink 渲染引擎快照，能真实还原阴影、滤镜、SVG、WebGL 纹理等所有视觉效果，不拼接、不模拟、不解析 DOM。
为什么不用 html2canvas 或 dom-to-image 做全页截图
多数人一上来就调用 html2canvas(document.body)，结果截图空白、样式错乱、中文字体不显示、Flex/Grid 布局塌陷——根本原因是它们不走真实渲染流程，而是靠 CSS 解析 + canvas 重绘。对 @font-face、跨域图片、::before/::after、transform、filter、position: sticky 支持极弱。dom-to-image 更差，连 mask 和 clip-path 都无法处理。
这些库适合简单静态模块截图（比如卡片、表单），但不适合「全页」或「含复杂交互/动画」的页面。
Chrome DevTools 全页截图的正确操作步骤
关键不是按快捷键，而是确保页面状态稳定、滚动位置归零、资源加载完成：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 打开目标 HTML 文件（本地文件需通过
python -m http.server或http-server启动服务，否则 DevTools 拒绝截图） - F12 打开开发者工具 → Ctrl+Shift+P（或 Cmd+Shift+P）→ 输入
Capture full size screenshot→ 回车 - 若页面有固定定位导航栏或吸底按钮，截图会包含重复内容；可先临时加
body { scroll-padding-top: 60px }或手动滚动到顶部再执行 - 截图结果是 PNG，无损、无压缩、带透明背景（若页面根元素背景为 transparent）
常见失败原因和绕过方法
报错 Unable to capture screenshot: Not supported for this target 或直接无响应？大概率是以下之一：
- 页面未通过 HTTP(S) 协议访问（即双击打开
file://路径）→ 必须用本地服务器，如python3 -m http.server 8000，然后访问http://localhost:8000/index.html - 页面含未加载完成的 iframe（尤其跨域）→ 等 iframe ready 后再触发，或在控制台执行
document.querySelectorAll('iframe').forEach(i => i.contentDocument?.readyState === 'complete')确认 - 启用了某些浏览器扩展（如广告屏蔽器、Dark Reader）→ 尝试无痕窗口（Ctrl+Shift+N）复现
- 截图时页面正在执行 JS 动画或滚动 → 先暂停：在 Console 中输入
document.documentElement.style.animation = 'none'; document.documentElement.style.transition = 'none'
需要自动化或批量截图时怎么选
DevTools 命令是手动的，但底层协议可编程。如果真要批量跑，优先用 Puppeteer 而非 Selenium：
-
page.screenshot({ fullPage: true })最简，但内存占用高、易 OOM，适合单页 - 长页面建议分段截：
page.screenshot({ clip: { x: 0, y: scrollY, width: 1200, height: 1080 } })+ 滚动循环，再用 PIL 拼接 - 务必加等待：用
await page.waitForNetworkIdle({ timeout: 5000 })，比waitUntil: 'networkidle2'更稳 - 避免
html2canvas在 Node.js 环境调用——它本就是前端库，服务端无 DOM，强行跑会报document is not defined
真正难的从来不是“怎么截”，而是“截哪一刻”：字体加载完成没？WebFont 是否回退？Canvas 动画帧是否静止？这些状态没法靠超时硬等，得结合 performance.getEntriesByType('font') 或自定义事件监听。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
