Chrome Devtools: $(selector) Shorthand Doesn't Return The Element While $$(selector)[0] Does

Time to time I face a weird phenomenon with the $ chrome api shorthand for document.querySelector that it doesn't return the element with the correct selector, while it works corre

Solution 1:

I've found it affects those pages that uses jQuery library on their frontend (Stack Overflow uses it at the moment).

On such pages the $ is occupied by jQuery (as alias for itself), so chrome api returns an object instead of the element for $(selector). The first element is the DOM element itself, that's why [0] works.

By the way: $$(selector)[0] can be even replaced with $(selector)[0], as this problem has nothing to do with querySelector vs. querySelectorAll.

Page using jQuery:

$('h1'):

n.fn.init(2) [h1.grid--cell.fs-headline1.fl1.ow-break-word.mb8, h1#feed-modal-title.s-modal--header.fw-bold.js-first-tabbable.c-move, prevObject: n.fn.init(1), context: document, selector: "h1"]

$('h1')[0] / document.querySelector('h1'):

<h1>...</h1>

Page doesn't use jQuery:

...while on pages doesn't rely on jQuery it works as usual.

$('h1') / document.querySelector('h1'):

<h1>...</h1>

$('h1')[0]:

undefined

It might be useful for others.