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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    Fix Anchor URLs Using MooTools 1.2

    The administrative control panel I build for my customers features FCKEditor, a powerful WYSIWYG editor that allows the customer to add links, bold text, create ordered lists, and so on. I provide training and documentation to the customers but many times they simply forget to...

  • By
    Spyjax:  Ajax For Evil Using Dojo

    The idea of Spyjax is nothing new. In pasts posts I've covered how you can spy on your user's history with both MooTools and jQuery. Today we'll cover how to check user history using the Dojo Toolkit. The HTML For the sake of this...

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!