Reload updated java<script> code without fully reloading the html page

Question

I am developing a single page web application, that has many different features and forms. When developing a deep (I mean something that is not on the home page) feature, I go through this cycle:

develop the code, editing classes and functions
refresh the whole page
clicking all the way till I get to the part that I need to test (that adds up to about a minute sometimes)
testing the new code
back to the (1) code editor doing updates

doing about 15 minor edits, can take a frustrating 30 minutes of repeated reloading and clicking

Is there any plugin, piece of javascript, or method, that allows to reload the updated javascript without reloading everything, so one can skip the 2. and 3. from the cycle above and continue doing live tests?

If there's no such thing, I am planning on developing a little javascript plugin that will reload the scripts, and probably with socket.io connection to a backend node.js server that will watch the files for any updates and push the load events to the browser.

So, I am interested in any idea about this, any thing that I should take into consideration when writing the plugin.

Thanks : )

Why don't you simply automate getting to the part you want to test? — Sacho
– Sacho, Commented Oct 22, 2013 at 10:20
Editing javascript on the fly with chrome's console might help you to test faster — mguimard
– mguimard, Commented Oct 22, 2013 at 10:21
@Sacho, there are many parts, writing code to automate getting to each of them separately seems like a burden to me, I believe doing it via script loading is simpler. — aularon
– aularon, Commented Oct 22, 2013 at 10:23
@mguimard I do this with firebug for minor changes that involves one call, but sometimes you'll have to edit one or more inter-called functions, then updating the calls in firebug, testing and putting the new calls back into the files is tiring, esp. if developing code with coffeescript — aularon
– aularon, Commented Oct 22, 2013 at 10:26
“clicking all the way till I get to the part that I need to test (that adds up to about a minute sometimes)” – so that means if the regular user wanted to get to a certain “part” of this site, they would have to do the same thing, because you offer them no possibility to use some kind of “bookmarks” or link to a specific part from the outside? Well that’s a broken concept right there. — C3roe
– C3roe, Commented Oct 22, 2013 at 10:29

subZero · Accepted Answer · 2013-10-22 10:19:13Z

2

You could do something like this.

function LoadMyJs(scriptName) {
   var docHeadObj = document.getElementsByTagName("head")[0];
   var dynamicScript = document.createElement("script");
   dynamicScript.type = "text/javascript";
   dynamicScript.src = scriptName;
   docHeadObj.appendChild(newScript);
}

Call the LoadMyJs function on page load

<body onLoad="LoadMyJs()">

Then reload with the click of a button (or from your console)

<input type="button" name="reloadjs" value="Reload JavaScript" onclick="LoadMyJs('my_live_loading_script.js')">

This could be simplified using e.g jQuery

Thanks to: http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/

answered Oct 22, 2013 at 10:19

subZero

5,1867 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aularon Over a year ago

I have something very similar so far, that loops all <script> tags from localhost and reloading them, I am checking to ensure I am doing it the rightway, I am also interested in updating calls for instantiated objects, based on the new classes' .prototypes

JALO - JusAnotherLivngOrganism Over a year ago

Just like the source from which it is taken, you fail to define 'newScript' !!

aularon · Accepted Answer · 2013-10-27 12:44:21Z

1

Here's what I came up with: a Node.js module that watches for changes in .js & .coffee scripts, and pushes the changes to the browser upon editing the files.

It works standalone, even if you are developing on filesystem file:/// without using a web server.
It works with any framework, just launch the standalone script and point it to your js/ directory.
It has an express.js helper, that make it run using the same server instance.

It is as easy as

adding a single line of <script> tag to your existing code, and
running the live script, pointing it to the html root.

code: 🐱/etabits/live.js

answered Oct 27, 2013 at 12:44

aularon

11.1k4 gold badges38 silver badges41 bronze badges

Comments

Asenar · Accepted Answer · 2013-10-22 11:00:43Z

That's may be not the best answer but for local developments I use that firefox plugins:

https://addons.mozilla.org/en-US/firefox/addon/auto-reload/

This reload the css, js or anything present in a directory

For dev which really needs to be remotely , I use that small js code you can adapt for reloading js.

function refreshCss(rule){

    if (rule == null)
         rule = /.*/;

    var links = document.getElementsByTagName("link");
    for(var i=0;i<links.length;i++)
    {

        if (!links[i].href.match(rule))
            continue;

        if (! links[i].href.match(/(.*)time=/)){
            if (links[i].href.match(/\?/))
                var glue = '&';
            else
                var glue = '?';
            links[i].href += glue+"time="+new Date().getTime();
        }
        else{
            links[i].href.replace(/time=\d+/, "time"+new Date().getTime());
        }
    }
    if (!no_refresh)
    {
        setTimeout(function(){refreshCss(rule)}, 5000);
    }

};

// and then call it  refreshCss("regex to match your css, or not"); var no_refresh=false;

Edit: this is a version with "setTimeout", but you can easily made a "keypress" version of it

Arnab Nath · Accepted Answer · 2019-01-22 12:19:58Z

0

Replace with dynamic script.

function LoadMyJs(scriptName) 
{
   var docHeadObj = document.getElementsByTagName("head")[0];
   var dynamicScript = document.createElement("script");
   dynamicScript.type = "text/javascript";
   dynamicScript.src = scriptName;
   docHeadObj.appendChild(dynamicScript);
}

answered Jan 22, 2019 at 12:19

Arnab Nath

11 bronze badge

Collectives™ on Stack Overflow

Reload updated java<script> code without fully reloading the html page

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related