emmet-livestyle
Время для прочтения: 1 мин. 31 сек.

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 комментария

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

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

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

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

Султан

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

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

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

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

Султан

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

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

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

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

Спасибо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сергей

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

Сергей

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

Кирилл

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ке убрали...

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

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

Александр

Привет всем!
Не работает с 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