Время для прочтения: 1 мин. 58 сек.

Live Edit в PhpStorm

Функция Live Edit в PhpStorm совместно с плагином под браузер Google Chrome позволяют редактировать PHP/HTML/CSS/JS в реальном времени без перезагрузки страницы. Вы правите что-то в среде разработки - результат моментально отображается в браузере.

Установка

  1. Запустите PhpStorm
  2. Откройте настройки (Ctrl+Alt+S)
  3. Перейдите в подраздел Live Edit и отметьте оба пункта для включения данного режима редактирования
    Флажок Описание
    Enable live editing Включение/Выключение возможности править HTML, CSS, и JavaScript «на лету».
    Enable element highlighting in browser Включение/Выключение подсветки в браузере области редактирования

    В PhpStorm 6.0.2 плагин LiveEdit отсутствует по умолчанию, но его легко можно установить из репозитория. Идем по пути: File → Settings → Plugins → Browse repositories. В строке поиска вбиваем «LiveEdit». Жмём правой клавишей на найденном плагине и выбираем «Download and Install». Перезапускаем IDE

  4. Запустите Google Chrome
  5. Скачайте по адресу http://localhost:63363/jb.crx плагин для браузера Google Chrome

    Для PhpStorm версии 5.0.3 скачайте расширение по адресу https://dl.dropbox.com/u/43511007/jb-3.10.crx

    Для PhpStorm с версии 5.0.4 используйте расширение из папки Папка_с_PhpStorm/plugins/JavaScriptDebugger/extensions/jb.crx

  6. Откройте контекстное меню скачанного файла и нажмите «Показать в папке»

    Contextmenu for downloaded item

    Для PhpStorm 6.0.2 просто установите расширение JetBrains IDE Support из репозитория Google Webstore

  7. Откройте менеджер расширений Google Chrome chrome://chrome/extensions/ и перетащите скачанный файл расширения в это окно.

Для тех, кто не любит читать

 

Возможные проблемы

  • CSS/JavaScript синхронизация и подсветка элементов не работает, когда открыт Web Inspector (голосуем за этот баг в Chrome).
  • Расширение от Jetbrains не регистрируется в Google Chrome под Linux (Ubuntu). Фиксим при помощи:
    sudo mkdir -p -m0777 /opt/google/chrome/extensions
  • После обновления IDE перестает работать Live Edit. Попробуйте обновить расширения:
    Меню → Инструменты → Расширения → Режим разработчика → Обновить расширения.

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

24 комментария

сначала новые
по рейтингу сначала новые по хронологии
Александр

Вот что нарыл. Работает 1000% со всеми файлами. Правда только после сохранения файлов. Но... 🙂 http://alexn.kiev.ua/component/content/article/38-2011-01-10-12-13-39/90-livereloadx

у меня такое было ) решил тем, что поставил плагин ливедита (шторм) в ручном режиме (качал с их сайта http://plugins.jetbrains.com/plugin/7007?pr= )
там версия плагина должна соответствовать релизу (номеру) шторма.
+ удалил/поставил плагин в браузере (хром как-то тупил всё время, работаю в яндекс браузере).

для sass решения так и не нашёл... такана отказалась работать, пришлось прикрутить к проэкту js скрипт от ливрелоад. Иногда сваливается, но работает стабильнее ливедита.

А всё разобрался 🙂 это плагин не только к хрому, но и к пш6 и его надо качать

А какие параметры в ps6 надо включать? Live Edit в настройках в упор не вижу, видимо в 6ке убрали...

Сергей

операционная система windows 7

Нет я не про это. При установке PhpStorm 5.0.4 в Chrome устанавливается расширение JetBrains Chrome Extension 0.3.11, а в FF - JetBrains Firefox Extension 0.5.10

Автор
Кобзарёв Михаил

Если вы про это, то это не то.

Да, под ФФ тоже есть, устанавливается так же, как и в хром (одновременно с установкой программы), правда другая версия 0.5.10.. В хроме я расширение переустанавливал и сам Шторм тоже, но результата нет. Все хорошо работало, а тут как отрезало не работает и все. Эта функция для меня была основной для перехода на Шторм(((

Автор
Кобзарёв Михаил

Третий пункт выполнили?

Автор
Кобзарёв Михаил

Куда уж подробнее 🙂 Опишите по шагам ваши действия. Версия Шторма какая? EAP или обычная? Купленная или крякнутая?

Султан

Огромное спасибо! Порты указывал 63363 и 63342, но не помогло. Еще раз спасибо.

Автор
Кобзарёв Михаил

Забирайте, путь обязательно с портом надо было указывать! Порт 63363

Автор
Кобзарёв Михаил

Это официальное видео от JetBrains