How can I enable event watchers on a specific JavaScript file on Chrome Developer Tools?

Question

I have the need to know which JavaScript function is being called inside a file when I press a button. My problem is that I have a very big JavaScript file and I don't have any documentation about it. I was wondering if there was any way I could enable event watchers for that specific file only, on chrome developer tools so that when I click a button it will tell me what function is being called on that gigantic file.

So far I've been able to use the Global Listeners tab to watch for Mouse click events, but this will take me to jquery-(version).js and that doesn't really lead me to anywhere.

I guess this would be similar to putting breakpoints on every single line of that file, but I can't really do that because of the size of the file.

Answer 1

Based on the nature of your question, I'm assuming that the giant Javascript file in question is minified or otherwise obfuscated, making semantic searching difficult (i.e. ctrl+f searching for keywords like "onClick" in the file).

I not sure there's any particularly clean way to do this. I think your best bet is to use the Chrome debugger's Event Listener Breakpoints to step through all the click listeners until you find one that calls into your file.

• Open the Event Listener Breakpoint tab in the Chrome debugger, open the Mouse section and you check click. This attaches breakpoints to all the js click event listeners in your DOM (so it could be useful to do this in an incognito window, or disable any extensions that have click listeners).
• When the breakpoints fire, click the "resume" button until a breakpoint fires inside the file you're investigating.
• If your file never comes up, then you've probably got a bit of a slog ahead of you. Trigger another click, only now, start stepping into the callbacks and see if any of them eventually lead into your file.
  • Don't go too deep into a given callback if it doesn't look promising. You can come back to it if need be. Do a few relatively shallow passes (i.e. only step a few functions deep into each callback) to eliminate unlikely leads.
  • Leave any library callbacks (JQuery, Kefir, etc.) as the last thing to investigate as these are often the deepest and are often just internal logic at work.
• If you still don't find anything after stepping into the click callbacks, you might try putting breakpoints on the mousedown or mouseup