How to get a list of JavaScript files that are executed when event is fired?

Question

In complicated system, how can I get a list of all the JavaScript files that has been fired during button click or click to input field?

Can I do it with chrome dev-tools or are there any other solutions? If I can do it with chrome dev-tools then how?

Problem that I am facing : I am trying to find file what contains method which I can intercept to add my custom validation before button click redirects to another page? File names are useful to me because the system is following clean code rules.

UPDATE: I found this tutorial , but none of provided solution seems to work (I am certain that breakpoints are not working). The Visual Event extension suggested by @Carles Alcove in referred post, lead me to knockout.js file. In that file I added console.trace() function (second image is the result) as suggested by @guest271314. First image is when I inspected the button with dev-tools as suggested by @user3297291

Answer 1

您可以在click事件处理程序中包含console.trace() 、 console.profile()和console.profileEnd() ，在DevTools console和Profiles选项卡中DevTools文件的行号

Answer 2

You can check an overview of event listeners attached to an element in the developer tools by doing:

• Right mouse button on an element
• Inspect element in context menu
• Click Event Listeners tab in the right panel of the dev. tools
• Check for mouseup or click events.

You'll see the attached methods and their file names. I'm not sure if this works for every kind of event listener (eg if the event is bound to a parent element), but it's a quick way to predict what might be called.