Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to view JavaScript function calls as they occur

Tags:

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?

like image 959
styfle Avatar asked Apr 15 '11 02:04

styfle


People also ask

How do you know when a function is called?

In Chrome, you can use: console. trace(); Just add that line in your function, I usually place it as the first line. If you view the console you'll see the name of your function, and below that line you'll see where it's being called from.

What happens when a function is called in JavaScript?

The code inside the function will execute when "something" invokes (calls) the function: When an event occurs (when a user clicks a button) When it is invoked (called) from JavaScript code. Automatically (self invoked)

How do I find out what functions are called when a button is pressed in chrome console?

With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut() function is defined (in your case it's demo.


1 Answers

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.

like image 56
victorhooi Avatar answered Nov 04 '22 00:11

victorhooi