Html 你知道网页外观比较仪吗？

我需要一个工具来比较一个网站的设计，我不想只比较HTML代码，但输出设计

这可能吗？还有这种开源程序吗

我搜索过谷歌，但到目前为止，我只找到一个与HTML匹配的候选人。

在windows下：

---

如果您使用的是KDE，则可以使用或

---

但是，如果您想查看网页在不同操作系统的不同浏览器中的外观，可以使用。

您要查找的关键字是“diff”

---

一个可以显示两个文件（html标记或其他文件）之间差异的好程序是ExamDifffor windows

在现代网页中，外观由各种“东西”控制：html代码、css样式和图像（至少在某些网页中还有javascript）。简单的基于文本的差异程序是不够的，因为它们的输出可能与网页外观无关（即清理css可能会显示许多差异，但呈现的网页保持不变）

对于更简单的页面，上面提到的HTML匹配可以完成这项工作。如果我必须比较两个“复杂”页面的设计（包括布局、空间、图像和文本的更改），我将采用两步方法：

在html源上运行diff工具以突出显示文本内容的差异。然后我会修改其中一个页面以显示与另一个页面相同的内容（以便使下一步更准确和“集中”以显示“真实”的布局更改）。当然，它只适用于非常相似的html

在同一web浏览器中加载页面，从固定位置的渲染输出中获取一些屏幕截图，并比较图像（即与）。它应该显示渲染输出中的所有视觉差异

它不是完美的，但应该有效

---

[UPDATE]HTML匹配似乎已过时，请参阅以获取替代解决方案。

有以下在线工具，它们并不出色：

我喜欢daisydiff的外观，但没有愤怒地使用它：

解决方案：工具。（“我们从1999年就开始做了，它是免费的。”）

输出示例（比较TP-Link USB集线器型号和型号的页面）：

---

我正在做一个，我告诉你这很难，市场上什么都没有。也许谷歌和必应有一些内部的东西。您可以使用一些图像比较工具来识别更改图像的矩形区域。例如，这是所有现代视频压缩的一部分，但您必须针对网页的不同区域（导航栏部分、主要文章、被广告拦截器过滤的区域等）进行压缩，因为其中一些区域可能会发生变化，并且页面上的内容仍然相同

正如我所说，这个问题非常复杂，没有精确的解

---

另一种是非可视化的方式，只需比较每个html元素的计算结果计算机样式。您必须破解浏览器才能访问布局树。也没有官方的API或现有的库/程序/黑客/补丁。

您可以通过屏幕输出与系统进行视觉比较，例如，

您到底想要什么？一个不同的工具或一个视觉比较，你的网站将如何在不同的浏览器工作，就像他在寻找一个视觉比较工具。“问题是我不想比较代码html，但要比较输出设计。”听起来像这样的问题：“问题是我不想比较代码html，但要比较输出设计。”——所以diff不是他/她想要的。@SashaChedygov你可以称之为“rendered diff”，它应该是一个很好的关键字（虽然我仍然找不到适用于mhtml的windows free单机版）。@Quentin做的正是OP的HTML Match做的，但它是一个在线工具，而HTML Match是一个离线工具。该网站现在是（）。工作下载网站：，。幸存的公司网站：（“自1993年以来”）。HTML Match网站是（）但我刚刚找到了幸存的下载网站：，以及幸存的公司网站：（“自1993年起”）。但是，您是否显示了无法看到的元标记的差异？如果html段相同，为什么您需要对其图像表示进行差异？您可以通过更改响应自定义广告图像或推荐的其他项目摘要图像来过滤常规响应。如果您对完整的屏幕截图进行图像比较，他们会进入按照你的方式，你必须比较片段。还有其他定制的东西，如视图/计数器、登录凭据等。除非你确定页面不使用javascript来更改DOM，否则HTML+CSS不是一个好办法。如果你比较CSS+DOM，你可以用它。但这可能会产生误报。