What is the purpose of the $ variable in Chrome\'s Developer Tools console?

$ Variable in Chrome

Question:

While exploring the developer tools of Chrome on a page without jQuery, a peculiar behavior was observed. Typing "$" into the console returned a function with native code. This function could not be accessed through window['$'], document['$'], or this['$'], and its purpose remains enigmatic.

Answer:

The $ variable in Chrome's devtools console has undergone several changes. It currently serves as an alias for document.querySelector and provides additional functionality:

• $(selector): Returns a reference to the first DOM element matching the CSS selector, similar to document.querySelector().
• $$(selector): Returns an array of elements matching the CSS selector, effectively replacing document.querySelectorAll().
• $_: Stores the value of the most recent evaluated expression.
• $0, $1, $2, $3, and $4: Provide historical references to the last five inspected DOM elements in the Elements panel or JavaScript heap objects in the Profiles panel.

Notably, $$ does not literally call document.querySelectorAll(), as it returns an array instead of a NodeList.

Chrome is the only browser that exposes this $ variable, which serves as a convenient shortcut for interacting with DOM elements and accessing various expressions and objects within the developer tools console.

The above is the detailed content of What is the purpose of the $ variable in Chrome\'s Developer Tools console?. For more information, please follow other related articles on the PHP Chinese website!