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

Ссылки

Пошерить
Запинить
Отправить
Вотсап

Смотрите также

Комментарии