$$ Devtools console utils gotcha

Published December 21, 2023 by Tommy George

I bumped into this today: When using $$ and $ shortcuts in browser devtools, there might be a little caveat.

I was iterating on a quick little script in the console, and was wondering why on earth I was getting multiple results from $(). The docs – at least as I remembered them, say that it’s a shortcut for querySelector(). And that means it should only return one item.

So I looked a little closer:

• Chrome docs for $() and $$()
• Firefox docs for $() and $$()

I’m not sure if it’s the same in both, but I noticed this in the Firefox Web Console Helpers documentation:

Equivalent to document.querySelector() or calls the $ function in the page, if it exists.

Wait… zoom in…

calls the $ function in the page, if it exists

And sure enough, my good friend jQuery was right there on the page!

And that’s why I was getting odd results.

I switched it up to element.querySelector and all was good!