Browser sync https: Is there a way to configure browser-sync with SSL support on local development · Issue #1245 · olefredrik/FoundationPress · GitHub

Web URL
Quickly copy or open the corresponding HTTP URLs of a selected file in your web browser. Includes CDN and pre-signed URLs for S3.

Distribute your content in the cloud.

Amazon CloudFront
Manage custom origin, basic and streaming CloudFront distributions. Toggle deployment, define CNAMEs, distribution access logging and set the default index file.

First class bookmarking.

Files
Drag and drop bookmarks to the Finder.app and drop files onto bookmarks to upload.

Spotlight
Spotlight Importer for bookmark files.

History
History of visited servers with timestamp of last access.

Browse with ease.

Quick Look

Quickly preview files with Quick Look. Press the space key to preview files like in Finder.app without explicitly downloading.

Accessible

The outline view of the browser allows to browse large folder structures efficiently. Cut & paste or drag & drop files to organize.

Transfer anything.

Download and Upload

Drag and drop to and from the browser to download and upload.

Copy

Copy files directly between servers.

Synchronization

Synchronize local with remote directories (and vice versa) and get a preview of affected files before any action is taken.

Integration with system technologies.

Keychain

All passwords are stored in the system Keychain as Internet passwords available also to third party applications. Certificates are validated using the trust settings in the Keychain.

Bonjour

Auto discovery of FTP & WebDAV services on the local network.

Finder

Use Cyberduck as default system wide protocol handler for FTP and SFTP. Open .inetloc files and .duck bookmark files from the Finder.

Notifications

Notifications in system tray (Windows) and the Notification Center (Mac).

Windows

Reads your proxy configuration from network settings. Encrypts passwords limiting access to your account.

We are open.

Come in. You can follow the daily development activity, have a look at the roadmap and grab the source code on GitHub. We contribute to other open source projects including OpenStack Swift Client Java Bindings, Rococoa Objective-C Wrapper and SSHJ.

International.

English, čeština, Nederlands, Suomi, Français, Deutsch, Italiano, 日本語, 한국어, Norsk, Slovenčina, Español, Português (do Brasil), Português (Europeu), 中文 (简体), 正體中文 (繁體), Русский, Svenska, Dansk, Język Polski, Magyar, Bahasa Indonesia, Català, Cymraeg, ภาษาไทย, Türkçe, Ivrit, Latviešu Valoda, Ελληνικά, Cрпски, ქართული ენა, Slovenščina, українська мова, Română, Hrvatski & Български език.

запуск синхронизации браузера | Fig

Start Browsersync

Name	Description
-s, --server	Run a Local server (uses your cwd as the web root)
-- cwd <каталог>	Рабочий каталог
--json	Если true, некоторые журналы будут выводиться только в формате json
--s0017	Directories to serve static files from
--port	Specify a port to use
-p, --proxy	Proxy an existing server
--ws	Только режим прокси - включить проксирование через websocket0016 -W, -наблюдать	Watch Files
-INIGNORE	Игнорировать шаблоны для наблюдателей файлов
-F, -file
-F, -file	-F, -fail для просмотра
--index	Укажите, какой файл использовать в качестве индексной страницы0011
-Extensions <расширения>	Укажите расширение файлов.	Если true, будет добавлено промежуточное ПО connect-history-api-fallback
--https	Включить SSL для локальной разработки0017	Show a directory listing for the server
--xip	Use xip.io domain routing
--tunnel	Use a public URL
--open	Выберите URL-адрес, который будет автоматически открываться (локальный, внешний или туннельный), или укажите URL-адрес
--cors	Добавить заголовки контроля доступа к каждому запросу
-c, --config	Указать путь к файлу конфигурации
--host	Указать используемое имя хоста
6 --host >	Укажите имя хоста, к которому выполняется привязка (это предотвратит привязку ко всем интерфейсам)
--logLevel <уровень>	Установите уровень вывода логера (тихий, информационный или отладочный)
--reload-delay <миллисекунды>	Время в миллисекундах для задержки события перезагрузки после изменения файла может передаваться подключенным клиентам
--ui-port	Укажите порт для использования пользовательским интерфейсом
--watchEvents	Укажите, на какие файловые события реагировать
--no-notify	Отключить элемент уведомления в браузерах
--no-snippet	Disable the snippet injection
--no-online	Force offline usage
--no-ui	Don’t start пользовательский интерфейс
-NO-ghost-Mode	Отключить режим призрака
-нет инъекционных изменений	RELOAD на каждом изменении файла
-NO-RELAD на каждую File-On-on-Ono-reload-reload-reload-reload-reload-reload-reload-r -restart	Не перезагружать автоматически все браузеры после перезагрузки

Использование BrowserSync для отладки локального хоста

Главная › блог

С появлением препроцессоров CSS, инструментов Live-reload, непрерывной эволюции JavaScript и многоэкранной разработки также появились более совершенные и интеллектуальные инструменты для облегчения тестирования, отладки и компиляции.

