Как тестировать страницу в разных браузерах.
 

Хотел бы узнать как можно тестировать верстку страницы в разных браузерах ?
Я не думаю что нужно устанавливать: IE6, IE7, IE8, IE9, Chrome, Opera, Safa, Firefox. Вот уже 8 браузеров, если не устанавливать другие версии.
Есть программа какая то ?

Если все же нужно их все устанавливать, то как разные версии браузеров установить, они не буду конфликтовать ?

Нужно.

Не будут, кроме IE. IE лучше в виртуальные машины поставить.

Kolyaj,
Спасибо.

Для IE есть еще IEtester, тоже хорошая вещь и локалку ставить не нужно

вот сайт где можно протестить свой сайт на почти 96 возможных браузерах разных поколений!

http://browsershots.org

но пока дождешься....

легче пять виртуальных машин поставить :/

если IE6 не актуально, то достаточно IE9 установить (режим эмуляции IE7-9 очень даже достойно сделали).
в топку
последние два года сервис жутко тормозит, хотя и актуален

Бесплатные сервисы:

http://www.superscreenshot.com
Этот сервис знаком многим, поэтому описывать его подробно не буду - он выполняет скриншоты полной страницы сайта или только ее верхней части.

Можно задать нужный размер. Можно сбросить кэш, нажав кнопку «Refresh Screenshot» и сделать новый скриншот.

Недостаток у этого сервиса, с моей точки зрения, только один – все скрины выполняются в одном разрешении 1024х768. Посмотреть как будет выглядеть сайт при других разрешениях экрана невозможно. Увы…


http://www.thumbalizr.com
Сервис частично бесплатный.
Скриншоты делает быстро, разного размера - от 150px до 1280px.
Может сделать снимок всего сайта или верхней части страницы - в один размер экрана.

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


http://www.browsershots.org
Этот сервис позволяет проверить отображение сайта в разных браузерах.
Можно выбрать браузеры и операционные системы, в которых вы хотите увидеть свой сайт, настроить ширину экрана, количество цветов, проверку отображения скриптов и флэш объектов на странице.

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

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


http://webthumb.bluga.net/home
- бесплатно выполняет скриншоты размером от 75x75 до 1280x2048. Делает сразу несколько скринов разного размера и дает возможность скачать архив с изображениями.

Скорость выполнения скриншота средняя. Качество изображений невысокое.
После регистрации доступно больше возможностей.
Есть платные услуги.


http://www.shrinktheweb.com
Сайт генерирует скриншоты очень быстро. Хотя готового снимка иногда приходится ждать (по видимому из-за очереди желающих). При этом выполняет сразу 6 штук разного размера.
Максимально возможный размер при бесплатном использовании 320х240px.
Бесплатно можно сделать до 5000 скриншотов в месяц.


http://snapcasa.com/SampleSnap.aspx
По особенностям работы сервис очень похож на предыдущий. Работает также быстро и качественно. Выполняет сразу 4 снапшота разного размера.

Максимально возможный размер при бесплатном использовании 280х210px.

Бесплатно можно сделать 100 000 снапшотов без водяного знака, или 300 000 снапшотов с водяным знаком. Максимальный размер скриншота 800х600 пикселей.
Для пользования сервисом нужна регистрация.
Есть платные - расширенные возможности.


http://www.4all.lv/ru
Выполняет скриншоты на своем, а также на вашем сайте в реальном времени.

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

Скриншоты предоставляются следующих размеров:

micro - 90x70
small - 202x152
medium - 400x300
large - 640x480


http://www.webmorda.kz
- это сервис, который даёт возможность создавать небольшие скриншоты сайтов от 120x83 до 400x275 пикселей. Есть выбор разрешения и качества скриншотов. Сервис работает быстро и бесплатно. Но, если вам требуется скриншот большего размера, значит вам не сюда.


http://siteshot.pix-art.ru
Скриншоты выполняет бесплатно. Максимальный размер изображения, которое можно получить составляет 360х240. На выбор предлагается два разрешения: 800х600 и 1024х768. Качество полученных изображений среднее, скорость работы также средняя.


http://www.websnapr.com
- бесплатно делает скриншоты только маленького размера, за деньги до 1024x768 пикселей, к тому же, работает медленно. Но предлагает интересную возможность отображать на сайте скриншоты в реальном времени.


