Do you know which percentage of Firefox users are browsing your website with an oldish 2.x version? What about diminishing 3.x or even ancient 1.x and 1.5.x versions? Google Analytics “browser” reports, while being very helpful, make it somewhat hard to answer this particular question.

I made a simple bookmarklet (with a silly name) to report a percentage-based breakdown of Firefox visitors by version. Bookmarklet also color-codes each entry for easier navigation — Firefox 3.5 and later (such as currently beta 3.6 and alpha 3.7) in green; 3.x in yellow; 2.x in orange; 1.5.x in red, and finally 1.x — in black (you’ll be surprised, but yes, those dinosaurs still exist).

Colored entries make it really easy to spot old version or a group of browsers from particular series. On a screenshot below, for example, you can see 2.0.20 stand out with 1,072 visits; and total amount of all Firefox 2.x users being 3,209 — 3.78% of all visits. Knowing percentage of particular series should also make it easier to decide whether it makes sense to support it.

Don’t forget that if you need to analyze Safari versions, there’s an app for that a similar Safarify bookmarklet.

As usual, source (and latest version) is on github. Hope you find it useful.

I have recently stumbled upon a blog post by Remy Sharp on detecting global variable leaks. As you probably know, Javascript is notorious at making such leaks way too easy. The problem is mainly with undeclared assignments which result in global variable declarations when variables are not found in the scope chain.

  (function(){
    var x = 1; // <== accidentally changed "," to ";"
        y = 2; // <== `y` is now a global variable
  })();

To be more precise, undeclared assignment actually results in global property assignment, not global variable declaration. The difference between two is rather subtle: variable declaration creates non-deletable property of a global object, whereas explicit or implicit property assignment creates deletable one. Another peculiarity can be observed in IE, where global property assignment is disallowed if there’s an element in a document with the same-named ID or NAME value. Global variable declaration, on the other hand, quietly overwrites existing property in cases like this.

Remy solves the problem with a bookmarklet that creates a blank context (essentially a window in an empty iframe), then uses that clean context to get the difference with the main one. The list of found variables is dumped into a console.

It’s worth mentioning that JSLint already allows detecting undeclared assignments, but JSLint can hurt feelings so we won’t use it. Well, actually JSLint performs so many validations, that it’s not always possible to detect undeclared assignments in huge scripts of legacy applications (like the one I wanted to examine). Running a test such as in this bookmarklet can be “applied on” any script.

The bookmarklet worked like a charm, but as soon as I plugged it into one of our applications, I was greeted with dozens of Prototype and Scriptaculous -related methods. On top of those, there were few google analytics and Mozilla -specific ones. Unfortunately, the original code was obfuscated and almost unreadable so I reproduced it from the scratch, this time making it possible to toggle certain property sets on and off. These property sets are – Prototype, Scriptaculous, Mozilla, Google Analytics and Firebug ones. The code is structured in such way that it should be easy to augment it with additional sets.

In the end, I found few leaks in one of our applications and even one in firebug (now fixed).

As usual, the bookmarklet and its source are on github.

Feel free to fork it.

Edit [9/5/2009]

Clarified global variable declaration vs. global property assignment (thanks to Garrett Smith)

If you use Google Analytics, you probably know about “Browsers” report, which gives a breakdown of browsers that site visitors use. The report does a pretty good job at differentiating browsers by name – such as Firefox, Safari and Internet Explorer – and even shows the breakdown of browser versions for each one of them. What I always found to be slightly annoying is the versioning of Safari browser. Instead of showing actual version numbers, such as Safari 3.2, analytics shows engine build numbers, such as 525.26. Quite obviously, it’s easy to get lost in this sea of these relatively meaningless numbers. It’s also hard to tell the percentage of visitors using particular browser series, such as Safari 2.x, Safari 3.x and Safari 4.x.

I wrote a simple “Safarify” bookmarklet which inserts actual version number next to each of the build numbers. Just click on it when in analytics “browsers” report. The source is versioned on github in case anyone wants to change it, so feel free to fork away. The mapping is based on the table from wikipedia’s Safari article. Build numbers that weren’t in that table are mapped to approximate version numbers and are prepended with “~”.

I haven’t bothered mapping 1.x and earlier series, as those should be nearly inexistent by now, but it should be trivial to add them if needed.

Hope you find it useful.