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:
(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):
[object Function]? Sigh)
Anyway, glad I finally (randomly) found out the meaning.