javascriptgoogle-chromegoogle-chrome-devtoolsdollar-sign

$ Variable (Dollar Sign) in Chrome?

I was working with the developer tools of google chrome on a page without jQuery (or any other library that uses the $ sign as a shortcut). When I inspected $ by the console (by just typing it in and hitting enter), i got this:

$
function () { [native code] }

So, chrome has some native function that can be referenced by $. Only chrome seems to have this one and i cannot access it via window['$'] nor via document['$'] or this['$'].

I was not able to find out what this function is. Do you know what it does and maybe have some background information on this? Thanks in advance!

Solution

  • This has changed yet again, even since just last year.

    The devtools console provides $ as an alias to document.querySelector, along with many other things; here's an excerpted list:

    • $(selector) returns the reference to the first DOM element with the specified CSS selector. This function is an alias for the document.querySelector() function.
    • $$(selector) returns an array of elements that match the given CSS selector. This command is equivalent to calling document.querySelectorAll().
    • $_ returns the value of the most recently evaluated expression.
    • The $0, $1, $2, $3 and $4 commands work as a historical reference to the last five DOM elements inspected within the Elements panel or the last five JavaScript heap objects selected in the Profiles panel.

    ...and a bunch of others.

    Note how it calls $ an alias of document.querySelector, but says $$ is "equivalent" to calling document.querySelectorAll. Neither seems to be literally true; $ === document.querySelector is false, and $$ returns an array, not a NodeList.