http://thumbs.host-it.ru
- бесплатно можно сделать снимок сайта размером 240x180px. Работает медленно (или очередь такая длинная?)
На сайте написано, что снимок сайта станет доступен максимум через 1 день.
За свои услуги сервис требует обратной ссылки.

Есть платные услуги. Услуга полноразмерного скриншота 1264x1024 без водяного знака стоит 10 рублей в месяц с одного сайта.


http://www.bitpixels.com
- скриншоты выполняет бесплатно и без рекламы.
К сожалению, обычным способом нельзя выбрать ни размер получаемого изображения, ни качество оного, да и время генерации скриншотов достаточно длительное.

Размер скриншота можно указать только в адресной строке. Строка запроса должна иметь такой вид:

http://www.thumbshots.com
Предоставляет возможность делать бесплатные скриншоты размером 120×90 пикселей.
Есть и платные тарифы. Минус этого сервиса заключается в очень редком обновлении скриншотов, ограничении по области скрина (скриншот часто получается резанный).
Работает медленно.


http://screenshot.com.ua/makeit.cgi
Делает бесплатные скриншоты размером 200×150 пикселей.
Работает быстро. Качество изображений высокое.
Кроме этого, никаких других достоинств сервис не имеет.


http://ipinfo.info/netrenderer
- выполняет скриншоты сайта в браузерах в IE 6, 7, 8 или даже 5.5. Режимы Miixed и Difference показывают различия отображения в разных версиях (IE6 vs. IE7), накладывая скриншоты друг на друга.


https://litmusapp.com
Не просто предоставляет вам скриншоты, но и содержит систему управления тестированием. Скриншоты создаются в почти в 30 различных браузерах в течениe секунд, причем можно видеть всю страницу а не только ее верхнюю часть, как в других сервисах. Содержит систему контроля версий и отслеживания багов.

Чтобы воспользоваться услугами этого сервиса нужно зарегистрироваться на нем.

Как добраться до страницы регистрации?
Нажимаем на ссылку Browser testing, в открывшемся окне жмем кнопку Sing up for free. В следующем окне выбираем пакет Basic - free, 50 тестов в месяц – нам будет достаточно. Регистрируемся.

После получения письма с подтверждающей регистрацию ссылкой, заходим в свой аккаунт.


http://www.m-software.de/thumbshots-advanced.php
И еще один сервис, позволяющий отображать на своем сайте скриншоты любого выбранного вами сайта в реальном времени.
Вводите в форму сервиса адрес сайта и получаете готовый html-код для вставки на сайт.

Сервис бесплатный. Но, если вы воспользуетесь их услугой, вам нужно будет поставить их кнопку на свой сайт.

Платные сервисы:

http://www.netmechanic.com
Сервис, создающий cкриншоты в Internet Explorer, Opera, FireFox и Safari под Windows, Mac, и Linux, всего 24 различные комбинации.

Размер экрана - от 800 х 600 пикселей до 1024 х 768.

Кроме этого, сервис выдает список ошибок верстки, проверяет орфографию, время загрузки и считает неработающие ссылки.

Стоимость использования:
$ 60 за URL / в год, если на сайте страниц 1-100
$200 per url / в год, если на сайте страниц 101-400
$ 499 за URL / в год, если на сайте 1000 страниц
$799 за URL / в год, если на сайте 5000 страниц


http://www.browsercam.com
Солидный сервис, кроме скриншотов, позволяет осуществить удаленное управление браузером. Количество доступных браузеров постоянно растет, на данный момент более 70 браузеров под Linux, Win и Mac, а также эмуляторы мобильных устройств BlackBerry и Win Mobile. Есть настройка разрешений и доступа к защищенным сайтам, возможна загрузка скриншотов в zip архиве.


http://www.browserpool.de
Для создания скриншотов существует множество настроек. Сотни различных сочетаний, десятки браузеров, тысячи скриншотов. Есть удаленное управление браузером через VNC клиент. Цена $40 в месяц, в них включены 40 бесплатных часов. Возможна бесплатная тестовая регистрация.

cyberkatze, сначала подумал что за спам))

не могу поверить,что это он всё сам :О

афигеть

Глюки/баги/тормоза тоже эмулирует?

ага

В MS с этим вообще никаких проблем нет) Он ещё и новые добавляет, я думаю)

чем вам IE 9 не понравился?

как его ][ хвалил :)

а как запустить эту эмуляцию ? и как точно эмулирование проходит ?

