LiveEdit it is a new name of former “Instant HTML Editing” plugin (see What’s cooking: Instant HTML/CSS editing preview). Since WebStorm & PhpStorm 5.0 EAP 121.110 this plugin is bundled.
It allows you to view your changes in an actual browser window instantly without a page refresh, reload corresponding browser pages (related to opened file in IDE) and highlight corresponding element. Currently only Google Chrome is supported (extensions for Firefox & Safari are still postponed).
Let’s look at features in detail.
Reload corresponding pages for any opened file in IDE
If you edit your PHP file or Smarty template, it is so boring to switch to the browser and reload tab manually, isn’t it? Forget about it! Just View -> Reload in Browser (of course, you can assign keyboard shortcut (as example, you can assign ⌃+R under Mac OS)).
Live edit HTML, CSS and JavaScript
Want to see your change instantly? No problem. And yes, SASS/CoffeeScript are supported (external watching compiler is still needed). CSS and JavaScript (Kotlin, CoffeeScript and any other compilable to JS) will be hot-swapped without page refresh (of course, hot-swapped JavaScript will be effective only if it used in cycle or event-driven).
Live completion
Completion lookup is also live.
As usual: feel free to report any problems that you have in bug tracker. We will instantly answer all your questions at the forum.
Happy coding!
JetBrains Web IDE Team
For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.
Okay this is awesome. I just let a feedback to Webstorm team two weeks ago about this specific feature, and now here it is better than ever. Congratulations, you guys rocks !
Does it use source maps?
Thanks in advance.
Source maps is not supported yet. If your page uses minified JS with different file name and you edit original source — reload functionality will not work. Please specify what you want.
can this work for a complex php symfony2 app?
Should work. If not or you want something special — feel free to file issue about desired feature.
Pingback: Apple’s Victory, SkyDrive for Andorid, Office Web Apps, and Much More | Zfort Group Blog
It looks really good.
Does this actually work?
I just downloaded v5 and I can’t make “Live Edit” work.
I have View > Live Edit checked and I also have the 2 Live Edit options in “settings” enabled. But no luck!
Am I missing something?
Thanks!
Answering my own question here…
If things did not work it is because even if the “Live Edit” plugin appears in the list of already installed plugins (in v5), there is some manual work to do:
1. adding the Chrome extension
2. adding netty to the lib
Things worked only after I did both steps above .
netty is not required for WebStorm. I think you have problem with JB Chrome extension installation. We are working with Google to simlpify this process. Did you see any notification in IDE about extension? May be you can send me idea logs (Help -> reveal in Finder, you can file issue http://youtrack.jetbrains.com/dashboard)
The google chrome extension did not enable automatically. I had to quit and restart chrome to get it to appear. Perhaps a dialog indicating that if chrome is running when PhpStorm attempts to install the plugin, that chrome needs to be restarted?
Nevermind. I didnt see this in the eventlog: 10:12:55 AM JetBrains Chrome Extension
JetBrains Chrome Extension for Live Editing will be automatically installed after you restart Google Chrome.
If you wish to install it manually without restarting Chrome, follow this procedure (link opens in a new Chrome window).
> 2. adding netty to the lib
Could you please tell how to accomplish that step?
You don’t need to add netty anymore.
Can LiveEdit be used in IntelliJ as a separate plugin?
Or will be be bundled with IntellJ some time?
If it will be bundled with IntelliJ, when?
LiveEdit plugin is available for all JetBrains IDE — AppCode, RubyMine, PyCharm, IntelliJ IDEA, any other JetBrains platform-based product. Please Settings|Plugins|Browse repository -> type in LiveEdit
Awesome!
Waiting for firefox
it does not work for symfony2 apps using twig etc
I’ve watched videos and it looks amazing
Thank you!
You guys, at Jetbrains, are creating the best PHP IDE ever.
Coding is a pleasure to me now
Still downloading new version, and waiting…
Pingback: Live Edit в PhpStorm / PHP::Portal
should it work with Chromium (Mac)?
No plugin seems to be installed.
Can I manually trigger the installation of the plugin?
Yes. Please see http://confluence.jetbrains.net/display/WI/LiveEdit “Chrome Canary or another Chrome-based browser” http://confluence.jetbrains.net/display/WI/How+to+install+Chrome+extension
Doesnt work in Chromium on Mac – “Extensions, apps, and user scripts cannot be installed from this web site.”
Any ideas, what could be wrong here?
http://confluence.jetbrains.net/display/WI/How+to+install+Chrome+extension
Please pay attention “Open chrome://chrome/extensions/ and drag the file onto the Extensions page”
aahh… thanks!
works now, great!
1) Does Live Edit supports LESS files runtime compilation?
2) What about coffee script?
Thanks.
1) external watching compiler is required.
2) external watching compiler is required. And don’t forget, we don’t reload page — we use hot-swap for JS (hot-swapped JavaScript will be effective only if it used in cycle or event-driven).
Reloads perfectly .css and .html files! Great plugin!
With .js files the webpage doesn’t get refreshed when I execute Reload in Browser.
I looked into the console of the generated_background_page.html and I have an object IN with the updated script in it, but I have to manually refresh the webpage for the changes to take effect.
Is it normal?
)
Thanks!
Can you file issue about it with attached test files? http://youtrack.jetbrains.com/issues/WEB#newissue=yes
Before I open the issue, I want to be sure of my configuration and the way that the plugin works
So in html file, when I change a letter, the change is instantaneous (no reload in browser shortcut).
If I modify a .css file, I press the shortcut, the browser window get’s refreshed and the change is visible.
With the .js file, I press the shortcut, the plugin communicates with the browser, but I have to manually refresh to see the change.
Help?
Reloading .js files for me works only if I modify the .js and press reload in browser shortcut from the .html file that includes the .js. Like that the browser window gets refreshed automatically and the new js code executes
Should I open an issue?
Thanks.
How is it possible to run it from a local web server rather than running it with file:// and run into crossdomain issues.
Starting chrome with –disable-web-security doesn’t work because Chrome says: JetBrains is running some error handling.
Hope it is possible to configure an external url, maybe as part of the run configuration.
http://youtrack.jetbrains.com/issue/WI-13227
Pingback: WebStorm 5 – IDE for HTML5 / CSS3 / JavaScript development | techscouting through the java news
Live Edit is a great new feature – many thanks.
Note – I use Linux Debian and needed the workaround as per Vladimir comments above – i.e. create new extensions directory, download the jb.crx file and move it to the new extensions directory.
Grateful if major new features could highlight different O/S issues (Sorry if they are already listed clearly somewhere!) – I found my solution a bit by accident when reviewing this blog.
Anyhow – great new feature.
Awesome plugin!!
)
Looks like it is not working for html files inside iframes (specific of our project
Could you please take a look?
Please file issue (example html will be useful) — http://youtrack.jetbrains.com/dashboard
Hello.
Is there any way to make PhpStorm to reload live the page if it is generated through the server side (by php).
And if the server is remote (files are always autosynced with PhpStorm feature “autodeploy”).
Liveedit is working fine with static pages but not with the configuration described.
Is there a way to easily disable and enable (short key)? Also can it be disabled for php files?
Please watch http://youtrack.jetbrains.com/issue/WI-13753
How can we use this if we are using requirejs?
Can you create issue (http://youtrack.jetbrains.com/) and attach test project?
Does it work with Kohana? I can’t seem to get it (html or javascript debugging) working.
I have View -> LiveEdit enabled, as well in Settings -> Live Edit.
If LiveEdit enabled, so, any change php file will cause page reload in browser. What file do you edit?
Having LiveEdit enabled, I’m simply testing it by editing a view file, which is a php file that contains html and php scripts in it.
I thought it would be the way my local domain is structured, but it’s not. My domain ends with .local, so that shouldn’t be a problem unless the https is throwing it off?
Do I need to set my running/debugging configuration different?
Well, any help would be appreciated. Thank you for the reply Vladimir.
Plz i want to know if the LiveEdit plugin is workable on Windows Operating system
Of course, do you have any problems?
Hello,
LiveEdit is not working for me.
I’m using PHPStorm 5.0.3 #PS-121.351 with Google Chrome 22.0.1229.94 m to edit the simplest HTML page running under a local vhost ( http://www.mypage.dev ).
The connection between the browser plugin and PHPStorm works (and Chrome shows “JetBrains Chrome Extension is debugging this tab”), but live editing doesn’t. I have checked the background page, and the error message I have is:
connected to jb server browser-ext-platform.js:112
IN ["Dom","highlightElement",["7f5b9e69","html > body > div.blue-area:only-child",1]] browser-ext-platform.js:124
Uncaught TypeError: Object object has no method ‘get_asParsedUrl’ chrome-ext.js:341
What can I do to fix this?
Thanks,
JS
Fixed in 5.0.4
It’s not working here (Linux, Chrome)
Extension is installed properly in Chrome. If I understand this correcly this doesn’t need a debug session? It needs only to enable the “Live View” option.
http://local/ -> working
http://local.com/ -> not working
Please try 5.0.4
Hello
I have local project – mysite.my. Live edit not working.
But it working for http://localhost/test/index.html
——————————————————
Здравствуйте. Можно ли использовать лайв эдит для всего проекта, а не для отдельных файлов html?
Т.е. проект на локальном веб-сервере – mysite.my.
Yes, but currently there is some issues with it. If you have problems with local sites, please, wait 5.0.4 (today will be released). Да. Но сейчас возможны с этим проблемы, так что если вы с ними столкнетесь (вкладка не инспектируется), подождите, пожалуйста, выхода 5.0.4 (сегодня).
Спасибо. Вы лучшие
the menu item “Reload in Browser” is not active, why?
the Chrome extension is installed, the phpstorm settings checked too.
What is the reason?
Help please.
phpstorm не нашел ваш проект среди открытых вкладок в браузере по-умолчанию. Если вы работаете с проектом, такое может случится, как у меня.
Вкладка открывается только при отладке, LiveEdit работает уже с открытыми (то есть инспектирует текущие открытые).
LiveEdit doesn’t open any tabs — you need to open page by hand.
WebStorm 5.0.4 or another version?
Здравствуйте. После обновления 5.0.4 появилась ошибка “Can’t start Mercurial: hg.exe. Probably the path to hg executable is not valid.” В папке, где установлен phpstorm не нашел файл hg.exe.
Подскажите как решить проблему? или надо скачать заново новую версию?
Please see Settings -> Version Control -> Mercurial
You can set path explicitly (Specify executable path) if autodetect fails.
Помогите пожалуйста – как вообще установить плагин для Google Chrome? Где его взять?
http://confluence.jetbrains.com/display/WI/How+to+install+Chrome+extension
Спасибо за быстрый ответ. Все получилось
I’m trying to use the Live Edit functionality. I’m running Tomcat with a exploded war file.
I’m editing a Javascript file, and although whenever I edit I see the message in Chrome saying: JetBrains Chrome Extension is debugging this tab I still don’t see the change reflected.
I tried with launching the browser directly, Javascript debugger, but still nothing…
Does it need any extra configuration to make it work? I’m running Windows 7
Hello, I’m having trouble with the live reload. Does anyone else have my problem?
When editing HTML, I get the text “JetBrains Chrome extension is debugging this tab”
Great,
I can also select elements of the page in phpstorm and that elements are highlighted in Chrome.
Great,
The problem is the live editing is not working??
I am running 5.0.4 and in the live edit settings ( in phpstorm ) both
Enable live editing and Highlight current element in browser are selected.
As a temporary fix I have assigned a keyboard shortcut (ctrl, command S ) to View -> Reload in Browser.
But I hope someone can help me get live reload working properly!
Thanks
Sasky:
I had exactly the same problem. I used couple hours to try everything possible and finally found the problem: Windows firewall!
So everyone having problems: try disabling the Windows firewall completely to see if it’s causing the problem. I don’t suggest you leaving it disabled for a long time though..
I’m on Windows 8 btw.
any idea which port is used?
Please try WebStorm EAP 6 (some related changes were done).
Live Edit work with remote servet?
Yes, should works.
just downloaded trial version 5.0.4 to test it out. Looks great but live edit doesn’t work on mac OS X 10.8.2.
The plugin seems to be installed ok in chrome (I can see message “JetBrains Chrome Extension is debugging this page”) and when I move the cursor in the IDE, it highlights the correct section, however when editing text, the browser is still displaying the old content and nothing changes.
Chrome: Version 23.0.1271.91
OS: OS X 10.8.2 (12C2034)
JetBrains Plugin version: 0.3.11
Hello.
Google Chrome 23.0.1271.95 (Official Build 169798)
OS Mac OS X
JetBrains 5.0.4
Liveedit doesn’t not automatically reload changed until I hit View->Reload in Browser.
It is a bug?
Yes, please file issue about it (check View -> LiveView checked).
I finally got this working in for Drupal+Less (this will probably help Sass folks as well)
I use Less and the less compiler plugin watching to constantly compile changes to the less files (https://github.com/acdvorak/intellij-lessc-plugin). So far so good, I make changes, and the less is automatically turned into my css files. Except the browser page did not refresh on reloading of the css files.
This is because Phpstorm is looking at ‘myfile.css’ to change, except that due to drupal stuffing it’s cachebusting querystrings in there, phpstorm does not recognize it as the same file and therefore needs to change. So it sees myfile.css?87sdfh and doesnt recognize the change.
It would be nice if the Live Edit feature ignored the query string portion of the javascript and css files, but for the time being, if you add the following to your template it’ll shave off those cachebuster strings and Live Edit will be in sync with those changes: http://drupal.org/node/1462572#comment-6096822
Now, a half second after I make a change in my less file I see it in my browser. Nirvana.
Actually, it ignores query part of URI. But it doesn’t work in your case for unknown reasons. I have created issue http://youtrack.jetbrains.com/issue/WEB-2404
I’m testing WS5.0.4 on a Win7 Virtual machine.
I get layout highlighting but no update when I type.
Are there issues on Virtual Machines?
There is no any known issue. Try to use WebStorm 6 EAP.
Yeah, that’s a great step ahead! Thank you very much for this improvement
I have a question about. As somebody else reported before, for me live edit is perfect over *.html, but it’s not working for *.js scripts. I’m loading these resources through tag, no XHR protocol is involved at all. My env is Windows 7 and WebStorm 6 EAP.
Thanks in advance!
Please give an example of a hot-swapped cycle-driven JavaScript code
at the beginning I was so happy to use this program. I downloaded trial version. And at the end this program didn’t satisfy me. I mean they came up with a lot of new staff that makes coding life a lot easier but few issues made me uninstall the program. CSS3 doesn’t support. Experienced some issues with image source file. ( webstorm automatically puts a forward slash in-front of images folder and that’s why none of my images were not showing ), As a beginner it took me a while to figure out the issue. Which I had to fix all manually. I would love to give a try on next version. Hopefully they fix the issues and add more feature. CSS3 definitely.
Such an great feature but no firefox support makes it frustrating. Tried to swap on several occasions from Firefox deving to chrome. But it just doesn’t compare. Firefox support please.
I hope in 6th version this plugin will be also available for firefox!
First of all, I’d like to send you greetings for that so wonderful idea! One of the things we need to “fight with” on development cycle is the time spent waiting to see any little change on a file.
I’ve installed it, and tried it with IDEA, with Java web application, running on a Tomcat server; every time I change some:
a) JSP file it doesn’t work at all
b) HTML file
b.0) opening the file provided by the web service: the browser loads something, but the content of the page doesn’t change at all
b.1) opening the file by the file system: it works as stated.
My question is: do you have any plan to make it work with resources provided by a local web service, running from the IDE?
По поводу всех этих багов в “WebStorm 5.04 Live Edit Not Working”
(( Не будет ли от этого проблем?
Я вычислил как заставить его работать в 5.04 (нужо чтобы вебсторм был загружен с включенными флажками лив эдита – в этом случае оно работало, а если при загрузке они были выключены – то нужно было включить и перезагрузить вебсторнм).
Все это уже пофикшено в WebStorm EAP 6, но он же не позволяет ввести регистрационный ключ и через месяц потребует чтобы я его переставлял
@Sergiy EAP program assumes you upgrade to the fresh EAP build every week or two. Most of the time we publish patches for upgrade, so the procedure is as easy as 2 clicks and takes a couple of minutes.
WS 5.0.4: Local Live-Edit AND working Deployment-Server at the same time?
Scenario 1
a. set up local project (no Deployment Server configured, no locally installed server involved)
b. use any of the browser/preview-related commands from the “View” menu
c. this will open a browser with the source file from the local disk (file://[..])
>> live edit works perfectly, deployment commands (sync/upload/download) are of course unavailable
Scenario 2
a. now configure a (remote) deployment server
b. again use any preview command from the view menu
c. this time a browser shows up with the source file opened remotely.
>> While the deployment commands are available now, live edit does not work anymore (although the browser shows “JetBrains Chrome Extension is debugging this tab” and flickers/refreshes if I change the source file in WebStorm). Configuring automatic upload on file-save is not an option (live edit would then always be one step behind anyway)
Question: can I set up WebStorm’s preview commands to open files locally (file://) with working live edit, while at the same time having a deployment server configured to be able to upload/download/sync files to the remote server?
I only came up with a workaround by adding Chrome as an External Tool passing “$FilePath$” (the current local file through file://) as a parameter but would prefer the different built-in preview commands.
Thank you in advance.
Pingback: Live reload website design with phpStorm | OpenGround
Love the feature. Is there any existing way to slow down the refresh rate of the browser? Working on dual monitors it’s distracting to continually have the web browser refreshing on one side as I’m editing code on the other. If the plugin would wait a few seconds after the last keypress before refresh that would be outstanding.
Besides that small issue this is a wonderful tool/extension. Thanks for making it happen!
What file do you edit? PHP?
The Chrome extension doesn’t work i’ve got an error
GET http://127.0.0.1:63342/browserConnection/buildInfo 400 (Bad Request)
I’m on windows 8 the extension version is : 0.5.3 and the Chrome version : 24.0.1312.57 m
Any idea ????
Colud you specify IDE (WebStorm, Idea) and version?
Webstorm 5.0
Webstorm 5.0 is not supported (please use bundled extension, see http://confluence.jetbrains.com/display/WI/How+to+install+Chrome+extension)
Please try WebStorm 6 EAP — http://confluence.jetbrains.com/display/WI/WebStorm+6+EAP.
Wow it’s not support ! I’ve got the extension from the Chrome Store coz i don’t find the extension in my install folder !
Yes, is not supported, because it is developer for WebStorm 6+.
5.0.4 contains /plugins/JavaScriptDebugger/extensions/jb.crx If you don’t want try WebStorm 6 EAP, just install old extension.