Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Note
iconfalse

This tutorial describes configuration and workflow with Live Edit feature in WebStorm.

Table of Contents

What is Live Edit?

Live Edit gives you an opportunity to see all the changes you make in your HTML and CSS files instantly in a browser without refreshing the page. Just install the extension for Google Chrome and, as you edit HTML, CSS or JavaScript in WebStorm, Live Edit will push your changes to the browser without reloading the page and highlight the elements you are working on. Completion lookup is also live.

Youtube
height360
width640
videof__tQKkWodw

Watch on YouTube

Live Edit also supports SASS, LESS, CoffeeScript, TypeScript, etc. (a configured file watcher is needed). CSS and JavaScript (including any other language that can be transpiled to CSS or JavaScript) will be hot-swapped without a page refresh. Hot-swapped JavaScript will be effective only if it used in cycle or event-driven.

...

From now on, any changes you perform will be instantly shown in Google Chrome browser without a page reload. For example, you can edit text, manipulate colors to find one that suits you best, etc. Any CSS/JavaScript used by the file you are debugging will be instantly updated as well.

Youtube
height360
width640
videow0Db0TTZJa8

Troubleshooting

First of all, check that all actions listed under Installing Google Chrome extension and Starting JavaScript debug session sections of this tutorial have been performed.

...