Question

I created a document that loads a .js document that has some JQuery functions that I have created. I would like to use the firebug console to quickly test the functionality of these functions on my html document. But when I try and call these function in the console I don’t get any response.

for example:

• I have index.html that call my JS:

  <script src="jquery.js" type"text/javascript"></script>
  <script src="myfunctions.js" type="text/javascript"></script>
  

• Myfuntions.js has the following defined in it:

  function showAbout(){
    $('div#about').show("slow");
    $('.navbar #about-button').attr('disabled', true); 
  }
  

The Problem:

When i try to call showAbout or showAbout() from the console on index.html I don’t get any changes. However, when I call $('div#about').show("slow"); or $('div#about').show("slow"); from the console directly I get the expected behavior.
What is the proper way to call a user defined function from the console?

Answer 1

If showAbout is defined at the global scope, you should be able to write showAbout(); in the console and see the result. If not, then you’re probably putting your functions in a scoping function like so:

(function() {
    function showAbout() {
    }
})();

If so, good for you, you’ve avoided created global variables/functions. But it does mean you can’t access those functions from the console, because the console only has access to global scope.

If you want to export any of those so you can use them from the console (perhaps only temporarily, for debugging), you can do that like this:

(function() {
    window.showAbout = showAbout;
    function showAbout() {
    }
})();

That explicitly puts a showAbout property on the global object (window) referencing your function. Then showAbout(); in the console will work.