How can I generate a list of all the JavaScript files that are triggered when a button is clicked or an input field is selected in a complex system?
Is it possible to achieve this with Chrome DevTools, or are there alternative solutions available? If Chrome DevTools can be used for this purpose, then how exactly can I do it?
The Challenge: I am struggling to locate the file containing the function that I need to intercept in order to add my custom validation before a button click redirects to another page. Knowing the names of the files would greatly benefit me as the system adheres to clean code principles.
UPDATE:
I came across this helpful tutorial, but unfortunately, none of the suggested solutions seem to be effective (breakpoints are not functioning properly). Following the advice of @Carles Alcove in the mentioned post, I installed the Visual Event
extension which led me to the knockout.js
file. In that file, I inserted the console.trace()
function as recommended by @guest271314. The first image shows my inspection of the button using dev-tools as advised by @user3297291, while the second image displays the result after integrating the function.
https://i.sstatic.net/JKqiS.png https://i.sstatic.net/5MZPO.png