Вы знаете компаратор внешнего вида веб-страницы?
Мне нужен инструмент для сравнения дизайна веб-сайта, я не хочу сравнивать только HTML-код, но и выходной дизайн.
Это вообще возможно? также есть ли какая-либо программа opensource такого рода?
Я искал google, но до сих пор я получаю только одного кандидата, который соответствует HTML.
8 ответов
в современных веб-страницах внешний вид контролируется различными "вещами": html-кодом, стилями css и изображениями, по крайней мере (также javascript на некоторых страницах). Простых текстовых программ diff недостаточно, потому что их вывод может не иметь отношения к внешнему виду веб-страницы (т. е. очистка css может показать много различий, но отображаемая веб-страница остается той же).
для более простых страниц HTML Match, упомянутый выше, может выполнить эту работу. Если мне нужно сравнить дизайн двух "сложных" страниц (включая изменения макета, пространства, изображения и текста) я бы сделал двухэтапный подход:
- запустите инструмент diff на источниках html, чтобы выделить текстовые различия в содержимом. Затем я бы изменил одну из страниц, чтобы показать тот же контент, что и другой (чтобы сделать следующий шаг более точным и "сфокусированным", чтобы показать "реальные" изменения макета). Конечно, он работает только с очень похожим html.
- загрузите страницы в том же веб-браузере, получите несколько скриншотов из визуализированный вывод в фиксированных положениях и сравнение изображений (т. е. с ImageMagick). Он должен показывать все визуальные различия в выводе.
Это не идеально, но должно работать.
[обновление] HTML матч кажется мертвым, см. ответ альтернативного решения.
устранение: "сравнение веб-страниц". ("Мы занимаемся этим с 1999 года. Это бесплатно.")
пример вывода (сравнение страниц для модели USB-концентратора TP-Link UH700 и UH720):
Если вы используете KDE, вы можете использовать Kompare или KDiff3.
однако, если вы хотите посмотреть, как ваша веб-страница выглядит в разных браузерах в разных операционных системах,BrowserShots может использоваться.
ключевое слово, которое вы ищете, - "diff".
хорошая программа, которая может показать вам различия между двумя файлами (HTML-разметка или другие) будет ExamDiff для windows.
есть эти онлайн-инструменты, которые не являются блестящими:
http://www.w3.org/2007/10/htmldiff
http://www.aaronsw.com/2002/diff/
Мне нравится вид daisydiff, но не использовали его в гневе:http://code.google.com/p/daisydiff/
Я работаю над одним, и я говорю вам, что это трудно, и на рынке ничего нет. Может быть, у Google и Bing есть что-то внутри. Вы можете использовать некоторые инструменты сравнения изображений, которые идентифицируют области прямоугольника измененных изображений. Это, например, часть всего современного сжатия видео, но вы должны сделать это для разных регионов веб-страницы (раздел панели навигации, основная статья, область, отфильтрованная рекламным блокиратором и т. д.) поскольку некоторые из них могут измениться, и это все еще считается тем же контентом на странице.
Как я уже сказал, очень сложная проблема без точного решения.
другой идет не визуальным способом и просто сравнивает результирующие вычисленные компьютерные стили каждого элемента html. Вы должны взломать браузер, чтобы получить доступ к дереву макета. Для него также нет официального API или существующей библиотеки/программы/Хака/патча.
вы можете сделать визуальное сравнение с Araxis Merge Pro путем принимать выход экрана с системами как BrowserStack, Кросс-Браузер, PhantomJS