What is the source of the double-dollar sign selector query function in Chrome/Firefox?

Question

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?

Answer 1

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.

• Chrome DevTools'/WebKit Inspector's cmd line API source
• Firebug's cmd line API source
• Opera Dragonfly's cmd line API source

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