Как посмотреть, как выглядит мой веб-сайт в разных браузерах?

46

Как посмотреть, как выглядит мой веб-сайт в разных браузерах?

Если не считать фактически установленную версию браузера, есть ли какой-либо инструмент или сервис, который может обеспечить предварительный просмотр?

browsers html Крис В. Ри
источник

Ответы:

38
vmarquez
источник
2
Мне нравятся комментарии в скобках, хороший ответ.
Ларри Смитмиер
32

BrowsersShots и BrowserLabs то , что я могу вспомнить с верхней части моей головы. Я думаю, что есть кое-что еще, что я использовал, но я не могу вспомнить имя прямо сейчас.

Редактировать: К сожалению, Adobe закрыла свой проект BrowserLab еще 13 марта 2013 года.

Ребекка Чернофф
источник
1
Просто убедитесь, что с BrowserShots вы отмените выбор всего, а затем просто выберите несколько, которые вы хотите (например, IE6). Кто, черт возьми, использует "Dillo" ?!
Рассерженная шлюха
10

LitmusApp - новый игрок на поле. В настоящее время основным преимуществом является тестирование почтовых клиентов (33 клиента, в том числе мобильных), но они также проводят «облачное» тестирование браузеров до 24 браузеров. На самом деле, тестирование браузера было их первым продуктом, и оно все еще доступно независимо через инструмент Alkaline .

Я использую щелочной рутинно. Это довольно мило.

Лучшее в этом то, что вам не нужно иметь или устанавливать какие-либо браузеры, которые вы хотите протестировать. Они позаботятся обо всем этом и предоставят вам скриншоты браузера, работающего в реальной системе в изоляции. Я - ужасный человек сисадмина, это идеально.

Андрес Яан Тэк
источник
да, они наши друзья - они также запускают doctype.com, который находится в нижнем колонтитуле (хотя, вероятно, скоро столкнется )
Джефф Этвуд
6

Это довольно хорошо: http://browsershots.org/

Посмотрите, как это выглядит на разных браузерах и разрешениях. Должен быть в Интернете, хотя.

Damien
источник
6

Я очень рекомендую протестировать IE в IETester , доступном здесь . Это легкий, быстрый, точный и поддерживает все IE от 5,5 и выше.

Nat Ryall
источник
1
IETester дает хорошее представление о том, как выглядит ваш сайт в браузерах IE. Однако у нас были случаи, когда рендеринг IE6 отличался от реального механизма рендеринга IE6.
Рикджа
5

Наличие локальных браузеров дает вам больше гибкости. Если у вас есть интерактивный веб-сайт, на котором вам нужно нажать несколько кнопок для проверки, вы не можете проверить это с помощью изображения.

Аарон
источник
5

MS также имеет (как часть набора инструментов Expression) продукт под названием SuperPreview, который позволяет вам работать бок о бок или накладываться на интерактивную версию вашего сайта во всех версиях IE и последней версии Firefox.

Он также включает в себя доступ к веб-службе, которая показывает вам, как ваш сайт выглядит в Safari на Mac - это сгенерирует изображение вывода, но также использует файл метаданных, который позволяет вам увидеть, какие части разметки сгенерированы, какие части изображения, так что это все еще довольно мощный.

Жаф - Бен Дюгуид
источник
4

Это одна из основных причин разработки на компьютере Apple. Используя VMWare Fusion или другое программное обеспечение для эмуляции, это единственный компьютер, на котором можно легально установить все основные операционные системы.

Затем вы можете протестировать настоящие браузеры в реальных ОС, не полагаясь на внешние источники, чтобы сделать вашу грязную работу за вас, где вы можете использовать встроенные средства отладки для исправления / диагностики любых ошибок.

Дэн Гейл
источник
Почему Apple? Вы также можете использовать virtualbox.org в Linux или Windows ...
mbrochh
1
Почему Apple? Потому что вы не можете установить OSX на Linux или Windows, не нарушая Условия обслуживания.
Дэн Гейл
1
Это кажется мне немного глупым, вы говорите, что одной из основных причин разработки на Apple является то, что вам не разрешено использовать OSX на других компьютерах.
Если бы я мог на законных основаниях запустить Hackintosh, я бы, вероятно, оставил проблемы с оборудованием. Но опять же, это только одно соображение.
Дэн Гейл
4

Использование предварительного просмотра для общего дизайна - это хорошо, но не забудьте также протестировать поведение вашего сайта. Это особенно полезно, если вы используете много эффектов hover, ajax или java-script, которые вы не видите на картинке.

Я использую VmWare с разными виртуальными машинами, причем самые важные браузеры установлены отдельно.

Если вы используете Windows 7 Ultimate, я могу направить вас к учебнику по Virtual PC и Xp Mode, который является решением для запуска разных версий IE на одном хосте .

Sven
источник
4

Вы можете проверить поток в StackOverflow, который называется: Тестирование веб-сайта в мобильных браузерах .

Casebash
источник
1
Я думаю, что можно дублировать тему, потому что она представляет особый интерес для веб-мастеров.
Джефф Этвуд
1
@Jeff: Вот почему я использовал ответ, а не
пометил
3

MogoTest - очень недавний стартап TechStars, который делает это хорошо. Он предоставляет скриншоты из разных браузеров и операционных систем, а также проверяет ваш HTML и CSS.

Джей Нили
источник
1

Я использовал http://www.browserstack.com/ несколько раз, он работает очень хорошо - удивлен, что никто еще не упомянул об этом.

Джеймс Смит
источник