Friday, May 1st, 2009

Francisco Tolmasky Starts Blogging and Jump-starts Profiling

Category: Cappuccino, Debugging, JavaScript, WebKit

It’s no secret that we’re mightily impressed with the fine work of the 280 North crew, what with 280 Slides, Cappuccino, Atlas, working with SOFA to make Aristo free for other projects to use, and that whole Objective-J thing which we’ll never use but we love nonetheless. ;-)

Francisco Tolmasky, one-third of the team, started blogging this week over at Alert Debugging. The inaugural post, Building a Better JavaScript Profiler with WebKit, is a bit of an opus.

He starts out pointing out a familiar sight to those of us who have profiling JavaScript:

Note the green question marks:

The reason these question marks show up is because somewhere the script in question contains an anonymous function. Anonymous functions, or lambdas as they’re sometimes referred to, are functions that you can declare just about anywhere in your program and not bother naming. Take the following code for example:

  1. document.addEventListener("click", function() { /*...*/ }, false);

Francisco goes on to point out that while in the case of event listeners you could simply bind the event to a non-anonymous function, for many meta-programming cases, there’s no practical work-around. Further, he points out that there are often ambiguously-named functions that are also difficult to distinguish in the profiler.


To solve this problem, the Francisco introduced support for a “displayName” property into WebKit that its profiler supports, yielding much easier-to-read results:

Francisco built on this feature to create this rather nice profiling experience:

The best part about this though is that it’s not just limited to Objective-J: any language abstraction now has the opportunity to make the same use of these tools… Surprisingly enough, the folks over at Joose wasted no time incorporating this into their own library, so I’ve included links to their additions as well.

Francisco didn’t stop here; he also patched the WebKit profiler to support a much better “Bottom Up View” that matches the behavior of Apple’s popular Shark profiler, resulting in the ability to drill down into exactly where bottlenecks are occurring in code.

See Francisco’s blog entry for more details!

Posted by Ben Galbraith at 1:08 pm

3.4 rating from 20 votes


Comments feed TrackBack URI

Very exciting stuff. I was surprised they didn’t try just using function.toString() to show some sort of representation of a function other than (?). It’s what I used in Dojo Firebug Lite trace().

I’m also surprised he didn’t peak over at the already-existing Mozilla implementation of!

Comment by AnM8tR — May 1, 2009

We discussed making writable with the WebKit team but decided against it for a number of reasons. We figured it would be nice to always be able to access to original name property, and allowing it to be writable would raise some interesting questions, such as “if i do = ‘whatever’, should ‘whatever’ now be callable?”. By having an explicitly separate property its clear that one is solely intended for debugging purposes and has no further side effects in code.

Comment by tolmasky — May 1, 2009

It looks like isn’t writeable in Mozilla/Gecko either.

This exact problem (the pain of profiling and — more importantly — producing helpful stack traces when users experience JS errors) has pushed me to a more verbose convention for writing classes:

function MyClass() {
// anonymous function block to keep global scope clean
(function() {
MyClass.protoype.myFunc = MyClass_myFunc;
function MyClass_myFunc() {


Comment by PeterRust — May 1, 2009

functions name and length are static, which kinda make the usage of name “safe-enough” but if we use a = function(){} rather than function a(){} the name will be empty and kinda meaningless.
Also I think it is natural to use ( || “anonymous”) cause anonymous is the name of lambda functions: Function(“”)().name
about the length, I created via this immutable property a Python like list variable :) … but it is off topic. Good stuff guys!

Comment by WebReflection — May 2, 2009

Here’s a simpler way to achieve what you’re doing:

function MyClass() {
// anonymous function block to keep global scope clean
(function() {
MyClass.protoype.myFunc = function MyClass_myFunc() {;


or alternatively, if you’ve got many functions:

function MyClass() {
// anonymous function block to keep global scope clean
(function() {
MyClass.protoype = {
myFunc: function MyClass_myFunc() {


myOtherFunc: function MyClass_myOtherFunc() {



Comment by spyke — May 3, 2009

Can I just point out that there is nothing impressive about Cappuccino or that slide show? Do the editors read anything but their own rag?

Comment by DavidMark — July 11, 2009

Leave a comment

You must be logged in to post a comment.