—»     —»   Как синхронно протестировать веб-сайт в различных браузерах и на разных устройствах
  Раздел: Инструменты   Комментариев: 1  

Как синхронно протестировать веб-сайт в различных браузерах и на разных устройствах



Адаптивный веб-дизайн (Responsive Web Design - RWD) практикуется сейчас в качестве общего подхода при построении веб-сайтов, ориентированных на пользователей мобильных устройств. Но процесс построения адаптивного веб-сайта может весьма раздражать разработчика необходимостью тестировать его на различных устройствах с экранами разной величины.

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

Как синхронно протестировать веб-сайт в различных браузерах и на разных устройствах

Поэтому, специально на такой случай, и придумали способ "синхронизированного тестирования", упрощающий работу. Задействуют при этом модуль системы Grunt под названием Browser Sync, и с помощью данной заметки мы покажем вам, как именно всё это делается.

Зачем нужен Browser Sync?

Во-первых, мы не утверждаем, что Browser Sync - оптимальный сервис. Есть ещё целый ряд GUI-приложений, например, Adobe Edge Inspect или Ghostlab, тоже очень хороших.

У них обоих удобный графический интерфейс пользователя, но наши доводы в пользу предпочтения названным приложениям Browser Sync следующие:

1) Browser Sync (как и вообще Grunt) доступен бесплатно, что имеет значение при малом бюджете либо полном отсутствии такового.

2) Открытый исходный код. В зависимости от вашего владения приёмами работы с javascript и Node.js, вы можете достроить его в соответствии с вашими индивидуальными потребностями.

3) Межплатформенная совместимость. Сервисом можно пользоваться в среде Windows, OS X и Linux. Ghostlab же доступен для взаимодействия только с OS X и Windows.

Установка

Сначала мы устанавливаем модуль системы Grunt под названием Browser Sync. Название, конечно, говорит само за себя; данный модуль синхронизирует выполняемые на веб-сайте действия, в том числе, прокрутку страниц, заполнение граф бланков и клики по ссылкам.

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

npm install grunt --save-dev
npm install grunt-browser-sync --save-dev

Конфигурирование

Установив Browser Sync, его можно загрузить в Gruntfile.js следующим образом.

module.exports = function(grunt) {
grunt.initConfig({
browser_sync: {
dev: {
bsFiles: {
src : 'navbar-fixed-top.css',
},
ghostMode: {
clicks: true,
scroll: true,
links: true,
forms: true,
},
},
},
});
grunt.loadNpmTasks('grunt-browser-sync');
};

Данная конфигурация позволит отслеживать активность файла navbar-fixed-top.css и автоматически обновлять браузер при появлении в нём изменений. Стоит также активировать режим ghostMode для отслеживания выполняемых на веб-сайте действий.

Примечание: Browser Sync допускает и ряд иных конфигураций, подробнее изучить которые можно на этой странице. Пока что нам вполне хватит приведённой выше конфигурации в качестве учебного примера, описываемого в данной заметке.

Настроив конфигурацию, выходите на конец диалога (Terminal) или на запрос ввода команды (Command Prompt) и запускайте выполнение задания следующей командой:

grunt browser_sync

После выполнения команды вам предложат добавить три строки программного кода в тег .

Как синхронно протестировать веб-сайт в различных браузерах и на разных устройствах

Кроме того, пока вы просматриваете ваш веб-сайт в различных браузерах, сервис запоминает их для вас и извещает вас об этом через диалоговое окно. В данном случае веб-сайт открывался нами в Chrome, Safari и Mobile Safari (через iPhone Simulator).

Как синхронно протестировать веб-сайт в различных браузерах и на разных устройствах

Проверка

Итак, вы сами видите анимированную GIF-картинку, иллюстрирующую синхронизацию всех обновлений, изменений и выполняемых действий в реальном времени во всех браузерах.

Как синхронно протестировать веб-сайт в различных браузерах и на разных устройствах
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 5013   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 23 июня 2014 @ 18:58
Написал: сергей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
warning: Task "browser_sync" not found / помогите решить
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930