Вопрос по html – Знаете ли вы компаратор внешнего вида веб-страницы?

8

Мне нужен инструмент для сравнения дизайна веб-сайта, я не хочу сравнивать только HTML-код, но дизайн вывода.

Это вообще возможно? также есть ли какая-либо программа с открытым исходным кодом такого рода?

Я искал в Google, но у меня пока есть только один кандидат - HTML Match.

Похоже на этот вопрос:stackoverflow.com/questions/31722/… rjmunro
Похоже, он ищет инструмент визуального сравнения. «Дело в том, что я не хочу сравнивать html-код, а с дизайном вывода». Sasha Chedygov
Что вы ищете? Инструмент сравнения или визуальное сравнение того, как ваш сайт будет работать в разных браузерах Josh Hunt

Ваш Ответ

8   ответов
1

Если вы используете KDE, вы можете использоватьKompare или жеKDiff3.

Однако, если вы хотите посмотреть, как ваша веб-страница выглядит в разных браузерах в разных операционных системах,BrowserShots можно использовать.

1

Под окнами:

http://www.htmlmatch.com/

Error: User Rate Limit Exceededdead (*2003, †2016Error: User Rate Limit ExceededTucows, ArchiveError: User Rate Limit ExceededSalty Brine SoftwareError: User Rate Limit Exceeded
0

Есть эти онлайн-инструменты, которые не являются блестящими:

http://www.w3.org/2007/10/htmldiff

http://www.aaronsw.com/2002/diff/

Мне нравится внешний вид daisydiff, но я не использовал его в гневе:http://code.google.com/p/daisydiff/

Error: User Rate Limit Exceededaaronsw.com/2002/diffError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
6

На современных веб-страницах внешний вид контролируется различными «вещами»: по меньшей мере, HTML-кодом, стилями CSS и изображениями (а также JavaScript на некоторых страницах). Простых текстовых разностных программ недостаточно, поскольку их вывод может не иметь отношения к внешнему виду веб-страницы (т. Е. Очистка CSS может показать много различий, но отображаемая веб-страница остается прежней).

Для более простых страниц HTML Match, упомянутый выше, может сделать эту работу. Если мне нужно сравнить дизайн двух "сложных" страниц (включая изменения макета, пространства, изображения и текста) Я бы сделал двухэтапный подход:

  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.

Это не идеально, но должно работать.

[UPDATE] HTML Match кажется мертвым, видитеэтот ответ для альтернативного решения.

Error: User Rate Limit Exceededdead (*2003, †2016Error: User Rate Limit ExceededTucows, ArchiveError: User Rate Limit ExceededSalty Brine SoftwareError: User Rate Limit Exceeded
2

Решение:& # x201C; сравнить веб-страницы & # x201D; инструмент. (& # x201C; Мы занимаемся этим с 1999 года. Это бесплатно. & # x201D;)

Пример вывода (сравнение страниц для модели USB-концентратора TP-Link)UH700 а такжеUH720):

enter image description here

Error: User Rate Limit Exceeded
0

Ключевое слово, которое вы ищете, является & quot; di, ff & quot ;.

Хорошая программа, которая может показать вам различия между двумя файлами (html-разметкой или другими) будетExamDiff для окон.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

Вы можете сделать визуальное сравнение сAraxis Merge Pro принимая вывод экрана с такими системами, какBrowserStack, Кросс-браузер, PhantomJS

0

Я работаю над одним и говорю вам, что это сложно, и на рынке ничего нет. Возможно, у Google и Bing что-то есть. Вы можете использовать некоторые инструменты сравнения изображений, которые идентифицируют прямоугольные области измененных изображений. Это, например, часть современного сжатия видео, но вы должны сделать это для разных областей веб-страницы (раздел навигационной панели, основная статья, область, отфильтрованная рекламным блокировщиком и т. Д.), Поскольку некоторые из них могут измениться. и он все еще считается тем же контентом на странице.

Как я уже сказал, очень сложная проблема без точного решения.

Другой идет не визуально и просто сравнивает результирующие вычисленные компьютерные стили каждого элемента HTML. Вы должны взломать браузер, чтобы получить доступ к дереву макетов. Для него также нет официального API или существующей библиотеки / программы / хака / патча.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded

Похожие вопросы