I have followed the instructions for debugging with javascript in webstorm:
- The native "Live Edit" plugin is enabled
- Live update "Javascript, HTML and CSS" in the "Live Edit" settings.
- Restart if hot swap fails
Then, I debug the current html file by clicking Debug in the right-click context menu.
This works for refreshing HTML and CSS content without reloading, but changes in Javascript are not reflected 😱.
How can I live edit Javascript in Webstorm? Other answers here on SO are all about the deprecated chrome extension.
JavaScript ‘live editing’ is supported, but the behavior is different for external and embedded code. Changes in embedded JavaScript always cause immediate page reloading, so the page updating is instant; whereas changes in ‘external’ javascript (linked via
<script src="path/to/file.js") are hotswapped: new code is loaded to the browser instantly, but the results of the change will be visible only when you do something to trigger this new code. For example if you change theonClickhandler and write new text inalert(), you will see the new text after the click without reloading the page. Same for functions triggered by timer, for example. But if the JavaScript code is executed only on page load (and not on certain event), you have to manually reload the page to see the results – Live Edit doesn’t force new code execution, it changes the code and not application state.