LiveEdit Plugin not working with JS and HTML?


I've tried to find a solution to this issue for quite some time now, but I can't find a post, with exactly my problem. 

I've recently started using PhpStorm, and I'm quite fond of it already. I used to use the "Preview" feature in Coda 2 quite a lot, and therefor I want to get the LiveEdit plugin to work. 

My issue is: 

Whenever I make changes in HTML or JS the browser does not reflect the changes, however, CSS is working. 

I've made sure: 

  • Google Chrome Plugin IS installed
  • Debugged session (JS) is running (And it DOES confirm it is connected to the plugin)
  • I've set the setting for Build > Execution > Live Edit: Update Node.js (150 ms), Update application Chrome (on changes 150ms), Restart if hot swap fails. 

I'm not sure what to try next, and I really hope someone here might be able to help me out! 



MacOS: 10.14

PhpStorm build: 

  PhpStorm 2018.2.5
  Build #PS-182.4892.16, built on October 11, 2018
  Licensed to PhpStorm Evaluator
  Expiration date: November 11, 2018
  JRE: 1.8.0_152-release-1248-b8 x86_64
  JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o


Comment actions Permalink

Did you tick Update on changes checkbox? It's needed to apply changes in external CSS/Javascript.

But note that not each and every change in javascript code results in immediate page update: 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 the onClick handler and write new text in alert(), you will see the new text after the click without reloading the page. Same for functions triggered by timer, for example. But if the JS 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

But HTML changes should be applied immediately... If it doesn't work, this likely means that Live Edit can't match the tags in source files with the DOM structure in browser; such issues usually occur if the page is created/changed dynamically. LiveEdit searches element by selector/path, and, if DOM structure in source file doesn't match the one in runtime, Live Edit fails. Try enabling Highlight current element in browser on caret change option and then put cursor on the tag in the editor - is the corresponding element highlighted in browser? If not, this likely means that structure can't be matched...

Comment actions Permalink

Not working, there is a problem with external js files, I added alert() as new code, the change is not seen.

please fix it.

Comment actions Permalink

Where did you add it? As I wrote above, only changes made to code executed on events are seen without page refreshing

Comment actions Permalink

True, I added anywhere in the external .js file, the point here is: can't you make it work the same as Visual Studio Code? there it doesn't matter where you write your js code, it reloads immediately even if it is an external file. That would be very helpful.


thank you

Comment actions Permalink

We aren't going to change this, sorry


Please sign in to leave a comment.