how to reload only scripts through firebug

I’m doing lot of ajax stuff lately. Scenario that I repeat over and over is:

  1. load page
  2. change some scripts for that page
  3. reload page with ctrl+f5 and see if it works

What I want to do, is tell firebug to reload only the scripts not the whole page because the markup is the same. Anyway to do this?

  • Debugging Javascript code
  • How to find which script modifies css of selected attribute
  • Debugging in mobile browsers?
  • Can I get the Internet Explorer debugger to break into long-running JavaScript code?
  • IE9 debugger - On the “Script” tab, what are the scripts in the “Others” section when you are debugging?
  • how can I force IE9 to “see” the most current javascript when using the debugger?
  • getting *current* stack trace in node.js (via SIGINT, for example)
  • Debug JavaScript in ASP.NET
  • Chrome console to file
  • Is there a way to see what's manipulating a HTML Node?
  • Check Cookies using Chrome
  • Javascript and MVC4 partial views loaded with AJAX
  • 4 Solutions collect form web for “how to reload only scripts through firebug”

    First, try and minimize this kind of testing. Write atomic, DRY code, and unit test before folding it into the site/page.   You can do some of this quickly in Firebug’s console.

    Next, if the JS that you are reloading sets intervals or event listeners, then you will want to clear those intervals and unbind those listeners before reloading the JS under test. That means that anonymous intervals and event handlers are verboten.

    Create a JS file that calls clearInterval(), removeEventListener(), and .unbind() as necessary.

    Then you can run code like this in Firebug’s console:

    function addJS_Node (text, s_URL)
    {
        var scriptNode                      = document.createElement ('script');
        scriptNode.type                     = "text/javascript";
    
        if (text)  scriptNode.textContent   = text;
        if (s_URL) scriptNode.src           = s_URL;
    
        document.head.appendChild (scriptNode);
    }
    
    addJS_Node (null, 'Path_to_JS/ResetTimersAndEvents.js');
    
    addJS_Node (null, 'Path_to_JS/JS_Under_Test.js');
    // etc.
    

    I think XRefresh may help. It monitors your local folders for changes and reloads them when they change (after you save) without reloading the entire page.

    Per their site faq:

    XRefresh is also able to replace externally linked JS file with
    updated version without reloading whole page.

    There are limitations with this though (and I don’t see any way of getting around them) which you can read more about on their faq page.

    I still think its better than having no option at all.

    Hope this helps.

    I think what you really need is automated testing. Write your tests and then just rerun them after making a code change.

    The best method for doing this on firefox is webdriver.

    Firefox currently has no way of doing this.

    If the markup is the same then what’s wrong with ctrl+f5? I’m guessing you don’t want to loose the data in the form fields? This again causes problems as what happens if you just reload the scripts and those scripts have events that fire when form fields are changed, these events will never firing and could result in the page ending up in a state it shouldn’t be in.

    There are some browser plugins that allow you to automatically fill in form fields at the click of a button with pre defined values, this may be a good alternative to reloading just the scripts. It looks like this firefox plugin will do just that https://addons.mozilla.org/en-US/firefox/addon/autofill-forms/