Exactly WTH is up with $ in devtools

A short post to file under “I finally know the answer!” I was checking out the latest issue of .net magazine (which recently has a new online home) and the cover story is on devtools. We all love devtools, right? But ever since Bonnie Vasko came around the PhillyJSDev meetup to talk about Chrome devtools, I’ve been bothered. Bothered by the $.

skip to the >^..^< if you already know what I’m talking about by $

You use $() in devtools as a selector, exactly like you’d use jQuery … but secretly not!

Here’s what the console without jQuery looks like:

jquery-dne

With jQuery:

jquery-replaces-$

 

(aside: wouldn’t it be totally awesome if jQuery’s console definition didn’t look like randomness?)

So when I’m not sure if a page has jQuery or not (what can I say, I’m always hoping that it’s not) it kind of really annoys me that I had to do that type of check to see what is getting used.

>^..^< welcome back!

TURNS OUT that the $ is short for document.querySelector IF you don’t have jQuery … or any other library that’s already using $. If $ is in use, the command line API’s usage of it is overridden. Kind of important to know which one you’re using, as the console/aliased version behaves (obviously) very differently than getting an object using jQuery.

MDN (per usual) has good docs on querySelector and you can also read more about the more generalized Element.querySelector. Furthermore, I could have avoided this random frustration (per usual) by reading Chrome Devtools documentation, where you can see exactly what you can do with $, $$, $x, and more. Using $ in Firefox tools works as well, but it doesn’t appear to have extended $ in the same way as Chrome ($_ returns the value of the most recently evaluated expression):

firefox-tools

 

(another aside: [object Function]? Sigh)

Anyway, glad I finally (randomly) found out the meaning.

Tags: , ,

5 Responses to “Exactly WTH is up with $ in devtools”

  1. Chris Coyier September 23, 2013 at 8:53 am #

    Woah I never knew that either! Pretty useful but also confusing. It’s interesting that on this page, $ is undefined. You load jQuery, but it must be in noConflict mode, so even though $ is undefined, DevTools is leaving $ alone. I would think it would just test if $ was defined and if not make it the shortcut to querySelector, but apparently it’s more fancy than that.

    • Pam Selle September 23, 2013 at 9:55 am #

      I wonder if noConflict defines $ as undefined, or defines it and the undefines it … hmm. I’m using a WooTheme, so I’m not too solid on the internals.

      I am not surprised by increased fanciness. Thanks for sharing the post, Chris!

  2. Addy Osmani September 23, 2013 at 9:04 am #

    Glad you found this interesting 🙂

    Last year we changed the console function $() from $=getElementById(id) to $=querySelector(selector) and left $$() = querySelectorAll. We tried to get some standardization on this behaviour between the consoles in Firebug, Firefox, Chrome and Opera and achieved it to some extent.

    You can see the initial discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=778732, http://code.google.com/p/fbug/issues/detail?id=5764 and https://bugs.webkit.org/show_bug.cgi?id=92648.

Leave a Reply