Please provide: "Live Edit - Javascript" Example

Hi everyone,

i'm currently evaluating WebStorm/PHPStorm and am very satisfied so far with all the features.

One thing that i would like to get working but don't seem to be able to is Live Editing for Javascript

As a test, i created a small HTML File containing nothing much but some DIV with text. A CSS
File that is generated via a watcher from a LESS file.

And i reference a javascript file via a common SCRIPT tag.

Now here is my issue, for the life of me i can't seem to get live editing of that javascript to work.

I've read somewhere that JS files are being hot swapped and they should be "event driven" or cyclic
to make sure that live editing works with them.

Can anyone provide me with an example what that exactly means ?

This pretty much is the only thing preventing me currently from going all out and purchasing PHPStorm.

Comment actions Permalink


> I've read somewhere that JS files are being hot swapped and they should be "event driven" or cyclic
> to make sure that live editing works with them.

JavaScript live edit replaces your JS code in browser with new one when you change it. But if the code has already been executed (e.g. on page load), it will not be executed again. Opposite, if your function is triggered by timer or e.g. as part of click handler, on the next invocation (e.g. click) you'll have new code running.

My colleague will get back to you to help you troubleshoort why it is not working. Meanwhile you could try the very simple example of a webpage with one button that alerts() on click, and try to change the message text via live edit...


Comment actions Permalink

Ok, i already suspected that it would be like that.

Is there a javascript event that the chrome plugin triggers once
new files have been loaded that i could hook into to listen for changes?
That would be useful.

Comment actions Permalink

So i've been trying a couple things, and either i'm understanding this completely wrong or ... well.. i dunno.

So for completeness sake, here's what i'm trying to achieve.

I have a very rudimentary html file:

<!DOCTYPE html>
    <script type="text/javascript" src="js/main.js" ></script>
    <div>Hello World</div>

And as you can see, a javascript file attached - main.js , which doesn't do much but set an interval,
which overwrites the content of my DIV every second:

var testString = 'Hello Javascript';

    var myDiv = document.getElementsByTagName('div')[0];
    myDiv.innerHTML = testString;
}, 1000);

What i expect to happen, is that when i edit the content of the testString variable, ideally it would
show me the new content of the variable in the DIV .. or that the entire file would be reloaded and start over
and still show me the new content in my DIV.

Neither of this is actually the case, the Interval continues running but with the same content of the variable before
i edited it.

So, what is it now? :) Do i understand this completely wrong? Did i stumble over a bug?

Cheers and thanks for all the help :)
Comment actions Permalink

bump, since i really would like to know if i'm asking for the moon or if this is supposed to work.

Comment actions Permalink

Just use literal instead of file-level variable ("someText" instead of testString). I don't know why, please watch

Comment actions Permalink

I solved a similar issue by deleting the deployment.

File > Settings > Deployment > Hit the Minus and Apply


Please sign in to leave a comment.