Рай для верстальщика: синхронизация окон браузеров — 12 Ноября 2017 — Каморка
25.01.2018Вдохновившись этой серией статей, меня посетила идея приобщить всех знакомых дизайнеров/верстальщиков/разработчиков к великому к консоли. И начать я решил с самого вкусного — с синхронизации браузеров. На самом деле, утилит, каким-то образом помогающих работать веб-девелоперам, много и рассказать про каждую просто невозможно, но ведь главное в этом деле заинтересовать;)
Вспомните, как обычно происходит верстка макета? Вносим изменения в css. Сохраняем. Переключаемся на Chrome. Обновляем страницу. Тестируем. Переключаемся на Firefox. Обновляем страницу. Тестируем. Переключаемся на IE. Обновляем страницу. Тестируем. Повторяем сначала.
Каждый может делать это по-разному, но суть останется прежней: тестирование в разных браузерах очень долгий и муторный процесс. Но мы с вами сейчас попробуем его немного оптимизировать. И в этом нам поможет утилита browser-sync. Как можно прочитать на их сайте, программа умеет не только отслеживать изменения в файлах проекта и автоматически перезагружать вкладки, но и позволяет синхронизировать навигацию в каждом браузере. Вот так это работает:
Каждый раз, когда я нажимаю сохранить, вкладка обновляется автоматически. Все становиться еще удобнее, когда у вас два экрана: на первом среда разработки, а на втором 3-4 открытых браузеров. Если честно, я не придумал, как показать вам оба экрана, так что как-то так.
Более того, можно тестировать на нескольких устройствах, использующих общее подключение: телефоны, планшеты, компьютеры с разными мониторами. Все что нужно для их синхронизации: открыть url, предоставляемый этой утилитой.
Установка:
Надеюсь я успел вас достаточно заинтересовать, потому что почти все, что мы будем делать ниже, может испугать:) Нужная нам утилита является модулем для Node.js. Для её установки нам потребуется пакетный менеджер npm
, поставляемый с нодой. Кто знает что это такое, может сразу перейти на сайт http://www.browsersync.io/
и следуя простым инструкциям (нет, действительно, всего три шага) установить и настроить. Для тех кто никогда не слышал ни о npm, ни о Node.js, быстро пробежимся по установке.
Для начала идем на сайтNode.js
, скачиваем и устанавливаем. Тут ничего сложного: далее, далее, далее, готово. Откройте консоль (я пользуюсь встроенный в PhpStorm) и выполните команду:
Это команда установит browser-sync. Если в консоли появилось «‘npm’ не является внутренней или внешней командой…», просто перезагрузите компьютер и попробуйте снова.
Если все прошло удачно, поздравляю, все установлено и готово к работе. Ничего ведь сложного?
Настройка:
Теперь откроем в консоли папку проекта (Shift + правый клик на папке, дальше — Открыть окно команд) и запустим browser-sync. Тут есть два варианта: если вы верстаете статичные файлы (*.html, *.css и др.) и если вы делаете динамику (*.php, например). В первом случае, для запуска утилиты в серверном режиме, выполните команду:
В консоли вы увидите url адреса для синхронизации, а также в вашем браузере по умолчанию откроется вкладка с индексовой страницей проекта:
Первую пару url (Local) вы можете использовать для синхронизации браузеров на нескольких устройствах. Просто откройте его и все заработает. Вторая пара нужна для перехода к настройкам синхронизации:
Помните, я говорил, что можно синхронизировать навигацию всех браузеров? Настраивается это здесь: переход по ссылкам, отправка форм, скроллинг.
Теперь, если вы используете локальный сервер, и вам нужно синхронизировать браузеры при изменении php (или других) файлов, необходимо использовать режим proxy:
Browser-sync имеет множество настроек, описывать их я не буду, просто дам ссылку: http://www.browsersync.io/docs/command-line/
Там же можно посмотреть и примеры использования.
Для выхода из программы, в окне консоли нажмите Ctrl+C, и введите y в ответ на подтверждение выхода.»
- Как отформатировать текст в "Ворде": основные правила
- Как установить браузер Opera на свой компьютер ?
- Новый год, Новый браузер - Opera 50 представляет инновационный инструмент для борьбы с майнингом биткоинов
- Как включить Bluetooth на Windows 10 и настроить Блютуз
- Каталог запчастей Мерседес Mercedes-Benz EPC EWA net подробное описание
- Как сделать Windows 10 удобнее
- Pythonicway - Графический калькулятор квадратных уравнений на Python и Tkinter
- Пакет бесплатной активации Холдем менеджера 2 PRO
- Как очистить папку Windows от мусора в Windows 7
- Synaptics: что это за программа и для чего нужна?
Добавить комментарий