是否可以使用Firebug剖析内置的JavaScript函数？

Question

I'm building a graphics-intensive site in HTML5 that makes heavy use of the canvas context's drawImage() function. In IE9 on Windows 7, performance is smooth, but in Firefox 4, things get choppy. I'm trying to isolate bottlenecks so I can start optimizing.

If I use the JavaScript performance profiling feature of Firebug 1.7.0, I can see statistics for my own functions, but I'd like to see calls to the built-in JavaScript functions as well. Is there any way to do this in Firebug or some other tool?

As a workaround, I suppose I could make the profiling granularity finer by breaking things down into lots of tiny functions, but I'd rather my design not be driven by how easy it is to profile.

Update : Looking back at this question, it occurs to me that the built-in functions in question are not truly JavaScript functions but functions provided by the host. In this case, they're DOM objects from the browser. Just thought I'd clarify that technical detail.

Answer 1

Last I used it Firebug doesn't give you the ability to profile native code.

What you can do is make your own function that just calls the native piece you want to call. As in turn the code:

ctx.fillRect(50,50,50,50);`

Into:

// wrap in function
function fillR() {
ctx.fillRect(50,50,50,50);
};

// call it immediately afterwards
fillR();

Then you can get the stats for fillR. Not the best fix, but it may useful enough.

Answer 2

You might try playing around with Venkman, Mozilla's JS debugger. At the moment the version on addons.mozilla.org is broken in Firefox 4.0.

You can get the most recent version via mercurial, which does work with Firefox 4.0:

hg clone http://hg.mozilla.org/venkman/
cd venkman/xpi
./makexpi.py
firefox venkman-0.9.88.1.xpi

Answer 3

After contemplating this on and off for a couple of days, I came up with a new solution and wrote a blog post about it:

http://andrewtwest.com/2011/03/26/profiling-built-in-javascript-functions-with-firebug/

This method does the following:

1. Checks to see if the Firebug console is open.
2. Does a combination of overriding and wrapping native functions with user-defined functions.

These steps combined provide a way to profile DOM functions that doesn't affect your original script code unless you're debugging.