Web Inspector and Firefox Dollar Functions

By  on  

Dollar Functions

Many of you probably didn't know this but WebKit-based like Safari and Chrome, in addition to Firefox, contain special dollar functions within the console object that allow you to grab elements within the current page.  While I've not determined the use of each method, a few of them are obvious:

// Dollar method
// Returns an element by ID
$ = function (id) {
	return document.getElementById.apply(document, arguments);
}

// Bling-Bling method
// Returns array of nodes found by QSA
$$ = function(selector) {
	return document.querySelectorAll.apply(document, arguments);
}

// Broke method
// returns the currently selected element within the console HTML pane
$0 = function toString() { [native code] }

The $1 - $4 methods are returning undefined, oddly enough.

Dollar Functions

It's not clear to me what the last few methods do.  Maybe they're placeholders for feature methods but they continue to be undefined for now.

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    JavaScript Speech Recognition

    Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on.  Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands...

  • By
    Build a Calendar Using PHP, XHTML, and CSS

    One of the website features my customers love to provider their web users is an online dynamic calendar. An online calendar can be used for events, upcoming product specials, memos, and anything else you can think of. I've taken some time to completely...

Discussion

  1. Brian

    $0 returns whatever you have selected in the Elements tab.

    These all work in Firebug too, by the way.

  2. $0 and $1 return the currently selected DOM element and the previously selected DOM element, respectively. I haven’t yet found a use for this while debugging, mainly because selecting elements in the inspector and debugging in the console seem (for me at least) to be disconnected tasks, but maybe there will be a reason some day? ^_^

    Not sure about webkit’s inspector, but you can find the API for firebug’s CLI here: http://getfirebug.com/wiki/index.php/Command_Line_API

  3. Matthew F

    Perhaps if they plan to use it in the future, they have to reserve it now so that the dom-modifying frameworks don’t start using it :)

  4. Didn’t know about this, the bling-bling method is cool though, haha.

  5. farkob

    Now I get it, this is why Douglas Crockford says you shouldn’t use $ functions.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!