How To Know Which Javascript Function Is Called In Chrome

While working with JavaScript in a web application, it is often useful to know which function is being called
when an event occurs. This can help you debug your code and understand how your application is working.
Fortunately, Google Chrome provides developer tools that can help you track down which functions are being
executed.

In this blog post, we’ll show you how to find out which JavaScript function is called in Chrome using its
built-in developer tools.

Using Chrome Developer Tools

The first step to finding out which JavaScript function is being called is to open Chrome’s developer tools.
You can do this by right-clicking on the page and selecting Inspect or by pressing Ctrl
+ Shift + I (or Cmd + Option + I on Mac).

Once the developer tools are open, navigate to the Sources tab. This will show you the source
code of the web page you are currently on.

Setting Breakpoints

To find out which function is being called when an event occurs, you need to set breakpoints on the event
listeners. Setting a breakpoint will pause the execution of the code at that point, allowing you to see which
function is being called.

In the Sources tab, you will see a list of files on the left side. Click on the JavaScript
file you want to investigate. Once the file is open, you can set a breakpoint by clicking on the line number
where the event listener is located.

For example, let’s say you have the following code in your JavaScript file:

document.getElementById('myButton').addEventListener('click', myFunction);

function myFunction() {
    console.log('Button clicked');
}


        To set a breakpoint on the event listener, click on the line number next to the addEventListener method (in this case, line 1).
    
Viewing the Called Function

        With the breakpoint set, trigger the event in your web page (e.g., click the button). The code execution will pause at the breakpoint, and the developer tools will switch to the Debugger view. You will see a call stack on the right side of the screen, which shows the sequence of function calls that led to the breakpoint.
    


        In our example, you would see myFunction in the call stack. This tells you that the myFunction function is being called when the button is clicked.
    

        You can also hover over variables and function names to see their values and definitions. This can be helpful for understanding the context in which a function is being called.
    
Conclusion

        Chrome’s developer tools provide an easy way to find out which JavaScript function is being called when an event occurs. By setting breakpoints on event listeners and examining the call stack, you can effectively debug and understand your web application’s behavior.