Elysia Tools
导航
Development
以多个视口宽度渲染 URL，并在页面内直观查看截图、像素差异热力图和布局指标。
详情
通过无头 Chromium 在最多六个视口中渲染同一页面，截取固定视口截图，再缩放至共同画布并以热力图标记变化像素。结果报告直接展示截图、热力图与视口 DOM 指标，并保留 ZIP 下载。它测量渲染像素变化，不声称语义元素匹配或 PR 基线比较。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
响应式断点可视 Diff 工具能够帮助前端开发人员和设计师在多个视口宽度下快速渲染指定 URL。通过无头 Chromium 浏览器，该工具可自动截取不同断点的页面截图，并在共同画布上生成像素差异热力图，直观展示布局变化与 DOM 指标，同时支持打包下载包含截图与差异报告的 ZIP 文件。
背景
正在重构一个企业官网的导航栏，需要确保在移动端折叠菜单与平板端展开菜单之间的过渡期没有布局崩坏。
问题
需要确认在 375px（手机）和 768px（平板）视口下，导航栏的视觉元素变化是否符合设计稿，并找出布局突变的像素区域。
如何使用
在“网站 URL”中输入测试环境地址，在“视口宽度”中填写 `375,768`，设置“加载后等待”为 `1000` 毫秒以确保 JS 菜单初始化完成，对比模式选择“相邻断点”。
url: "https://dev.example.com/nav-test", viewportWidths: "375,768", waitMilliseconds: 1000, comparisonMode: "adjacent"结果
成功生成 375px 和 768px 的渲染截图，并在热力图上清晰标出导航栏从汉堡按钮切换为横向菜单时的像素变化区域，同时下载了包含两张截图的 ZIP 包。
背景
电商网站的商品列表采用响应式网格布局，在宽屏和窄屏下的卡片宽度不同。
问题
设计师需要确认卡片在拉伸过程中，图片是否变形，以及文字排版是否出现溢出。
如何使用
输入商品列表页面的 URL，将视口宽度设置为 `375,1024,1440`，对比模式选择“全部对比最大宽度”，以便将窄屏布局直接与 1440px 宽屏进行像素级热力图对比。
url: "https://example.com/shop", viewportWidths: "375,1024,1440", comparisonMode: "widest"结果
工具通过无头 Chromium 截取不同视口的页面，将它们缩放到相同的画布尺寸，然后逐像素对比并生成高亮显示差异的像素热力图。
最多支持同时输入并渲染 6 个不同的视口宽度，您可以用逗号分隔它们（例如 375,768,1024,1440）。
您可以尝试增加“加载后等待（毫秒）”的数值，给页面预留更多的时间来加载异步数据、图片或执行入场动画。
“相邻断点”模式会对比分辨率相邻的两个视口（如 375px 对比 768px），而“全部对比最大宽度”模式则会将所有较窄的视口统一与最宽的视口进行像素对比。
本工具主要用于单次 URL 的多视口响应式布局快速审查与像素差异可视化，不提供基于 Git 提交或 PR 的历史基线版本对比功能。
获得了一份直观的 HTML 报告，显示了 375px 和 1024px 视口相对于 1440px 视口的像素差异热力图，帮助设计师快速定位到因容器拉伸导致图片比例失调的卡片组件。