Skip to content

Hey library! What’s your name! (and, let’s run arbitrary code in devtools!)

So I (minorly) kvetched about how when exploring $ in devtools, jQuery is represented as a fabulous string:

jquery-replaces-$

I use the console a lot to explore libraries, discover functionality, etc. Coupled with that, I’ve also started using both Chrome and Firefox devtools to try and become a master of both (and also get used to regular cross browser testing/debugging).

So why DO names in Chrome look all cray? In Firefox, when I put a function into the REPL, something different happens.

firefox function representation

 

Neither of these are telling me the name. Or directly accessible information about the library. Awesome. Do you know how to get the version/library information in jQuery?  Here’s how.

Get jQuery's version with $.fn.jquery

 

Because that’s not obfuscated. What I’d love to see is things more like this (note, getVersion would make sense as a function name, I was just trying things out):

Nicer version numbers!

 

Ember does this, and it’s awesome:

Ember.VERSION returns the version. RADICAL

So when I started looking into this, I ended up in an interesting place — I wanted to argue that instead of that first picture of jQuery, when I type jQuery into the console, I’d like to see some useful information instead. However, it turns out that what Chrome is doing is calling the toString() method on a function when it represents in the REPL.

You know what you can do with arbitrary methods? Redefine them!

Redefining toString on $

And remember the “arbitrary” part? I can run any JavaScript in there, it seems — redirect your page, inject things into the DOM … super cool, right? (err….)

SO

Let’s maybe put some useful version numbers into our libraries in a standard way. Quite a few of them do, like Backbone! Angular (although theirs is lowercase and an object … I like the caps string version), Knockout (also lowercase, but a string). With jQuery, I’m sure part of it is related to jQuery() being an init function and not an object like the major frameworks (and as such, it’s burdened with that toString functionality in Chrome console rather than showing an object that might expose the version key).

And maybe it’s not a good idea that Chrome’s calling toString? I discussed this with Michael Ficarra and  Brian McKenna at NationJS yesterday (who are both super awesome and nice and I totally did not understand their talks since they went over my head), and Michael suggested it was bug-report type stuffs. What do you think? Searching the bugs, it looks like toString is also used for Date objects, and you can crash it using debugger;. Cool! (?) Kinda looks like Firefox is doing the smart thing here.

 

2 Replies to “Hey library! What’s your name! (and, let’s run arbitrary code in devtools!)”

  1. If we’re going to rely on version strings from libraries, let’s not have strings, which we have to know how to parse for comparison. Let’s have something that makes it easy to verify that the library version falls within a range that matters to us.

    1. A good point. Angular’s version information is in an object — and it separates it out into separate attributes for major, minor, and dot:

      Object {full: “1.0.7”, major: 1, minor: 0, dot: 7, codeName: “monochromatic-rainbow”}

      Something like that?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.