Add console.profile statements to JavaScript/jQuery code on the fly
We have a thick client app using jQuery heavily and want to profile the performance of the code using firebug's console.profile API. The problem is, I don't want to change the code to write the profile statements. Take this example:
var search=function(){ this.init=function(){ console.log('init'); } this.ajax=function(){ console.log('ajax'); //make ajax call using $.ajax and do some DOM manipulations here.. } this.cache=function(){ console.log('cache'); } } var instance=new search(); instance.ajax();
I want to profile my instance.ajax method, but I dont want to add profile statements in the code, as that makes it difficult to maintain the code.
I'm trying to override the methods using closures, like this: http://www.novogeek.com/post/2010/02/27/Overriding-jQueryJavaScript-functions-using-closures.aspx but am not very sure how I can achieve. Any pointers on this? I think this would help many big projects to profile the code easily without a big change in code.
Here is the idea. Just run the below code in firebug console, to know what I'm trying to achieve.
var search=function(){ this.init=function(){ console.log('init'); } this.ajax=function(){ console.log('ajax'); //make ajax call using $.ajax and do some DOM manipulations here.. } this.cache=function(){ console.log('cache'); } } var instance=new search(); $.each(instance, function(functionName, functionBody){ (function(){ var dup=functionBody functionBody=function(){ console.log('modifying the old function: ',functionName); console.profile(functionName); dup.apply(this,arguments); console.profileEnd(functionName); } })(); console.log(functionName, '::', functionBody()); });
Now what I need is, if i say instance.ajax(), I want the new ajax() method to be called, along开发者_如何学JAVA with the console.profile statements. Hope I'm clear with the requirement. Please improvise the above code.
Regards, Krishna, http://www.novogeek.com
If you only want to modify the single instance of "search" then this should work:
$.each(instance, function(name, method){
if (typeof method !== 'function') return;
instance[name] = function() {
console.profile(name);
var ret = method.apply(this, arguments);
console.profileEnd(name);
return ret;
};
});
I know this is from a long time ago but I wanted to add this in case other people find this answer. You can make anonymous/private functions work by adding a name to each one. The other comments mention doing it manually bit I wanted to explain how to:
$('.stuff').each(function() { ... });
to
$('.stuff').each(function workOnStuff() { ... });
精彩评论