我需要一个工具来比较网站的设计，我不想只比较 HTML 代码，而是输出设计。
这甚至可能吗？还有这种开源程序吗？
我搜索了谷歌，但到目前为止我只得到了一个候选人，那就是 HTML 匹配。
问问题
14936 次
8 回答
6
在现代网页中，外观由各种“事物”控制：至少是 html 代码、css 样式和图像（在某些页面中也是 javascript）。简单的基于文本的差异程序是不够的，因为它们的输出可能与网页外观无关（即清理 css 可以显示许多差异，但呈现的网页保持不变）。
对于更简单的页面，上面提到的 HTML Match 可以完成这项工作。如果我必须比较两个“复杂”页面的设计（包括布局、空间、图像和文本更改），我会采用两步法：
- 在 html 源代码上运行差异工具以突出显示文本内容差异。然后我会修改其中一个页面以显示与另一个页面相同的内容（以使下一步更准确和“集中”以显示“真实”布局更改）。当然，它只适用于非常相似的 html。
- 在同一个网络浏览器中加载页面，在固定位置从渲染输出中获取一些屏幕截图并比较图像（即使用ImageMagick）。它应该显示渲染输出中的所有视觉差异。
它并不完美，但应该可以工作。
[更新] HTML 匹配似乎已死，请参阅此答案以获取替代解决方案。
于 2009-06-30T04:45:41.937 回答
3
于 2016-10-09T13:30:12.647 回答
1
于 2009-06-30T02:40:10.857 回答
1
如果您使用的是 KDE，则可以使用Kompare或KDiff3。
但是，如果您想查看您的网页在不同操作系统的不同浏览器中的外观，可以使用BrowserShots 。
于 2009-06-30T03:56:34.887 回答
1
有这些在线工具 - 并不出色：
http://www.w3.org/2007/10/htmldiff
http://www.aaronsw.com/2002/diff/
我喜欢 daisydiff 的外观，但没有在愤怒中使用它：http ://code.google.com/p/daisydiff/
于 2010-08-31T10:58:15.947 回答
0
您要查找的关键字是“diff”。
一个可以显示两个文件（html 标记或其他）之间差异的好程序是Windows 的ExamDiff。
于 2009-06-30T04:19:02.367 回答
0
我正在研究一个，我告诉你这很难，市场上没有任何东西。也许谷歌和必应在内部有一些东西。您可以使用一些图像比较工具来识别更改图像的矩形区域。例如，这是所有现代视频压缩的一部分，但您必须针对网页的不同区域（导航栏部分、主要文章、由广告拦截器过滤的区域等）执行此操作，因为其中一些可能会改变它仍然被认为是页面上的相同内容。
正如我所说的非常复杂的问题，没有确切的解决方案。
另一种是采用非可视化方式，仅比较每个 html 元素的计算结果计算机样式。您必须破解浏览器才能访问布局树。也没有官方 API 或现有的库/程序/黑客/补丁。
于 2017-05-26T01:57:38.963 回答
0
您可以通过使用BrowserStack、Cross Browser、PhantomJS等系统获取屏幕输出来与Araxis Merge Pro进行视觉比较
于 2018-06-19T11:40:25.813 回答