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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    I’m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • By
    GitHub-Style Sliding Links

    GitHub seems to change a lot but not really change at all, if that makes any sense; the updates come often but are always fairly small. I spotted one of the most recent updates on the pull request page. Links to long branch...

  • By
    Advanced CSS Printing – Using JavaScript Double-Click To Remove Unwanted DIVs

    Like any good programmer, I'm constantly searching around the internet for ideas and articles that can help me improve my code. There are thousands of talented programmers out there so I stumble upon some great articles and code snippets that I like to print out...

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!