Livereload chrome: Как заставить работать LiveReload + Sublime Text 3 в Chrome? — Хабр Q&A

LiveReload — загрузка расширения для Chrome

LiveReload — загрузка расширения для Chrome Популярные инструменты

Статистика расширений Chrome Верхнее расширение Трекер манифеста V3 Расширенный поиск Загрузка необработанных данных

Премиум-инструменты Статистика расширения Статистика издателя

Цены

ModHeader ChatGPT PromptsZone Создатель темы Chrome Статистика дополнений Edge Статистика надстроек Firefox

Популярные инструменты

Статистика расширений Chrome Верхнее расширение Трекер манифеста V3 Расширенный поиск Загрузка необработанных данных

Премиум-инструменты Статистика расширения Статистика издателя

Цены

ModHeader ChatGPT PromptsZone Создатель темы Chrome Статистика дополнений Edge Статистика надстроек Firefox

Обеспечивает интеграцию браузера Chrome с официальными приложениями LiveReload (Mac и Windows) и сторонними приложениями, такими как guard-livereload и…

• Обзор
• Скачать
• Источник
• Отзывы
• Тенденции
• Переключить раскрывающийся список

LiveReload можно установить в Интернет-магазине Chrome и загрузить с этой страницы. У него 172 613 активных пользователей в неделю. Последняя версия — 2.1.0, она была опубликована год назад.

Посмотреть исходный код

Всего загрузок: 69 (Считать загрузки только из ChromeStats)

Установите LiveReload из Интернет-магазина Chrome

Текущую и предыдущие версии LiveReload можно найти здесь. Вы можете скачать в архиве версии или проверить их исходные коды.

Как бесплатный пользователь вы можете получить доступ к 5 версиям. Подпишитесь на платную версию из ChromeStats для доступа к более доступным версиям.

Версия	Скачать	Размер	Количество загрузок	Отметка времени
2.1.0	Войдите, чтобы скачать	61. 18K	69	09.02.2022

1. Загрузить LiveReload файл CRX .
2. ПРИМЕЧАНИЕ. Иногда браузер может блокировать загрузку/установку файла CRX извне. Интернет-магазин Chrome. Если это так, вам может понадобиться вместо этого загрузите ZIP-файл.
3. В адресной строке перейдите по адресу chrome://extensions
.
4. Включить Режим разработчика
5. Перетащите загруженный файл LiveReload CRX в Extensions страница
6. При появлении запроса нажмите Добавить расширение для установки LiveReload.

1. Загрузите и распакуйте LiveReload ZIP-файл в каталог по вашему выбору.

2. В браузере Chrome перейдите по адресу chrome://extensions

3. Включить Режим разработчика .

4. Нажмите кнопку Загрузить распакованное .

5. Выберите каталог с распакованным ZIP-файлом LiveReload из шага 1. LiveReload теперь установлен в вашем браузере.

Вот некоторые расширения Chrome, похожие на LiveReload:

Live Reload

Издатель: Блез Кэл

Количество пользователей: 7 769

Рейтинг: 18

Веб-сайт: https://github.com/blaise-io/live-reload

Отслеживает исходные файлы на странице. Перезагружает страницу или только измененную таблицу стилей при обновлении исходных файлов.

Подробнее Сравнить

RemoteLiveReload

Издатель: remotelivereload

Количество пользователей: 6 872

Рейтинг: 36

Веб-сайт: https://github. com/bigwave/livereload-extensions

Live Reload — это система автоматической перезагрузки веб-страницы при изменении исходных файлов для этой веб-страницы. Это расширение…

Подробнее Сравнить

Эммет LiveStyle

Издатель: http://emmet.io

Количество пользователей: 27 324

Рейтинг: 351

Веб-сайт: http://livestyle.io/

LiveStyle — первый двунаправленный инструмент редактирования в реальном времени для CSS, LESS и SCSS.

Подробнее Сравнить

Свяжитесь с нами

• Цены
• Условия использования
• Уведомление о конфиденциальности
• Добавить добавочный номер
• Добавить ключевое слово

Ресурсы

• О нас
• Документация
• Загрузка исходных данных
• Расширенный поиск
• Средство создания тем Chrome
• Доступ через API

Пит Кори — Расширение Chrome LiveReload и удаленные компьютеры

Прошлой ночью я решил, что было бы неплохо присоединиться к 21 веку и включить LiveReload в рабочий процесс моего внешнего интерфейса. Поскольку я уже использую grunt-contrib-watch для просмотра своих файлов LESS/SASS, я решил, что это будет очень просто. grunt-contrib-watch поддерживает LiveReload из коробки! Все, что было нужно, это блок параметров внутри моей конфигурации часов:

.

 смотреть: {
    параметры: {
        перезагрузка: правда,
    },
    ...
 

Эта опция запускает сервер LiveReload на моей машине разработки, работающей на порту 35729 по умолчанию. Чтобы использовать LiveReload, ваш клиент должен включить сценарий livereload.js , обслуживаемый этой службой. Это можно сделать либо вручную добавив тег script в ваш проект, либо используя расширение Chrome LiveReload. Я быстро установил расширение, с нетерпением нажал кнопку LiveReload и… получил ошибку!

Не удалось подключиться к серверу LiveReload. Убедитесь, что работает совместимый сервер LiveReload. (Мы рекомендуем guard-livereload, пока LiveReload 2 не появится на вашей платформе. )

Странно. Мой сервер разработки работал на виртуальной машине по адресу

192.168.0.12 , поэтому, чтобы убедиться, что сервер LiveReload работает, я перешел на http://192.168.0.12:35729/ в браузере. Как и ожидалось, я получил ответ JSON от сервера tinylr grunt-contrib-watch:

.

 {
    "tinylr": "Добро пожаловать",
    "версия": "0.0.5"
}
 

Очень странно. Livereload работал на моей машине разработки, но расширение Chrome не могло к нему подключиться. В качестве проверки работоспособности я решил отказаться от подключения к расширению браузера и вручную добавил тег сценария livereload.js для моего проекта:

После перезагрузки страницы я заметил, что она смогла успешно извлечь файл livereload.js , и изменения LiveReload вступили в силу.

Хотя этот подход работал, я не был удовлетворен. Я хотел использовать расширение браузера, а не вручную включать скрипт в свой проект.

Я начал копаться в плагине, чтобы узнать, что происходит.

Первым делом я включил «Режим разработчика» в окне расширений Chrome. Это позволило мне установить и включить Chrome Apps & Extensions Developer Tool. Я запустил Extension Dev Tools, открыл консоль LiveReload и еще раз попытался подключиться к своему серверу разработки. Сообщения журнала дали понять, что происходит:

 Подключение к ws://127.0.0.1:35729/livereload...
Не получил вовремя ответ на рукопожатие, разъединение.
Соединение WebSocket с 'ws://127.0.0.1:35729/livereload' не удалось: WebSocket закрывается до установления соединения.
Ошибка веб-сокета.
Веб-сокет отключен. 

Расширение LiveReload пыталось подключиться к 127.0.0.1 , а не 192.168.0.1 . Быстрый просмотр global.js показывает, что хост жестко запрограммирован на

127.0.0.1 в функции инициализации .

После просмотра проблем github для проекта расширения LiveReload я нашел неслитный запрос на вытягивание от 2013 года Грега Аллена, который устранил проблему.