有时我会遇到一个奇怪的现象，即$ chrome api 简写为document.querySelector，它不会使用正确的选择器返回元素，而它与$$ 一起正常工作。由于puppeteer 严重依赖这些速记（page.$、page.$$、page.$eval、page.$$eval），它可能会导致意外问题。
这个问题甚至可以在这里重现，目前在 Stack Overflow (09-29-2020)。
例如：
$('h1').innerText => undefined
$$('h1')[0].innerText => Chrome DevTools: $(selector) shorthand doesn't return the element...
它的原因是什么，为什么使用$$ 的解决方法有效？
【问题讨论】：
标签： javascript google-chrome-devtools puppeteer
我发现它会影响那些在其前端使用 jQuery 库的页面（Stack Overflow 目前使用它）。
在此类页面上，$ 被 jQuery 占用（作为其自身的别名），因此 chrome api 返回一个对象而不是 $(selector) 的元素。第一个元素是 DOM 元素本身，这就是 [0] 起作用的原因。
顺便说一句：$$(selector)[0] 甚至可以替换为$(selector)[0]，因为这个问题与querySelector 与querySelectorAll 无关。
使用 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>
页面不使用jQuery：
...虽然在页面上不依赖 jQuery，但它照常工作。
$('h1')/document.querySelector('h1'):
<h1>...</h1>
$('h1')[0]:
undefined
它可能对其他人有用。
【讨论】：