你知道网页外观比较器吗？ [英] Do you know a webpage appearance comparator?

问题描述

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

I need a tool to compare the design of a website, I do not want to compare the HTML code only, but the output design.

这是可能的？也有这样的任何开源程序？

Is this even possible? also is there any opensource program of this kind?

我搜索google，但我只得到一个候选人到目前为止是一个HTML匹配。

I have searched google, but I only get one candidate so far which is an HTML Match.

推荐答案

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

In modern webpages the appearance is controlled by various 'things': html code, css styles and images at least (also javascript in some pages). Simple text-based diff programs are not enough because their output can be irrelevant to the webpage appearance (i.e. cleaning up css can show many differences but the rendered webpage remains the same).

对于更简单的页面上面提到的HTML Match可以做到这一点。如果我要比较两个复杂页面的设计（包括布局，空间，图像和文本的变化），我会采取两个步骤：

For simpler pages HTML Match mentioned above could do the job. If I have to compare the design of two "complex" pages (including layout, space, image and text changes) I would do a two-step approach:

1. 在html源上运行diff工具以突出显示文本内容差异。然后，我将修改其中一个页面显示与另一个相同的内容（以使下一步更准确，专注显示真正的布局更改）。


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

1. Run a diff tool on the html sources to highlight the textual content differences. Then I would modify one of the pages to show the same content as the other (in order to make the next step more accurate and 'focused' to show 'real' layout changes). Of course it works only with very similar html.
2. Load the pages in the same web browser, get some screenshots from the rendered output at fixed positions and compare the images (i.e. with ImageMagick). It should show all visual differences in the rendered output.

这不是完美的，但应该工作。

It is not perfect but should work.

[UPDATE] HTML匹配似乎已死，请参阅此答案一个替代解决方案。

[UPDATE] HTML Match seems dead, see this answer for an alternative solution.

这篇关于你知道网页外观比较器吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！