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

Адаптивный веб-дизайн (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-картинку, иллюстрирующую синхронизацию всех обновлений, изменений и выполняемых действий в реальном времени во всех браузерах.