Языков Дмитрий — Рай для верстальщика: синхронизация окон браузеров

31 Марта, 2015

Вдохновившись этой серией статей, меня посетила идея приобщить всех знакомых дизайнеров/верстальщиков/разработчиков к великому к консоли. И начать я решил с самого вкусного — с синхронизации браузеров. На самом деле, утилит, каким-то образом помогающих работать веб-девелоперам, много и рассказать про каждую просто невозможно, но ведь главное в этом деле заинтересовать;) Вспомните, как обычно происходит верстка макета? Вносим изменения в css. Сохраняем. Переключаемся на Chrome. Обновляем страницу. Тестируем. Переключаемся на Firefox. Обновляем страницу. Тестируем. Переключаемся на IE. Обновляем страницу. Тестируем. Повторяем сначала. Каждый может делать это по-разному, но суть останется прежней: тестирование в разных браузерах очень долгий и муторный процесс. Но мы с вами сейчас попробуем его немного оптимизировать. И в этом нам поможет утилита browser-sync. Как можно прочитать на их сайте, программа умеет не только отслеживать изменения в файлах проекта и автоматически перезагружать вкладки, но и позволяет синхронизировать навигацию в каждом браузере. Вот так это работает:

http://ydmitriy.ru/upload/blog/1.gif

Каждый раз, когда я нажимаю сохранить, вкладка обновляется автоматически. Все становиться еще удобнее, когда у вас два экрана: на первом среда разработки, а на втором 3–4 открытых браузеров. Если честно, я не придумал, как показать вам оба экрана, так что как-то так.

http://ydmitriy.ru/upload/blog/2.gif

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

Установка

Надеюсь я успел вас достаточно заинтересовать, потому что почти все, что мы будем делать ниже, может испугать☺ Нужная нам утилита является модулем для Node.js. Для её установки нам потребуется пакетный менеджер npm, поставляемый с нодой. Кто знает что это такое, может сразу перейти на сайт http://www.browsersync.io/ и следуя простым инструкциям (нет, действительно, всего три шага) установить и настроить. Для тех кто никогда не слышал ни о npm, ни о Node.js, быстро пробежимся по установке. Для начала идем на сайт Node.js, скачиваем и устанавливаем. Тут ничего сложного: далее, далее, далее, готово. Откройте консоль (я пользуюсь встроенный в PhpStorm) и выполните команду:

npm install -g browser-sync

Это команда установит browser-sync. Если в консоли появилось “’npm’ не является внутренней или внешней командой…”, просто перезагрузите компьютер и попробуйте снова. Если все прошло удачно, поздравляю, все установлено и готово к работе. Ничего ведь сложного?

Настройка

Теперь откроем в консоли папку проекта (Shift + правый клик на папке, дальше — Открыть окно команд) и запустим browser-sync. Тут есть два варианта: если вы верстаете статичные файлы (*.html, *.css и др.) и если вы делаете динамику (*.php, например). В первом случае, для запуска утилиты в серверном режиме, выполните команду:

browser-sync start --server --files "*.css, *.html"

В консоли вы увидите url адреса для синхронизации, а также в вашем браузере по умолчанию откроется вкладка с индексовой страницей проекта:

Первую пару url (Local) вы можете использовать для синхронизации браузеров на нескольких устройствах. Просто откройте его и все заработает. Вторая пара нужна для перехода к настройкам синхронизации:

Помните, я говорил, что можно синхронизировать навигацию всех браузеров? Настраивается это здесь: переход по ссылкам, отправка форм, скроллинг.

http://ydmitriy.ru/upload/blog/5.gif

Теперь, если вы используете локальный сервер, и вам нужно синхронизировать браузеры при изменении php (или других) файлов, необходимо использовать режим proxy:

browser-sync start --proxy "myproject.dev" --files "*.css, *.html, *.php, *.js"

Browser-sync имеет множество настроек, описывать их я не буду, просто дам ссылку: http://www.browsersync.io/docs/command-line/ Там же можно посмотреть и примеры использования. Для выхода из программы, в окне консоли нажмите Ctrl+C, и введите y в ответ на подтверждение выхода.

css, html, browser-sync, синхронизация браузеров, авто обновление браузеров, тестирование в разных браузерах


Originally published at ydmitriy.ru.

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.