Calling custom functions from firebug console

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?

Solution 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.

Solution 2

Your showAbout() probably isn't in the global scope.

It may be wrapped by a $(document).ready() code, and its scope limited to that function.

For testing, you could add beneath...

window.showAbout = showAbout;

You can then call showAbout() from your console, once the function has been defined.

Comments

[Ricalsin]

why is wrapping the function in parenthesis followed by another set of parenthesis mandatory to make this work? ( function(){ ... } )() ;

[T.J. Crowder]

@Ricalsin: The parentheses, per se, aren't required, but something is, because we need to help the parser understand that it's dealing with a function expression rather than a function declaration, because you can invoke a function expression immediately by putting () at the end, but you can't invoke a function declaration that way. More in this other question and my answer to it. :-)