Рай для верстальщика: синхронизация окон браузеров
Опубликовано:
Изменено:
Время чтения: 4 минуты
36 519
Вдохновившись
этой серией статей, меня посетила идея приобщить всех знакомых дизайнеров/верстальщиков/разработчиков к великому к консоли. И начать я решил с самого вкусного — с синхронизации браузеров. На самом деле, утилит, каким-то образом помогающих работать веб-девелоперам, много и рассказать про каждую просто невозможно, но ведь главное в этом деле заинтересовать;)
Вспомните, как обычно происходит верстка макета? Вносим изменения в css.
Сохраняем. Переключаемся на Chrome. Обновляем страницу. Тестируем. Переключаемся на Firefox. Обновляем страницу. Тестируем. Переключаемся на IE. Обновляем страницу. Тестируем. Повторяем сначала.
Каждый может делать это по-разному, но суть останется прежней: тестирование в разных браузерах очень долгий и муторный процесс. Но мы с вами сейчас попробуем его немного оптимизировать. И в этом нам поможет утилита browser-sync. Как можно прочитать на их сайте, программа умеет не только отслеживать изменения в файлах проекта и автоматически перезагружать вкладки, но и позволяет синхронизировать навигацию в каждом браузере. Вот так это работает:
Более того, можно тестировать на нескольких устройствах, использующих общее подключение: телефоны, планшеты, компьютеры с разными мониторами. Все что нужно для их синхронизации: открыть url, предоставляемый этой утилитой.
Установка browser sync
Надеюсь я успел вас достаточно заинтересовать, потому что почти все, что мы будем делать ниже, может испугать:) Нужная нам утилита является модулем для
Node.
js. Для её установки нам потребуется пакетный менеджер
npm, поставляемый с нодой. Кто знает что это такое, может сразу перейти на сайт http://www.browsersync.io/ и следуя простым инструкциям (нет, действительно, всего три шага) установить и настроить. Для тех кто никогда не слышал ни о npm, ни о Node.js, быстро пробежимся по установке.
Для начала идем на сайт Node.js, скачиваем и устанавливаем. Тут ничего сложного: далее, далее, далее, готово. Откройте консоль (я пользуюсь встроенный в PhpStorm) и выполните команду:
npm install -g browser-sync
Это команда установит browser-sync. Если в консоли появилось «‘npm’ не является внутренней или внешней командой…», просто перезагрузите компьютер и попробуйте снова.
Если все прошло удачно, поздравляю, все установлено и готово к работе. Ничего ведь сложного?
Настройка browser sync
Теперь откроем в консоли папку проекта (Shift + правый клик на папке, дальше — Открыть окно команд) и запустим browser-sync.
Тут есть два варианта: если вы верстаете статичные файлы (*.html, *.css и др.) и если вы делаете динамику (*.php, например). В первом случае, для запуска утилиты в серверном режиме, выполните команду:
browser-sync start --server --files "*.css, *.html"
В консоли вы увидите url адреса для синхронизации, а также в вашем браузере по умолчанию откроется вкладка с индексовой страницей проекта:
Помните, я говорил, что можно синхронизировать навигацию всех браузеров? Настраивается это здесь: переход по ссылкам, отправка форм, скроллинг.
Теперь, если вы используете локальный сервер, и вам нужно синхронизировать браузеры при изменении 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 в ответ на подтверждение выхода.
Browsersync — синхронизированное тестирование браузера, экономящее время
Ваш незаменимый помощник по тестированию.
С каждой веб-страницей, устройством и браузером время тестирования увеличивается в геометрической прогрессии. От перезагрузки в реальном времени до отправки URL-адресов, от репликации формы до зеркалирования кликов — Browsersync устраняет повторяющиеся ручные задачи. Это как лишняя пара рук. Настройте набор параметров синхронизации из пользовательского интерфейса или командной строки, чтобы создать персонализированную тестовую среду. Нужно больше контроля? Browsersync легко интегрируется с вашей веб-платформой, инструментами сборки и другими проектами Node.js.
Работает автономно или интегрируется с вашими текущими инструментами сборки
Потрясающие возможности
Установка и запуск в любом месте
Построен на Node.
JS_ENTRY для поддержки Windows, MacOS и Linux. Настройка менее чем за 5 минут.
Бесплатный запуск и повторное использование
Browsersync — это проект с открытым исходным кодом, доступный для использования по лицензии Apache 2.0.
Совместимость со средствами сборки
Легко интегрируется с исполнителями задач, такими как Grunt и Gulp, или включается в другие проекты Node.
Сетевой дроссель
Проверьте свой веб-сайт на наличие более медленного соединения. Даже когда устройства подключены к Wi-Fi.
Синхронизация взаимодействия
Ваши действия прокрутки, щелчка, обновления и формы отображаются между браузерами во время тестирования.
Синхронизация файлов
Браузеры автоматически обновляются при изменении HTML, CSS, изображений и других файлов проекта.
Управление с помощью пользовательского интерфейса или командной строки
Запустите новый пользовательский интерфейс на основе браузера для быстрого управления или используйте исходную командную строку.
Настройка синхронизации
Переключение отдельных параметров синхронизации для создания предпочтительной тестовой среды.
История URL-адресов
Записывает ваши тестовые URL-адреса, чтобы вы могли отправить их обратно на все устройства одним щелчком мыши.
Зависит от тысяч
Browsersync — это проект с открытым исходным кодом, который ежемесячно загружают более 2 миллионов npm и зависит от почти миллиона отдельных проектов на github.
Испытано и надежно.
Дэйв Руперт
Хотите почувствовать себя современным полубогом? Запустите Browsersync и управляйте всей лабораторией устройств с помощью телефона.
Paravel и Shop Talk Show
Addy Osmani
Он имеет фантастический набор функций, и по крайней мере 5 разработчиков, с которыми я разговаривал только на этой неделе, клянутся в нем для своего синхронизированного тестирования на нескольких устройствах.
Google и addyosmani.com
Начните работу через 5 минут.
1. Установите Node.js
Browsersync — это модуль для Node.js, платформы для быстрых сетевых приложений. Есть удобные инсталляторы для MacOS, Windows и Linux.
2. Установите Browsersync
Диспетчер пакетов Node.js (npm) используется для установки Browsersync из репозитория. Откройте окно терминала и выполните следующую команду:
npm install -g browser-sync
Вы говорите менеджеру пакетов загрузить файлы Browsersync и установить их глобально, чтобы они были доступны для всех ваших проектов.
3. Запустите Browsersync
Основное использование — просмотр всех файлов CSS в каталоге
cssи обновление подключенных браузеров, если происходят изменения. Перейдите в окне терминала к проекту и выполните соответствующую команду:Статические сайты
Если вы используете только файлы
., вам потребуется использовать режим сервера . Browsersync запустит мини-сервер и предоставит URL-адрес для просмотра вашего сайта.
html запуск синхронизации браузера --server --files "css/*.css"
Динамические сайты
Если вы уже используете локальный сервер с PHP или аналогичным, вам необходимо использовать режим прокси . Browsersync обернет ваш виртуальный хост URL-адресом прокси для просмотра вашего сайта.
browser-sync start --proxy "myproject.dev" --files "css/*.css"
html Руководства пользователя
- Документация
- Использование командной строки
- Получить помощь по сообщениям о переполнении стека
- 4 на Github
Руководства по интеграции
- Плагин Grunt
- Интеграция с Gulp
- Документация по API
- Документация по опциям
Документация по Browsersync
Документация по Browsersync- + Gulp
- + Ворчание
- API
- Командная строка
- Опции
- Рецепты
Здесь вы можете найти всю информацию, необходимую для начала использования Browsersync.
У нас есть обширная информация, охватывающая
использование командной строки, API, интеграция с Grunt/Gulp и все доступные опции. 9ТОП
Глобальная установка
Если вы хотите запустить Browsersync из командной строки в любом каталоге, это
можно установить глобально с помощью следующей команды.
$ npm install -g браузер-синхронизация
Локальная установка
Это предпочтительный способ использования Browsersync — установка его локально для каждого проекта. Этот способ, которым зависимость может быть добавлена в ваш файл package.json и всем в вашей команде.
$ npm установить синхронизацию браузера --save-dev
ВНИМАНИЕ — не используйте sudo! Если вы используете Mac OSX и столкнулись с проблемами при попытке установить Browsersync — либо
глобально или локально, это почти всегда происходит из-за проблем с разрешениями npm.
ТОП
9ТОП
Возникли проблемы с установкой Browsersync в Windows? Самая распространенная причина, по которой npm бросает
ошибки при компиляции Browsersync заключается в том, что некоторые зависимости
(например, node-gyp нужны библиотеки времени выполнения Visual C++.
Чтобы решить эту проблему, установите Visual Studio. На момент написания этой статьи (февраль 2015 г.) компиляция отлично работала с Visual Studio 2013, обновление 4. Затем вы можете сказать 9ТОП
Иногда, в зависимости от вашей сети, ваша ОС будет сообщать о нескольких внешних IP-адресах. Если это произойдет, в настоящее время Browsersync просто выбирает первое и надеется на лучшее.
Вы можете использовать такой инструмент, как dev-ip, чтобы перечислить все возможные внешние URL-адреса на вашем компьютер, а затем укажите параметр хоста в вашей конфигурации
Этот сайт с открытым исходным кодом находится на Github, и мы приветствуем исправления/улучшения.