- Почему LiveEdit WebStorm не работает в Chrome?
- 7 ответов
- Live Edit в PhpStorm
- Установка
- Для тех, кто не любит читать
- Live Edit in HTML, CSS, and JavaScript
- Before you start
- Activate and configure Live Edit in JavaScript
- Use Live Edit
- Live Edit in HTML, CSS, and JavaScript
- Before you start
- Activate and configure Live Edit in JavaScript
- Use Live Edit
- Live Edit для PhpStorm — полезный инструмент верстальщика
Почему LiveEdit WebStorm не работает в Chrome?
Я изучаю пробную версию WebStorm и хотел бы использовать функции LiveEdit.
Я не могу использовать функции LiveEdit после выполнения следующих действий:
- убедитесь, что LiveEdit включен
- установлено расширение Chrome
- перезапустил браузер после установки расширения (я все еще подозреваю, что это не требуется)
- запустите HTML-страницу в chrome
когда я изменить тело HTML, я не вижу изменений, отраженных в Chrome.
Я читала на форуме, что Нетти не требуется.
Что еще мне нужно настроить, чтобы я мог использовать функцию LiveEdit?
PS: я использую WebStorm 5.0.
7 ответов
У вас случайно IntelliJ открыт? Дело в том, что порт 63342 «захвачен» другим приложением (даже если он не имеет ничего общего с отладкой HTML).
когда порт занят, LiveEdit пытается следующий, 63343. Если вы щелкните правой кнопкой мыши значок JB в Chrome, выберите «Параметры», увеличьте порт на один и нажмите «Применить», вы волшебным образом подключитесь. Я бы хотел, чтобы Jetbrains потрудился сообщить пользователю, что такое порт, который они в настоящее время пытаются использовать.
на моем ПК это произошло, когда у меня был Mac. Либо одно из следующих работ: 1. Убейте IntelliJ IDEA (который также был открыт) и повторите попытку 2. Увеличьте порт на единицу, как я упоминал выше.
Мне пришлось перейти к Run — > Debug (CTRL+F5 в Windows)
в моем случае live edit был просто отключен (по какой-то причине)
что помогло в моем случае, это активация «может принимать внешние подключения» в настройках — > сборка, выполнение, развертывание -> отладчик
больше деталей как спрошено:
- установлено расширение JetBrains IDE для Chrome
- убедитесь, что плагин LiveEdit установлен и активирован (Настройки -> Плагины)
- убедитесь, что «может принимать внешние подключения» проверено (Настройки — > Сборка, Выполнение, Развертывание — > Отладчик)и Порт такой же, как в расширении Chrome
- убедитесь, что Update ist установлен в » Auto in (ms)», например, 300 (настройки -> сборка, выполнение, развертывание -> отладчик -> Live Edit)
Я не мог сделать Chrome и Webstorm для связи друг с другом. Плагин Chrome был установлен на порт 63343 или что-то в этом роде. Я на Windows. Я открыл командную строку с правами администратора и напечатал:
чтобы увидеть все программы и порты они слушают. Потом я нашел первую запись о WebStorm.exe и увидел, что он слушает порт 30897. Я установил этот номер порта в настройках плагина chrome, и все сработало.
быстрое исправление: в конфигурации Chrome addon используйте ip 0.0.0.0 для хозяина.
отключение конфигурации автоматического подключения из свойств Internet Explorer работало для меня гладко. Т. е. босс.
Источник
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
Скачайте по адресу http://localhost:63363/jb.crx плагин для браузера Google Chrome
Для PhpStorm с версии 5.0.4 используйте расширение из папки Папка_с_PhpStorm/plugins/JavaScriptDebugger/extensions/jb.crx
Откройте контекстное меню скачанного файла и нажмите «Показать в папке»
Для PhpStorm 6.0.2 просто установите расширение JetBrains IDE Support из репозитория Google Webstore
Для тех, кто не любит читать
Источник
Live Edit in HTML, CSS, and JavaScript
Live Edit is available only during a debugging session, see Debug JavaScript in Chrome for details.
Debugging of JavaScript code is only supported in Google Chrome and in other Chromium-based browsers.
With the Live Edit functionality, the changes you make to your HTML, CSS, or JavaScript code are immediately shown in the browser without reloading the page.
Live Edit works for other file types that contain or generate HTML, CSS, or JavaScript. You can also use Live Edit when debugging a Node.js application. See Live Edit in Node.js application for details.
By default, Live Edit is enabled only for HTML and CSS files.
Before you start
Make sure the JavaScript and TypeScript and JavaScript Debugger required plugins are enabled on the Settings/Preferences | Plugins page, tab Installed , see Managing plugins for details.
Make sure the LiveEdit plugin is enabled on the Settings/Preferences | Plugins page, tab Installed , see Managing plugins for details.
Configure the built-in debugger as described in Configuring JavaScript debugger.
To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. See Live Edit in HTML, CSS, and JavaScript for details.
Activate and configure Live Edit in JavaScript
In the Settings/Preferences dialog Ctrl+Alt+S , go to Build, Execution, Deployment | Debugger | Live Edit .
On the Live Edit page that opens, select the Update application in Chrome on changes in checkbox.
By default, WebStorm shows on-the-fly preview only for HTML and CSS code. To enable Live Edit in JavaScript, select the JavaScript, HTML and CSS option.
Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value 300 ms or specify a custom value using the spin box next to the corresponding field.
To enable reloading of JavaScript files that are executed by Node.js, select the Update Node.js application on change checkbox. Use the spin box to specify the elapsed time for upload, the default value is 300 .
To enable Live Edit in code that can be compiled into JavaScript, HTML, or CSS, for example, in TypeScript, Pug, or SCSS, select the Track changes in files compiled to JavaScript, HTML or CSS checkbox.
All the changes made in such files are automatically saved to trigger compilation and then appear in the browser.
Note that a changed file is saved shortly after the update, contrary to regular autosave triggered by closing a file, a project, or WebStorm, or by other events.
To configure highlighting, select the Highlight current element in browser on caret change checkbox. Otherwise, during a debugging session, you will have to hold Shift and hover over the element in the editor to highlight it in the browser.
Select the Restart if hotswap fails checkbox to allow WebStorm to reload the page automatically if the changes couldn’t be applied without that.
Use Live Edit
Update your HTML, CSS, or JavaScript code as necessary. The changes are reflected in the browser immediately without reloading the page.
Источник
Live Edit in HTML, CSS, and JavaScript
Live Edit is available only during a debugging session, see Debug JavaScript in Chrome for details.
Debugging of JavaScript code is only supported in Google Chrome and in other Chromium-based browsers.
With the Live Edit functionality, the changes you make to your HTML, CSS, or JavaScript code are immediately shown in the browser without reloading the page.
Live Edit works for other file types that contain or generate HTML, CSS, or JavaScript. You can also use Live Edit when debugging a Node.js application. See Live Edit in Node.js application for details.
By default, Live Edit is enabled only for HTML and CSS files.
Before you start
Make sure the JavaScript and TypeScript and JavaScript Debugger required plugins are enabled on the Settings/Preferences | Plugins page, tab Installed , see Managing plugins for details.
Make sure the LiveEdit plugin is enabled on the Settings/Preferences | Plugins page, tab Installed , see Managing plugins for details.
Configure the built-in debugger as described in Configuring JavaScript debugger.
To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. See Live Edit in HTML, CSS, and JavaScript for details.
Activate and configure Live Edit in JavaScript
In the Settings/Preferences dialog Ctrl+Alt+S , go to Build, Execution, Deployment | Debugger | Live Edit .
On the Live Edit page that opens, select the Update application in Chrome on changes in checkbox.
By default, WebStorm shows on-the-fly preview only for HTML and CSS code. To enable Live Edit in JavaScript, select the JavaScript, HTML and CSS option.
Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value 300 ms or specify a custom value using the spin box next to the corresponding field.
To enable reloading of JavaScript files that are executed by Node.js, select the Update Node.js application on change checkbox. Use the spin box to specify the elapsed time for upload, the default value is 300 .
To enable Live Edit in code that can be compiled into JavaScript, HTML, or CSS, for example, in TypeScript, Pug, or SCSS, select the Track changes in files compiled to JavaScript, HTML or CSS checkbox.
All the changes made in such files are automatically saved to trigger compilation and then appear in the browser.
Note that a changed file is saved shortly after the update, contrary to regular autosave triggered by closing a file, a project, or WebStorm, or by other events.
To configure highlighting, select the Highlight current element in browser on caret change checkbox. Otherwise, during a debugging session, you will have to hold Shift and hover over the element in the editor to highlight it in the browser.
Select the Restart if hotswap fails checkbox to allow WebStorm to reload the page automatically if the changes couldn’t be applied without that.
Use Live Edit
Update your HTML, CSS, or JavaScript code as necessary. The changes are reflected in the browser immediately without reloading the page.
Источник
Live Edit для PhpStorm — полезный инструмент верстальщика
В этой статье мы рассмотрим подключение плагина Live Edit — автоматическое обновление страницы при ее изменении в PhpStorm.
Нам понадобятся плагины JetBrains IDE Support для Google Chrome и Live Edit для PhpStorm
Начнем с установки плагина для Google Chrome — JetBrains IDE Support, переходим по ссылке, нажимаем + установить
После установки плагина открываем PhpStorm, переходим в настройки ( File -> Settings ), выбираем раздел Plugins и нажимаем кнопку Install JetBrains plugin.
В следующем окне в поиске набираем LiveEdit и нажимаем на зеленную кнопку Install
После установки PhpStorm предложит перезапуститься, перезапускаем PhpStorm.
Чтобы LiveEdit начал работать нам необходимо включить отладчик, нажимаем правой кнопкой мыши по файлу с которым хотим работать и выбираем в меню Debug
Также у меня не работал LiveEdit пока я не нажал Enale live Edit в Event Log
Вот и все.
Если вас раздражает надпись «JetBrains IDE Support отлаживает этот браузер» то ее можно отключить.
1. Открыть вкладку chrome://flags (в строке поиска).
2. Найти пункт Silent Debugging.
3. Нажать кнопку Enable.
4. Перезагрузить Chrome.
Также если вы не используете PhpStorm или используете другую IDE для автоматического обновления страниц при изменении можно использовать универсальное решение Browsersync — статья по настройке.
Источник