Is it possible to profile built-in JavaScript functions with Firebug?

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.

Simon Sarris · Accepted Answer · 2011-03-24 17:56:03Z

2

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.

answered Mar 24, 2011 at 17:56

Simon Sarris

64.3k13 gold badges150 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy West Over a year ago

Yeah, I thought about this workaround ("breaking things down into lots of tiny functions") but I'd like to avoid it if possible. We'll see.

Luke Schlather · Accepted Answer · 2011-03-24 20:04:42Z

1

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

edited Mar 24, 2011 at 20:04

answered Mar 24, 2011 at 18:49

Luke Schlather

3972 silver badges13 bronze badges

2 Comments

Andy West Over a year ago

Great suggestion. Are you certain that FF 4.0 is supported by the latest version of Venkman? I might give this a try.

Luke Schlather Over a year ago

Yes, the latest Mercurial build does work. Actually, like you I'm trying to debug some canvas stuff, and while the output is more detailed than Firebug I'm still having some trouble nailing down the canvas methods.

Andy West · Accepted Answer · 2011-03-26 19:43:14Z

1

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:

Checks to see if the Firebug console is open.
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.

answered Mar 26, 2011 at 19:43

Andy West

12.5k4 gold badges37 silver badges52 bronze badges

Collectives™ on Stack Overflow

Is it possible to profile built-in JavaScript functions with Firebug?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related