Nikovit <Путешествия и разработка>

Live Edit для PhpStorm - полезный инструмент верстальщика

1200px-Логотип_PhpStorm.svg.png

В этой статье мы рассмотрим подключение плагина Live Edit - автоматическое обновление страницы при ее изменении в PhpStorm.
Нам понадобятся плагины JetBrains IDE Support для Google Chrome и Live Edit для PhpStorm

Начнем с установки плагина для Google Chrome - JetBrains IDE Support, переходим по ссылке, нажимаем + установить

2018-05-04 (5).png

После установки плагина открываем PhpStorm, переходим в настройки (File -> Settings), выбираем раздел Plugins и нажимаем кнопку Install JetBrains plugin...

1.jpg

В следующем окне в поиске набираем LiveEdit и нажимаем на зеленную кнопку Install
2.png
После установки PhpStorm предложит перезапуститься, перезапускаем PhpStorm.

Чтобы LiveEdit начал работать нам необходимо включить отладчик, нажимаем правой кнопкой мыши по файлу с которым хотим работать и выбираем в меню Debug

2018-05-04 (6).png

Также у меня не работал LiveEdit пока я не нажал Enale live Edit в Event Log
2018-05-04 (7).png
Вот и все.

Небольшое дополнение:

Если вас раздражает надпись "JetBrains IDE Support отлаживает этот браузер" то ее можно отключить.
1. Открыть вкладку chrome://flags (в строке поиска).
2. Найти пункт Silent Debugging.
3. Нажать кнопку Enable.
4. Перезагрузить Chrome.

Также если вы не используете PhpStorm или используете другую IDE для автоматического обновления страниц при изменении можно использовать универсальное решение Browsersync - статья по настройке.  


0
Павел
18.08.2018 23:54:24
Спасибо дружище
0
Serhiy
23.10.2018 18:28:07
А что делать что бы в CSS так же отображались изменения?
0
Евгений
13.04.2021 19:59:59
Проверь пути. У меня были указаны от корня: /css/style.css, убрал первый слэш: css/style.css и все ок
1
Fein
05.11.2019 18:03:58
Спасибо большое! А то уже не знал где искать как отключить это дуратское окно отслеживания.
0
07.11.2019 06:31:11
Рад что вам помогла моя статья)