Верх страницы
Обложка к записи Live Edit в PhpStorm
Время для прочтения: 0 мин. 28 сек.

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/ и перетащите скачанный файл расширения в это окно.

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

 

Reload corresponding pages for any opened file in PhpStorm/WebStormReload corresponding pages for any opened file in PhpStorm/WebStorm

Live edit HTML, CSS and JavaScriptLive edit HTML, CSS and JavaScript

Live completionLive completion

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

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

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

26 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
stamm
11 лет назад

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

Султан
Султан
11 лет назад

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

Султан
Султан
11 лет назад
Ответить на  Кобзарёв Михаил

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

Денис
Денис
11 лет назад

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

Zel
Zel
11 лет назад

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

Олег
Олег
11 лет назад

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

Олег
Олег
11 лет назад
Ответить на  Кобзарёв Михаил

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

Олег
Олег
11 лет назад
Ответить на  Кобзарёв Михаил

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

Олег
Олег
11 лет назад

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

Сергей
Сергей
11 лет назад

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

Сергей
Сергей
11 лет назад
Ответить на  Сергей

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

Кирилл
Кирилл
10 лет назад

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 не работает

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

pdragon
10 лет назад
Ответить на  Кирилл

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

pdragon
10 лет назад
Ответить на  Кирилл

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

Александр
Александр
9 лет назад

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

djetson
djetson
9 лет назад
Ответить на  Александр

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

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

Александр
Александр
9 лет назад
Ответить на  djetson

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

Stas Ustimenko
4 лет назад

В Codelobster также удобно реализован Live Edit

Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы