How to identify which javascript is being executed

Question

I am trying to figure out which script is being called and executed within my Wordpress website.

I have website with a number of scripts that are included by the core, the theme and the numerous plugins i have installed.

This is not just for one site but on all sites I manage - I usually install w3 total cache to minify the scripts which works great BUT there are always 1-2 elements on site that stop working if their scripts are minified.

I can turn off minify to make it work again and I can exclude scripts from minification BUT I have no idea which script is listening to the functions that are failing. Removing scripts one by one is really time consuming and with the added "caching" of total cache, I can never properly identify the actual script accurately?

Is there anyway I can monitor a click on an element on page that can alert me to which javascript code is being executed from which file?

Answer 1

I realised through other discussions that in Chrome Element Inspector - I can put a "Break" on elements for Subtree modifications, Attributes modifications and Node Removal.

I did this for the that was calling js and then I stepped through the break to find the js code i was looking for.

Answer 2

You can add a console.log() to each of your theme and custom scripts. This will print a string in the browser developer console. Start with the bare minimum and work your way up.

It is advisable you only use the console.log() on development platforms.

Example:

console.log('this is from script001');