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