JsBloat is a Firefox extension that helps determine what fraction of the jQuery library a web page uses. It heavily leverages JSCoverage, an open-source code coverage tool for JavaScript. You can install the extension from https://addons.mozilla.org/en-US/firefox/addon/jsbloat/.

JsBloat works by intercepting requests to the jQuery library loaded from ajax.googleapis.com. Instead of returning the requested code, JsBloat injects an instrumented version of jQuery that can be processed by JSCoverage. If JsBloat intercepts a request on the page, it inserts a Show JSCoverage results button in the upper-left-hand corner of the page. Clicking the button will overlay an iframe with the JSCoverage UI.

Examples of pages where you can see JsBloat in action (once you have the extension installed) are:

• http://jquery.com/
• http://stackoverflow.com/

If your web page loads jQuery from someplace other than ajax.googleapis.com, then you can also update a setting in about:config. For example, http://getfirefox.com/ loads jQuery from http://mozcom-cdn.mozilla.net/js/jquery/jquery.min.js (apparently with the wrong MIME type), so if you go to about:config and set extensions.jsbloat.overrides to:

{"mozcom-cdn.mozilla.net/js/jquery/jquery.min.js": "jquery-1.4.4.js"}

and then you reload http://getfirefox.com/, you should see the Show JSCoverage results button in the upper-left-hand corner, indicating that JsBloat was able to intercept the request to http://mozcom-cdn.mozilla.net/js/jquery/jquery.min.js.

Important items regarding setting the preference:

• The pref must be expressed as a valid JSON map of strings to strings (so double-quotes are mandatory!).
• Keys in the map do not include the protocol (http:// vs. https://) because JsBloat ignores the protocol when intercepting the URL.
• Values in the map come from a fixed set of instrumented versions of jQuery that are bundled with the extension. Currently, they are all of the form jquery-X.Y.Z.js where X.Y.Z is in the range 1.3.0-1.5.2.