На протяжении многих лет было много способов запуска локальной среды веб-разработки, и дольше всего Apache HTTP Server был в основе всего этого, независимо от того, запускали ли вы его изначально или использовали один из многих инструментов для управления. его сложные конфигурации.

С тех пор появилось много других альтернатив HTTP-сервера для Apache, в первую очередь lighttpd и NGINX.

В настоящее время почти каждый язык программирования имеет собственный встроенный HTTP-сервер и вспомогательные библиотеки, которых достаточно для запуска и отладки кода без использования автономного HTTP-сервера. Даже у PHP есть такой!

Однако с появлением препроцессоров CSS, инструментов Live-reload, непрерывной эволюции JavaScript и многоэкранной разработки также появились более совершенные и интеллектуальные инструменты для облегчения тестирования, отладки и компиляции.

В современном мире веб-разработки просто недостаточно просто запустить HTTP-сервер для тестирования и отладки вашего приложения, конечно, заставить все эти дополнительные инструменты работать вместе с HTTP-сервером вашего дедушки станет проблемой.

Вся боль, но нет выгоды?

Пропустив пару болезненных (но коротких) лет написания пользовательских конфигураций Grunt и Gulp, чтобы склеить все ваши инструменты вместе, только чтобы не достичь этой сладкой нирваны живого кодирования с автоматическим обновлением результатов и загрузкой в ​​​​браузере.

Я уверен, что многие прошли через эту кроличью нору и, наконец, вышли победителями. или достаточно близко!

Но стоило ли потраченное время?

Сегодня я просто ищу BrowserSync для решения почти все головные боли, связанные с веб-разработкой, сэкономив мне время и деньги.

Что такое BrowserSync

BrowserSync — это тестовая утилита, которая управляет автономным веб-сервером для обслуживания веб-страниц локально или по сети. Он может отслеживать изменения файлов и автоматически перезагружать или вносить изменения в браузер.

BrowserSync рекламирует следующие функции:

• Установка и запуск в любом месте : поддержка Windows, MacOS и Linux
• Бесплатный запуск и повторное использование : Сила открытого исходного кода!
• Совместимость со средствами сборки : Легко интегрируется с такими средствами запуска задач, как Grunt и Gulp
• Управление пользовательским интерфейсом или командной строкой : Пользовательский интерфейс на основе браузера для быстрого управления или использование командной строки для ощущения ностальгии по терминалу.
• HTTPS : Без суеты, локальный HTTPS. Нет необходимости генерировать сертификаты .
• Туннелирование : туннелирование сервера Browsersync через общедоступный URL-адрес с использованием xip.io или localtunnel.me
• Автоматический запуск браузера : автоматически запускать один или несколько браузеров и напрямую указывать их на локальный сервер.

Хорошо, это хорошее начало, но как насчет тестирования конкретных функций?

• Синхронизация файлов : Браузеры автоматически обновляются при изменении HTML, CSS, изображений и других файлов проекта.
• Синхронизация взаимодействия : Ваши действия прокрутки, щелчка, обновления и формы отображаются между браузерами во время тестирования.
• История URL-адресов : записывает ваши тестовые URL-адреса, чтобы вы могли отправить их обратно на все устройства одним щелчком мыши.
• Network Throttle : Проверьте свой веб-сайт на наличие более медленного соединения. Даже когда устройства подключены к WiFi.
• Структура CSS : Переключает структуру CSS для каждого элемента на вашей странице.
• CSS Depth Outlining : Быстро выделяйте любые потенциальные ошибки макета, которые могут быть в вашем CSS/HTML
• Полностью настраиваемый прокси-сервер : прокси-запросы к существующим vhost, WebSocket или написание собственного промежуточного программного обеспечения.
• Правила перезаписи : создайте свои собственные правила перезаписи. Имитация SSI, внедрение HTML и т. д. … .
• Минификация : автоматическая минимизация JavaScript на стороне клиента.
• Плагины : сотни плагинов доступны на npmjs.com

Почувствуй себя полубогом

, как выразился Дэйв Руперт:

«Хотите почувствовать себя современным полубогом? Запустите BrowserSync и управляйте всей лабораторией устройств с помощью своего телефона».

BrowserSync ghostMode должна быть одной из самых полезных функций, которые я использую каждый день, и она настолько проста, что ее настройка вообще не требует усилий:

 // вы можете отключить/включить каждую функцию по отдельности
режим призрака: {
  клики: правда,
  формы: правда,
  прокрутка: ложь
}
 

Node.js является необязательным

Хотя BrowserSync написан на Node.js, это не означает, что вы или ваш проект должны работать в Node, чтобы использовать эту мощную утилиту.

Хотя интеграция с инструментами сборки, такими как Gulp и Grunt, очень проста, ваш проект может их не использовать, вы все равно можете использовать всю мощь BrowserSync с помощью командной строки:

 # Смотреть ВСЕ файлы CSS на наличие изменений со статическим сервером
$ запуск синхронизации браузера --files "app/css/*.css" --сервер --порт 8080
 

Заткнись и возьми мои деньги!

BrowserSync на 100% бесплатен, все, что вам нужно сделать, это следовать руководству по установке, и вы будете готовы к работе через 5 минут.