Время для прочтения: 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 комментария

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

Привет всем!
Не работает с CSS.
Настроил так (картинка)
Инспектор выключен, коннект присутствует, но не обновляется страница.
То же самое с рнр файлами - работает нормально.
Может кто сталкивался - подскажите пожалуйста решение

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

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

Александр

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

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

Не забывайте, что в PhpStorm 6 плагин LiveEdit отсутствует по умолчанию - его надо скачать и установить!

Кирилл

phpstorm6, plugin liveedit install, all options enabled

chrome extension JetBrains IDE Support 0.5.10 (127.0.0.1:63342/63343/63363)

result: JetBrains IDE Support not connected => LiveEdit не работает

вопрос: что я делаю не так?

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

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

Сергей

Проблема с установкой liveEdit... установил phpstorm 5.0.4 включил в настройках liveedit(через alt+ctrl+s),установил дополнения к хрому из папки plugin но ничего не работает! В чем может быть проблема?

Сергей

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

Не знаю, что я сделал, но поковырялся в настройках Сторма где-то в районе Settings->Web Browser-> поле Chrome->Settings->установил чек бокс над полем с C:\Users\Имя пользователя\.WebIde50\config\chrome-user-data

И все заработало, УРА!!!

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

Удалите и снова поставьте расширение под хром. А под ФФ тоже есть расширение?

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

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

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

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

Подскажите, пожалуйста, что могло произойти, вчера все отлично работало, но сегодня Chrome перестал воспринимать Live Edit, в браузере появлялось всплывающее окно, что расширение JetBrains что-то там делает, возможно я машинально нажал Отмена. Что делать, как вернуть работоспособность расширения JetBrains?

P.S. В PhpStorm все необходимые настойки включены, расширение в браузере установлено.

P.P.S. В ff это расширение тоже не работает.

У меня почему то ни в какую не робит, редактирую а отображение блоков в хроме показывает, но редактирование в режиме реального времени не функционирует.

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

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

Я вот как раз читать люблю 🙂

Все сделал, а дальше то что? У меня менюшка Reload in Browser неактивна вообще, почему так?

Можно ли подробнее.

Спасибо

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

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

Султан

­Всем привет,

Не получается скачать плагин (jb.­crx), ребят выложите пожалуйста этот файлик (http://localhost/jb.crx), замучился искать решение по форумам.

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

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

Султан

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

Немного оффтоп: чем снимал скринкаст в маке?

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

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