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

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