Live Edit в PhpStorm

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. Попробуйте обновить расширения:
    Меню → Инструменты → Расширения → Режим разработчика → Обновить расширения.

Ссылки

Теги:

  • http://kobzarev.com/ Кобзарёв Михаил

    Не забывайте, что в 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 не работает

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

    • http://pdragon.ru pdragon

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

    • http://pdragon.ru pdragon

      А всё разобрался :) это плагин не только к хрому, но и к пш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
    И все заработало, УРА!!!

  • http://kobzarev.com/ Кобзарёв Михаил

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

    • Олег

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

      • http://kobzarev.com/ Кобзарёв Михаил

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

        • Олег

          Нет я не про это. При установке 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 это расширение тоже не работает.

  • Zel

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

    • http://kobzarev.com/ Кобзарёв Михаил

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

  • Денис

    Я вот как раз читать люблю :)
    Все сделал, а дальше то что? У меня менюшка Reload in Browser неактивна вообще, почему так?
    Можно ли подробнее.
    Спасибо

    • http://kobzarev.com/ Кобзарёв Михаил

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

  • Султан

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

    • http://kobzarev.com/ Кобзарёв Михаил

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

      • Султан

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

  • http://zagirov.name stamm

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

    • http://kobzarev.com/ Кобзарёв Михаил

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