Live Edit в PhpStorm
Функция Live Edit в PhpStorm совместно с плагином под браузер Google Chrome позволяют редактировать PHP/HTML/CSS/JS в реальном времени без перезагрузки страницы. Вы правите что-то в среде разработки — результат моментально отображается в браузере.
Установка
- Запустите PhpStorm
- Откройте настройки (Ctrl+Alt+S)
- Перейдите в подраздел
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
- Запустите Google Chrome
-
Скачайте по адресу 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 -
Откройте контекстное меню скачанного файла и нажмите «Показать в папке»
Для PhpStorm 6.0.2 просто установите расширение JetBrains IDE Support из репозитория Google Webstore
Откройте менеджер расширений 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. Попробуйте обновить расширения:
Меню → Инструменты → Расширения → Режим разработчика → Обновить расширения.
Немного оффтоп: чем снимал скринкаст в маке?
Это официальное видео от 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 не работает
вопрос: что я делаю не так?
А какие параметры в ps6 надо включать? Live Edit в настройках в упор не вижу, видимо в 6ке убрали…
А всё разобрался 🙂 это плагин не только к хрому, но и к пш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
В Codelobster также удобно реализован Live Edit
Возможно, сто лет им не пользовался