62

Check this jsfiddle, and have a look at the console. $$ is not defined. Now, open a completely new window, and enter $$ into a console. It defines a function for getting a (jquery-like) array of all the dom elements which match the selector:

> $$

bound: function () {
  return document.querySelectorAll.apply(document, arguments)
}

Is this being added by Dev tools? It is also present when using Firebug in Firefox. Is it used internally by the tools themselves?

2 Answers 2

191

Firstly, everything in ziesemer's answer is correct.

This is all about JavaScript history

There are a number of functions that are available in various browser's devtools consoles. Collectively, the methods are known as the Command Line API(off-line) (new link) and they all originate from Firebug. Nowadays we just have parity across browsers because Firebug did things (mostly) right.

But back when Firebug was being created (2006), the JavaScript library that was all the rage was Prototype.js. $ was grabbed by Prototype for some getElementById() syntactic sugar as that was certainly the quickest way to be grabbing elements and most common element acquisition technique at the time. It was such a timesaver, folks used the whole library just for the $ sugar.

In early 2006, jQuery then debuted and used $() for selecting any element based on css selector. As my old CSS Selector Engine Timeline post shows, Prototype then followed up four days later with their own, but as $ was already taken in their library they just went to $$(), which is now known as the bling-bling function.

So Firebug was leveraging Prototype's API as it was still ruling the roost in 2006. Now, in the days of jQuery and post-jQuery aliasing like window.$ = document.querySelectorAll.bind(document), we see it as quite backwards. Interestingly, when Opera revolutionized Dragonfly, their browser dev tools, they chose $ as their querySelectorAll alias, to better match present day practices, which IMO makes a bit more sense.

Oh you meant the code source..

Now, you asked about the "source" of the $$ in DevTools and I explained the history. Whoops! As to why it's available in your console... all of the Command Line API(off-line) (new link) methods are available only within the context of your console, just as convenience methods.

copy() is one of my favorites; I cover it and others in this JavaScript Console for Power Users video.

4
  • 9
    Ah the ambiguity of English.. I did mean the historical source, but am glad it allowed both answers. Thank again!
    – minikomi
    Apr 25, 2012 at 4:57
  • Those last few links are broken.
    – NoBugs
    Jan 30, 2014 at 6:56
  • 1
    Browser source code changes quickly, so deep links are doomed to get stale. The link contents can be used together with code search tools to find the source code. The relevant code for Chrome's DevTools is here. code.google.com/p/chromium/codesearch#chromium/src/third_party/… The link will most likely break when the Blink and Chromium repositories get merged. I think src/third_party/WebKit will turn into src/blink. Like I said, deep links into source code are doomed to get stale quickly!
    – pwnall
    Feb 10, 2014 at 8:00
  • This answer deserves more upvotes and a place on the hall of fame of SO. By the way @PaulIrish, what's the source of the chronologic data? i.e: "Prototype then followed up four days later with their own". Sounds like this could be a best-seller; "Javascript: An unexpected journey".
    – sospedra
    Jan 21, 2015 at 8:45
31

Well, Firebug Lite defines this as:

this.$$=function(selector,doc){if(doc||!FBL.Firebug.chrome){return FBL.Firebug.Selector(selector,doc)

(See the source.)

The full version of Firebug defines this as

this.$$ = function(selector)
{
    return FBL.getElementsBySelector(baseWindow.document, selector);
};

This is actually documented and yes, it is used internally as well.

So I assume that Google Chrome is doing something similar.

3
  • I thought this might be the case.. Can anyone check the chrome source as well before I mark correct?
    – minikomi
    Jan 24, 2012 at 2:34
  • 1
    @minikomi - Google Chrome is not open source, so unless someone from Google can chime-in, we need to resort to looking at Chromium. I checked-out the source for this, but can't immediately find any similar references. However, I'm guessing it's possible that this exists in Chrome but not Chromium...
    – ziesemer
    Jan 24, 2012 at 2:55
  • Good point. I got as far as google code but forgot the search was taken down.. However, since the two return pretty much identical functions it's safe to assume it's the source! Thank you!
    – minikomi
    Jan 24, 2012 at 2:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.