If there’s one thing all library users should be doing more, it’s peeling back the layer of abstraction and seeing what’s really happening underneath. This is the only way to gain a true understanding of what the library provides, and who knows, maybe you’ll find some gems that you didn’t know existed.

Libraries like jQuery aren’t very small when uncompressed. Traversing a long source file trying to look for a specific method’s implementation is far from ideal. I have frequently found myself in this situation with jQuery, so today I decided to do something about it, and the result is viewable at https://j11y.io/jquery.

Preview of the jQuery Source Viewer

It allows you to study specific parts of jQuery’s source. You can type in a method name and you’ll see its implementation straight away, in all its syntax-highlighted glory! It will also link’ify all function names within the presented source:

The css method's source, with certain function names as links

You can link directly to a method using the following URL pattern:

https://j11y.io/jquery/[version/]methodName
 
E.g.
https://j11y.io/jquery/css
https://j11y.io/jquery/1.3.2/attr
https://j11y.io/jquery/jQuery.proxy
 
-OR-
https://j11y.io/jquery/#v=version&fn=methodName

If you don’t specify a version then 1.4 is assumed.

The source that’s shown won’t be identical to the actual source, since this source viewer only works by toString()‘ing the functions. I might eventually implement something a little more robust, but it’s going to take time — finding a specific function’s declaration in a source file is tricky, especially when they’re not all defined with the straightforward method: function(){...} or function foo(){...}.

I didn’t really intend it to be an accurate depiction of the real source anyway — just something I (and others) could use to see how certain things are implemented within jQuery.

I hope you find it useful… I know I will!

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!