'$' already defined in Chrome?

Question

If you type $ in console of Chrome in a plain html page without script. You would see this output

> $ < bound(selector, startNode) 

However when you do window.$ , the output is undefined,

> window.$ < undefined 

What is the $ defined here , and why can't I access it via object window ?

Answer 1

$ is a local variable injected in your console from the __commandLineAPI object, via a with statement wrapping your code (that's why it's not a global variable). If you inspect it more closely (using e.g. debugger; $('*');), you'll also see that it is basically a function bound to the current window with the following source:

$: function (selector, opt_startNode) {     if (this._canQuerySelectorOnNode(opt_startNode))         return opt_startNode.querySelector(selector);      return inspectedWindow.document.querySelector(selector); } 

(defined on CommandLineAPIImpl.prototype)

Answer 2

From Command Line API Reference:

The Command Line API is a collection of functions for performing common tasks with the Chrome Developer Tools. These include convenience functions for selecting and inspecting elements in the DOM...

$(selector) Returns reference to the first DOM element with the specified CSS selector.This function is an alias for document.querySelector() function.

For example:

$('body')