Статьи

Як перевірити сайт в різних браузерах з сервісами Spoon і Browsershots

  1. Browsershots.org - перевірити макет сайту в різних браузерах
  2. Spoon.net - як перевірити сайт в браузерах на помилки
  3. Так чи так уже необхідно перевіряти сайти в різних браузерах?

Вітаю всіх читачів блогу scriptcoding.ru. Сьогодні ми розглянемо, як можна перевірити сайт в браузерах на предмет його зовнішнього вигляду. Справа в тому, що різні браузери і тим більше, різні версії і платформи, можуть по різному відображати інтернет ресурс при його перегляді, і часом, це відображення, як би м'яко сказати ... криве.

криве

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

Кожен власник сайту хоче, що б його творіння відображалося правильно на всіх комп'ютерах і браузерах. Це необхідно для кращого сприйняття і юзабіліті. В інтернеті вже давно є безліч онлайн додатків, які дозволяють перевірити сайт в різних браузерах і для різних платформ.

Є інструменти, які дозволяють перевіряти сайти в різних веб браузерах з можливістю серфінгу по ним і інструменти, які роблять скріншоти з кожної сторінки, і тим самим відображають можливі помилки в макеті, але ви в такому випадку не можете перевірити функціональність сайту і тестувати його, наприклад , працездатність JavaScript.

Для початку поговоримо про інструменти, які роблять скріншоти обраної сторінки. Таких інструментів у всесвітній мережі досить багато, і вони можуть допомогти візуально перевірити ваші сайти в різних браузерах, але мінус в тому, що не можна перевірити працездатність елементів (спливаюче меню, CSS стилі). Даний підхід дозволяє відносно швидко перевірити макет сайту в різних браузерах. Швидкість перевірки багато в чому залежить від кількості обраних браузерів.

Другим інструментом для перевірки сайту може служити реальний браузер, в якому можна перевірити роботу елементів сайту і переглянути, як виглядає верстка. Такий підхід, мабуть, найкращий, що б перевірити сайт на працездатність і верстку в різних браузерах. Можна встановити кілька віртуальних машин на комп'ютері з різними версіями веб браузерів, тим самим, ми зможемо перевірити сайт по повній в різних браузерах і версіях. Але, тут є свої мінуси - вам буде потрібно цілий арсенал програмних продуктів і час, зате - ви зможете не тільки візуально перевірити сайт в різних браузерах, але і протестувати його елементи.

Browsershots.org - перевірити макет сайту в різних браузерах

org - перевірити макет сайту в різних браузерах

Основне завдання Browsershots.org - автоматичне створення скріншотів заданого сайту для різних платформ і браузерів. По суті, Browsershots.org дає можливість перевірити сайт в браузерах тільки візуально. В даний час додаток пропонує майже 200 комбінацій браузерів під 4 операційні системи (Windows, Linux, Mac і BSD).

Аналіз сайтів від Browsershots.org є повністю безкоштовною послугою, що не може не радувати. Звичайно, можна заплатити близько 30 доларів, що б отримати пріоритет при обробці скріншотів - вам не доведеться довго чекати, поки з'являться результати.

Процес створення ескізів сторінок відбувається на комп'ютерах добровольців. В даний час в проекті беруть участь близько 50 комп'ютерів з усього світу. При бажанні ви можете приєднатися до проекту.

Проект дозволяє вибрати потрібну мову, в тому числі і російська, в нижній частині праворуч (хоча російською лише деякі елементи). Якщо зареєструватися, то з'явиться можливість зберегти настройки, які ви вказали, що б перевірити сайт в заданих браузерах і системах.

Що б перевірити ваш сайт в різних браузерах, потрібно виконати пару простих кроків, які під силу навіть повного чайнику.

  • Вводимо адресу сайту, який хочемо перевірити.
  • Вибираємо потрібні типи браузерів і платформи (можна використовувати фільтри).
  • При бажанні, внизу можна вказати розширення і включити або відключити підтримку скриптів.
  • Для початку перевірки натискаємо кнопку Submit

Фактичний час обробки залежить від кількості обраних браузерів. Процес створення скроневої можна спостерігати відразу (не треба чекати, поки все відразу з'явиться).

Зберегти скріни можна або окремо, або відразу все, натиснувши на Download All вгорі праворуч.

Потрібно розуміти, що дане онлайн додаток не в змозі дати раду, як виправити помилку верстки.

Spoon.net - як перевірити сайт в браузерах на помилки

net - як перевірити сайт в браузерах на помилки

З розвитком хмарних сховищ даних і хмарних додатків можна також використовувати цю технологію для перевірки сайтів. Варто врахувати, що безкоштовних сервисов з такими послугами дуже мало. Платних варіантів значно більше, і як правило, з 30-денним пробним періодом. Для прикладу ми розглянемо сервіс Spoon.net, звичайно, тут теж можна перевірити сайти в різних веб браузерах, але не у всіх версіях - для деяких потрібен платний аккаунт.

Сервіс Spoon пропонує хмарні можливості, так що ви можете використовувати свій аккаунт в Spoon, наприклад на роботі чи вдома, без необхідності що то встановлювати (крім Spoon плагіна, який використовується для завантаження додатків, журналирования і синхронізації). Даний сервіс дуже хороший, так як не завжди є можливість встановити багато різних браузерів, що б перевірити сайт.

Використовувані браузери від Spoon поводяться точно так же, як якщо б ви були безпосередньо в браузері, встановленому на комп'ютері. Фактично, сервіс дає можливість перевірити сайт в різних, але віртуальних браузерах, так як в систему нічого не встановлюється.

Фактично, сервіс дає можливість перевірити сайт в різних, але віртуальних браузерах, так як в систему нічого не встановлюється

У найпростішому варіанті, після реєстрації на сервісі, ви зможете побачити список підтримуваних браузерів і додатків в своєму особистому кабінеті. При наведенні на іконку будь-якого з них з'являється кнопка Run, натиснувши на неї, потрібно завантажити Spoon плагін (як згадувалося вище). Для установки плагіна не потрібні права адміністратора, в треї з'явиться іконка, при натисканні на неї з'явиться невелика панель з уже активованими компонентами.

По суті, сервіс дозволяє не тільки перевірити сайт в різних віртуальних браузерах, але і встановити інші програми, які будуть працювати у віртуальному режимі. Доступ до компонентів здійснюється як через панель від Spoon, так і в особистому кабінеті в меню Applications.

Нижче я приведу скріншоти додатків, які можна використовувати в віртуальному режимі. Тут навіть гри є!

Тут навіть гри є

Так чи так уже необхідно перевіряти сайти в різних браузерах?

Після прочитання цієї статті, хтось може сказати, що це все марно, і навіщо підлаштовуватися під старі версії. На жаль, це все не так просто, якщо ви розробляєте великий проект, розрахований на величезний трафік (наприклад, 200 000 чоловік на місяць), де тільки 10% використовують стару версію браузера (які становлять 2000 осіб, і це вже не мало) або а в деяких випадках оглядач, для якого ви не тестували свій сайт. Якщо для простого блогу особливої необхідності немає в скрупульозності щодо платформ, то для комерційних проектів, розрахованих на отримання прибутку - перевірити сайт на сумісність в різних браузерах це питання життя і смерті.

Так чи так уже необхідно перевіряти сайти в різних браузерах?

Новости