Да я ему искренне рад, что вы. Он страницы отображает нормально и даже addEventListener поддерживает!

Но факта, что у ms всегда немало глюков - это не отменяет.

если F12 не забиндина то F12 -> Browser/Document Mode (с Quirks Mode поосторожней!) либо через контекстное меню
IE9 долго открывается и рвет разметку если дискриптор у которого должен быть тег с пишется так: <p />. Очень похоже на баг т.к. тип документа XHTML позволяет так писать. Однако в Chrome таже фигня.
Каких глюков? когда IE6 вышел, он был на тот момент самым современным браузером. Просто IE с виндой по дефолту всегда был (в ЕС win7 без предустановленного IE идет) и не так часто обновлялся как другие браузеры. Относительно функционала (ES5/HTML5/CSS3) IE9 сейчас врет всех. Однако они забыли добавить элементам прототипы, но в IE10b это исправили, возможно даже добавили константы...

Ввёл IE9 в режим IE7, набрал в адресной строке javascript:alert(window.postMessage), он мне вывел, что есть такая функция. Хотя в IE7 её нет.

по поводу ИЕ9, зря они убрали поддержку ХР ))))))) считай на 75% клиентов потеряли... ибо еще не у всех тянут компы вин7 или висту )

тесты сайта на ие9 приходится симулировать... (((( ибо нет возможности поставить винды

Хм. странно, помню тестировал HTMLDocument.prototype и еще что-то таких сюрпризов не было((
они никого не потеряли, а только приобрели, т.к. продажи 7-ки самые высокие за всю историю компании!

Без установки вирт осей полной картины с глюками не будет, например в опере есть глюк: если ось ставилась на пользователя написанного Кирилицей, то подключенные шрифты отображаться правильно не будут.

И как намекнул Kolyaj таких нюансов море широкое.

У меня еще такой вопросик, я на комп скачал портативные версии браузеров IE7 и IE8. Если в этих двух браузеров и других (Chrome, Opera) страница отображается нормально, можно ли утверждать что в IE6 и IE9 тоже будет все ок ?
Просто IE6 портативный найти не могу, а IE9 не получится установить (XP)

Нет, нельзя. И ещё не факт что поставив портативную версию можно утверждать что всё ок.

portable-версии-основных-браузеров включая IE6!

nyols, ты предыдущий пост читал?

Gozar,
Читал)

Получается что тестирование странички в разных браузерах - это целая наука :)

наука, философия, геморой и чашки кофе! ):write: :lol:

Просто практика... :)

Ээмм такой вопросик.

Сидел я, верстал страничку (наверстал уже больше половина). Глянул в IE и чуть со стула не упал. Стили не работали. Оказалось что IE6 не поддерживает CSS селектор дочерних элементов (A > B).

Как тогда посоветуете задавать классы элементам если по смыслу они должны иметь одинаковые имена, но разные стили ?
То есть:

<style>
.profile > .username {
   color: black;
}

.profile > .friends > .username {
   color: white;
}
</style>
<div class="profile">
    <div class="username">Username</div>
</div>

<div class="profile">
    <div class="friends">
        <div class="username">
            Username
        </div>
    </div>
</div>

Самое обидное что я во всех стилях так обращался к элементам, дурдом будет если начну все менять((

вот так делаешь через условные операторы на ие6 ) :haha:

я сделал проще. у меня хоть и семерка летала, но многие игры не пошли, тормозили и глючили. А когда я узнал что на семерку не поставить ие 7 и 8 оО. Я нахрен снес ее и вернулся на XP и не перейду если только ие вплоть до 8 версии не вымрет как сейчас вымерает 6.Потом тебе такую же табличку повешает начальство.
Я тоже против ие 6, но когда тебе говорят свыше: надо и точка - приходится извращаться.

эта сволочь даже будучи мёртвой держит троллфейс у себя на лице.

он намекает,что не умрёт,пока жива ХР :)

как говорит мой батя, "семёрка моя говно. и что хорошего в твоём линуксе"

так что ждите еще лет 20, пока это поколение экспишников не вымрет :)

так что смиритесь,бедные верстальщики.

Для твоего варианта сойдёт и так

.profile .username {
   color: black;
}
.profile .friends .username {
   color: white;
}

Нужно было сразу смотреть что получается. :) А не в самом конце работы...

а кто-нибудь знает как несколько chrome/safari поставить без виртуальных машин?

Разбить диск, и на каждый раздел - по винде)