Live Edit в PhpStorm — автоматическое обновление страницы при изменении файлов

При верстке сайтов очень удобно, когда браузер автоматически обновляет страницу после изменения HTML, CSS или JavaScript-файлов. В PhpStorm для этого есть встроенный инструмент Live Edit.

В этой статье рассмотрим, как настроить автоматическое обновление страницы в PhpStorm с помощью плагина Live Edit и расширения для Google Chrome.

Что понадобится

Для работы Live Edit необходимо установить:

• JetBrains IDE Support — расширение для Google Chrome;
• Live Edit — плагин для PhpStorm.

Установка расширения JetBrains IDE Support для Chrome

Сначала устанавливаем расширение для браузера Google Chrome:

JetBrains IDE Support

Переходим по ссылке и нажимаем кнопку «Установить».

Установка плагина Live Edit в PhpStorm

После установки расширения открываем PhpStorm и переходим:

File → Settings → Plugins

В разделе плагинов нажимаем кнопку Install JetBrains plugin...

В поиске вводим LiveEdit и устанавливаем плагин кнопкой Install.

После установки PhpStorm предложит перезапустить IDE — соглашаемся и перезапускаем программу.

Запуск Live Edit

Чтобы Live Edit начал работать, необходимо включить режим отладки.

Для этого нажимаем правой кнопкой мыши по нужному файлу и выбираем:

Debug

После этого PhpStorm подключится к браузеру, и страница начнет автоматически обновляться при изменении файлов.

Если Live Edit не работает

В некоторых случаях Live Edit может не включиться автоматически.

У меня плагин заработал только после нажатия кнопки Enable Live Edit в окне Event Log.

Как убрать сообщение «JetBrains IDE Support отлаживает этот браузер»

Если вас раздражает уведомление в Chrome о том, что браузер находится в режиме отладки, его можно отключить.

1. Откройте страницу chrome://flags;
2. Найдите параметр Silent Debugging;
3. Нажмите Enable;
4. Перезапустите Google Chrome.

Альтернатива Live Edit

Если вы не используете PhpStorm или работаете в другой IDE, для автоматического обновления страницы можно использовать универсальное решение — BrowserSync.

У меня есть отдельная статья по настройке BrowserSync:

BrowserSync — полезный инструмент для верстальщика

Текст анонса

Настраиваем автоматическое обновление страницы в PhpStorm с помощью Live Edit и расширения JetBrains IDE Support для Chrome. Показываю пошаговую установку, запуск режима отладки и решение проблемы, когда Live Edit не работает.