What does the "$" dollar mean in the browser console or in Javascript?

Asked

Viewed 331 times

4

On any empty page (no library at all), when typing a $ in the browser console is returned a function, as shown in the output below:

ƒ $(selector, [startNode]) { [Command Line API] }

If I type two $ the result is similar:

ƒ $$(selector, [startNode]) { [Command Line API] }

If you type three $, get error:

Uncaught ReferenceError: $$$ is not defined

I tested in other browsers (IE11, Edge, Firefox) and all return a function, in some cases with slightly different output.

But if I do console.log($) in a <script> page, will show the error $ is not defined:

<html>
<head></head>
<body>
   <script>
   console.log($);
   </script>
</body>
</html>

I wonder exactly what that means $ (single or double) or the function it returns on the console and what would be its application in practice?

javascript browser console
  • 2

    Basically it’s a utility for Chrome debugging, if you don’t care about an external source, you can read that

  • @user140828 That’s cool! I didn’t know these console features. Obg! I looked at the page you sent and I’ve already figured out what that means. You can even post an answer :D

  • 3

    Note: no FF is the same thing, is not exclusive to Chrome

  • 2

    Variables $0, $1, $2, etc can also be created by tab it "Elements" to store desired HTML elements. Just a curiosity

1 answer

9


Shortcuts present in developer tools.

  • The dollar sign $ works as a shortcut to document.querySelector.
  • Already the $$ functions as a alias for document.querySelectorAll. The only difference is that instead of returning a NodeList, return one Array. Probably for the convenience of using constructor methods Array directly.

It is important to stress that these shortcuts should not be used in "production" codes, since they only work in developer tools.

It is also worth mentioning that this dollar in question $ is not jQuery. It will only refer to jQuery if that library is included in the page. In the latter case, the default shortcut to document.querySelector will no longer be available.

There are several other "utilities" in the developer tools console. This article provides more information.

  • 1

    That’s right. Mt good!

Browser other questions tagged javascript browser console

You are not signed in. Login or sign up in order to post.