Question

Assume I have jQuery with several plugins loaded.

I run some code like this:

$('someSelector').someMethod('someParam', 'someOtherParam');
$('someOtherSelector').someOtherMethod('anotherParam');
$('anotherSelector').anotherMethodWhichMayOrMayNotBeAPlugin();

I’d like to write a hook to jQuery in order to record a structure in which I will hold:

• What selector was used
• Which method was called
• What arguments did it get

I know I can override both $() to catch selectors and I can add methods to jQuery (by writing plugins), but I’m not entirely sure how to get method’s name and parameters while avoiding breaking the existing functionality of jQuery and its plugins.

Performance is not very important for this one, so any dynamic way to do it is also fine.

Answer 1

You could iterate over all the functions in $.fn and replace each one of them with your own function.

That function, in turn, can log the selector of the jQuery object it’s called on and the arguments it received, then call the original function.

Something like:

$.each($.fn, function(key, func) {
    if ($.isFunction(func)) {
        $.fn[key] = function() {
            console.log("Method '" + key + "' was called");
            console.log("  on selector '" + this.selector + "'");
            console.log("  with arguments: " + arguments);
            return func.apply(this, arguments);
        };
    }
});