LiveEdit plugin features in detail

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

This blog is permanently closed.

For up-to-date information please follow to corresponding WebStorm blog or PhpStorm blog.

 
This entry was posted in Cool Feature, PhpStorm, WebStorm. Bookmark the permalink.

96 Responses to LiveEdit plugin features in detail

  1. SylvainPV says:

    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 !

  2. dmitrij says:

    Does it use source maps?
    Thanks in advance.

    • Vladimir Krivosheev says:

      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.

  3. cordoval says:

    can this work for a complex php symfony2 app?

    • Vladimir Krivosheev says:

      Should work. If not or you want something special — feel free to file issue about desired feature.

  4. Pingback: Apple’s Victory, SkyDrive for Andorid, Office Web Apps, and Much More | Zfort Group Blog

  5. Petr Jirasek says:

    It looks really good.

  6. 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 .

      • Vladimir Krivosheev says:

        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)

        • Ryan Aslett says:

          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?

          • Ryan Aslett says:

            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).

      • Eugene says:

        > 2. adding netty to the lib
        Could you please tell how to accomplish that step?

  7. Frank says:

    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?

    • Vladimir Krivosheev says:

      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

  8. Elv says:

    Awesome!
    Waiting for firefox :(

  9. cordoval says:

    it does not work for symfony2 apps using twig etc

  10. Pavel Kostenko says:

    I’ve watched videos and it looks amazing :)
    You guys, at Jetbrains, are creating the best PHP IDE ever.
    Coding is a pleasure to me now :) Thank you!
    Still downloading new version, and waiting…

  11. Pingback: Live Edit в PhpStorm / PHP::Portal

  12. Mischosch says:

    should it work with Chromium (Mac)?

    No plugin seems to be installed.
    Can I manually trigger the installation of the plugin?

  13. Alex says:

    1) Does Live Edit supports LESS files runtime compilation?
    2) What about coffee script?

    Thanks.

    • Vladimir Krivosheev says:

      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).

      • Adrian Fedoreanu says:

        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!

        • Vladimir Krivosheev says:

          Can you file issue about it with attached test files? http://youtrack.jetbrains.com/issues/WEB#newissue=yes

          • Adrian Fedoreanu says:

            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? :D

          • Adrian Fedoreanu says:

            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.

  14. Tony says:

    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.

  15. Pingback: WebStorm 5 – IDE for HTML5 / CSS3 / JavaScript development | techscouting through the java news

  16. Jim says:

    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.

  17. Dmitry says:

    Awesome plugin!!
    Looks like it is not working for html files inside iframes (specific of our project :( )
    Could you please take a look?

  18. dmitrij says:

    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.

  19. Michiel says:

    Is there a way to easily disable and enable (short key)? Also can it be disabled for php files?

  20. Jonathan Perl says:

    How can we use this if we are using requirejs?

  21. Enrique says:

    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.

    • Vladimir Krivosheev says:

      If LiveEdit enabled, so, any change php file will cause page reload in browser. What file do you edit?

      • Enrique says:

        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.

  22. aug says:

    Plz i want to know if the LiveEdit plugin is workable on Windows Operating system

  23. 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

  24. Frank says:

    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.

  25. hiro says:

    http://local/ -> working
    http://local.com/ -> not working

  26. GodNob says:

    Hello

    I have local project – mysite.my. Live edit not working.
    But it working for http://localhost/test/index.html
    ——————————————————

    Здравствуйте. Можно ли использовать лайв эдит для всего проекта, а не для отдельных файлов html?
    Т.е. проект на локальном веб-сервере – mysite.my.

    • Vladimir Krivosheev says:

      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 (сегодня).

  27. Денис says:

    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.

    • GodNob says:

      phpstorm не нашел ваш проект среди открытых вкладок в браузере по-умолчанию. Если вы работаете с проектом, такое может случится, как у меня.

      • Vladimir Krivosheev says:

        Вкладка открывается только при отладке, LiveEdit работает уже с открытыми (то есть инспектирует текущие открытые).

        LiveEdit doesn’t open any tabs — you need to open page by hand.

    • Vladimir Krivosheev says:

      WebStorm 5.0.4 or another version?

  28. GodNob says:

    Здравствуйте. После обновления 5.0.4 появилась ошибка “Can’t start Mercurial: hg.exe. Probably the path to hg executable is not valid.” В папке, где установлен phpstorm не нашел файл hg.exe.

    Подскажите как решить проблему? или надо скачать заново новую версию?

    • Vladimir Krivosheev says:

      Please see Settings -> Version Control -> Mercurial
      You can set path explicitly (Specify executable path) if autodetect fails.

  29. Валерий says:

    Помогите пожалуйста – как вообще установить плагин для Google Chrome? Где его взять?

  30. Rafael Franco says:

    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

  31. Sasky says:

    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

  32. nakanaa says:

    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.

  33. mikesilence says:

    Live Edit work with remote servet?

  34. mel says:

    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

  35. 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?

  36. Ryan Aslett says:

    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.

  37. Dave Stewart says:

    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?

  38. 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!

  39. Steven Pribilinskiy says:

    Please give an example of a hot-swapped cycle-driven JavaScript code

  40. Alex says:

    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.

  41. Pete says:

    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.

  42. I hope in 6th version this plugin will be also available for firefox! :)

  43. Marcus Pereira says:

    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?

  44. Sergiy Shychynov says:

    По поводу всех этих багов в “WebStorm 5.04 Live Edit Not Working”
    Я вычислил как заставить его работать в 5.04 (нужо чтобы вебсторм был загружен с включенными флажками лив эдита – в этом случае оно работало, а если при загрузке они были выключены – то нужно было включить и перезагрузить вебсторнм).
    Все это уже пофикшено в WebStorm EAP 6, но он же не позволяет ввести регистрационный ключ и через месяц потребует чтобы я его переставлял :-((( Не будет ли от этого проблем?

    • ksafonov says:

      @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.

  45. Peter says:

    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.

  46. Pingback: Live reload website design with phpStorm | OpenGround

  47. Dave Carner says:

    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!

  48. Thomas Pons says:

    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 ????

Comments are closed.