Tips & Tricks

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

image description