How to view JavaScript function calls as they occur

Question

Is it possible to view JavaScript function calls in the browser's JavaScript console? I know you can view XHR, but can you view function calls?

For example, I hover my mouse over some element on a page and a div pops up. I know there was a JavaScript function that was called to show the popup so it would be nice to be able to view this call in the console so I can see what function was called.

Am I missing something or is this not possible?

Aldus

Try also javascriptweblog.wordpress.com/2010/06/01/… - it can do a function call trace – Leaflet

Answer 1

So basically you want to view JS calls in real-time?

The Firebug extension on Firefox offers that (http://getfirebug.com/javascript).

Basically, what you want to do is find your function within your code, then set a breakpoint on it. You should then be able to step through execution on it, just like a normal debugger. It shouldn't be hard to find the JS function associated with a and a particular event (e.g. mouseover) on that - is this page in question using straight JS or a framework? And if so, which one?

Google Chrome's built-in developer tools offer a smaller subset - depending on what you want, the Profile tab on it might be useful?

What exactly do you need to trace this JS function for? We might be able to recommend a better tool for you based on your particular need.

Thumbscrew

The debugger is a good choice if I know what function I'm looking for. But sometimes it's not as easy as looking for a onhover attribute. For example, you can attach a function to all elements with a specific class using JQuery. There is nothing specific I am looking for. I just like to view the source of pages like facebook and try to figure out what's going on. Viewing which function was called would be really helpful. – Aldus

It doesn't matter if it's your site. Download Firebug and goto the script tab - it allows you to 'pause' execution, and then step through it. It can be become very detailed very quickly. Just be warned though that most live code is usually minified/obfuscated so it might be: v()->r();a=2;t++["$gg"]..... etc – Roguish

@Roguish Yes I know I can use the debugger on another site, but I don't know what I'm looking for because I don't know what function was called, so setting a break point won't help. And as you mention, a lot of javascript is minified so it's all on one line anyway. – Aldus

Yep exactly. But you don't need to set a break point, just click the pause button, and perform the action that you want to watch – Roguish

@Roguish Thank you! The pause button works perfectly in Firebug. In Chrome I can't seem to get it to work properly and my extensions (like adblock) get in the way :/ – Aldus

If a function is being called from 5 different places can we distinguish that a particular call was made from 2nd place or the 5th place? – Waylon

Answer 2

Check into the Firebug Profiler you can use it to see a break down of what's going on without having to manually add in console.log statements.

To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were called and how much time each one took.

http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii

Understanding Firebug profiler output

Guib

Answer 3

Not unless you explicitly attach that information to the DOM.

You can, however, set breakpoints in the developers tools for some browsers, such as Safari, Chrome and Firebug for Firefox.

Sough

+1 for mentioning debuggers. So much better than traditional web trace debugging. – Gee