Обновление страниц в Chrome с помощью плагина LivePage при измении

При верстке и разработке сайтов очень неудобно постоянно вручную обновлять страницу после каждого изменения CSS или HTML.

Для решения этой проблемы можно использовать расширение LivePage для Google Chrome, которое автоматически обновляет страницу при изменении файлов на сервере.

Это особенно удобно при:

frontend-разработке;
адаптивной верстке;
работе с CSS;
редактировании HTML и PHP;
локальной разработке сайтов.

Скачиваем расширение LivePage

Скачиваем расширение с GitHub:

https://github.com/MikeRogers0/LivePage

Нажимаем кнопку:

Code;
Download ZIP.

Скачивание LivePage с GitHub

Распаковываем архив

После загрузки распаковываем ZIP-архив в любую удобную директорию.

Открываем расширения Chrome

В Google Chrome переходим:

Меню;
Дополнительные инструменты;
Расширения.

Раздел расширений Chrome

В своих проектах я использую серверную инфраструктуру Timeweb Cloud

VPS и облачные решения для стабильной работы сайтов на PHP и 1С-Битрикс — от корпоративных сайтов до интернет-магазинов и высоконагруженных веб-проектов.

Перейти на Timeweb Cloud

Реклама · ERID: CQH36pWzJqVJ4YD9t5y227AkMQdhpG2THarwRmX2g9tS8x

Включаем режим разработчика

В правом верхнем углу страницы расширений включаем:

Режим разработчика.

После этого появится кнопка:

Загрузить распакованное расширение.

Режим разработчика Chrome

Устанавливаем LivePage

Нажимаем:

Загрузить распакованное расширение.

И выбираем папку с распакованным расширением LivePage.

После этого расширение установится в Chrome.

Автоматическое обновление страницы

После установки в панели расширений Chrome появится новый значок LivePage.

При нажатии на него расширение начнет:

отслеживать изменения файлов;
мониторить HTML и CSS;
автоматически обновлять страницу в браузере.

Работа расширения LivePage

Преимущества LivePage

простая установка;
автоматическое обновление страницы;
экономия времени при верстке;
удобная работа с локальными сайтами;
подходит для HTML, CSS и PHP.

Альтернативы LivePage

Также для автоматического обновления страниц можно использовать:

BrowserSync;
LiveReload;
Vite;
Webpack Dev Server;
встроенный Live Edit в PhpStorm.

Итог

LivePage — простое и удобное расширение Chrome для автоматического обновления страниц при разработке сайтов.

Особенно полезно при верстке, когда изменения CSS и HTML нужно видеть сразу без ручного обновления страницы.

Комментарии

Обновление страниц в Chrome с помощью плагина LivePage при измении html, css файлов