Debugging javascript functions

Question

Is there a way in Firebug (or any other debugger) to see the functions that are being called as a page loads?

Edit: Breakpoint is really not what I'm looking for- I'd like to see the functions being called with the arguments that are being passed as I work on the page - something similar to the console - where I can see Http AJAX Post messages - with post values and the response.

Edit2: It looks like Profiler is something that I was looking for - but is there a way of looking at the parameters passed to the function and the return value?

Answer 1

I think you need to make this more specific if you want to get more specific answers than "just use a breakpoint". Do you know what "code profiling" is? Is that what you want to do? You can google for "firebug profiler", and there is also some information right here on SO, e.g. http://stackoverflow.com/questions/267618/understanding-firebug-profiler-output

Answer 2

You can always just print it out yourself. ( I know this may not be the answer you wanted.)

But what you can do is add a

<div id="debug"></div>

in your document.

Then add:

function log(str) {
  $('#debug').append(str); // I'm using jQuery here
}

and then you can add the logs in your javascript, e.g.:

function myFunc(foo, bar, baz) {
  log("myFunc called with ("+foo+", "+bar+", "+baz+")<br/>");

  // your stuff
}

Tedious, but effective (IMO).

Answer 3

Firebug's console.log statement will dump stuff to the console for you, you just need to add console.log statements. For post requests and responses, use the net panel. Personally, I think adding a debug function and div to your page is overkill.