‘$’ déjà défini dans Chrome?

$ est une variable locale injectée dans votre console à partir de l’object __commandLineAPI , via une instruction with __commandLineAPI votre code (c’est pourquoi ce n’est pas une variable globale). Si vous l’inspectez de plus près (en utilisant par exemple le debugger; $('*'); ), vous verrez également qu’il s’agit essentiellement d’une fonction liée à la fenêtre en cours avec la source suivante:

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

(défini sur CommandLineAPIImpl.prototype )

À partir de la référence de l’API de ligne de commande :

L’API de ligne de commande est un ensemble de fonctions permettant d’effectuer des tâches courantes avec les outils de développement Chrome. Celles-ci incluent des fonctions pratiques pour sélectionner et inspecter des éléments dans le DOM …

$ (selector) Renvoie la référence au premier élément DOM avec le sélecteur CSS spécifié. Cette fonction est un alias pour la fonction document.querySelector ().

Par exemple:

 $('body') 

Ajoutant aux réponses précédentes, il peut être trouvé dans le code de VM de chrome.

 // NOTE: Please keep the list of API methods below snchronized to that in WebInspector.RuntimeModel! // NOTE: Argument names of these methods will be printed in the console, so use pretty names! /** * @type {!Array.} * @const */ CommandLineAPI.members_ = [ "$", "$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "debug", "undebug", "monitor", "unmonitor", "table" ]; 

Toutes les implémentations peuvent être trouvées ici

 CommandLineAPIImpl.prototype = { /** * @param {ssortingng} selector * @param {!Node=} opt_startNode * @return {*} */ $: function (selector, opt_startNode) { if (this._canQuerySelectorOnNode(opt_startNode)) return opt_startNode.querySelector(selector); return inspectedWindow.document.querySelector(selector); }, /** * @param {ssortingng} selector * @param {!Node=} opt_startNode * @return {*} */ $$: function (selector, opt_startNode) { if (this._canQuerySelectorOnNode(opt_startNode)) return opt_startNode.querySelectorAll(selector); return inspectedWindow.document.querySelectorAll(selector); }, /** * @param {!Node=} node * @return {boolean} */ _canQuerySelectorOnNode: function(node) { return !!node && InjectedScriptHost.subtype(node) === "node" && (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.DOCUMENT_NODE || node.nodeType === Node.DOCUMENT_FRAGMENT_NODE); }, /** * @param {ssortingng} xpath * @param {!Node=} opt_startNode * @return {*} */ $x: function(xpath, opt_startNode) { var doc = (opt_startNode && opt_startNode.ownerDocument) || inspectedWindow.document; var result = doc.evaluate(xpath, opt_startNode || doc, null, XPathResult.ANY_TYPE, null); switch (result.resultType) { case XPathResult.NUMBER_TYPE: return result.numberValue; case XPathResult.STRING_TYPE: return result.ssortingngValue; case XPathResult.BOOLEAN_TYPE: return result.booleanValue; default: var nodes = []; var node; while (node = result.iterateNext()) push(nodes, node); return nodes; } }, /** * @return {*} */ dir: function(var_args) { return InjectedScriptHost.callFunction(inspectedWindow.console.dir, inspectedWindow.console, slice(arguments)); }, /** * @return {*} */ dirxml: function(var_args) { return InjectedScriptHost.callFunction(inspectedWindow.console.dirxml, inspectedWindow.console, slice(arguments)); }, /** * @return {!Array.} */ keys: function(object) { return Object.keys(object); }, /** * @return {!Array.<*>} */ values: function(object) { var result = []; for (var key in object) push(result, object[key]); return result; }, /** * @return {*} */ profile: function(opt_title) { return InjectedScriptHost.callFunction(inspectedWindow.console.profile, inspectedWindow.console, slice(arguments)); }, /** * @return {*} */ profileEnd: function(opt_title) { return InjectedScriptHost.callFunction(inspectedWindow.console.profileEnd, inspectedWindow.console, slice(arguments)); }, /** * @param {!Object} object * @param {!Array.|ssortingng=} opt_types */ monitorEvents: function(object, opt_types) { if (!object || !object.addEventListener || !object.removeEventListener) return; var types = this._normalizeEventTypes(opt_types); for (var i = 0; i < types.length; ++i) { object.removeEventListener(types[i], this._logEvent, false); object.addEventListener(types[i], this._logEvent, false); } }, /** * @param {!Object} object * @param {!Array.|ssortingng=} opt_types */ unmonitorEvents: function(object, opt_types) { if (!object || !object.addEventListener || !object.removeEventListener) return; var types = this._normalizeEventTypes(opt_types); for (var i = 0; i < types.length; ++i) object.removeEventListener(types[i], this._logEvent, false); }, /** * @param {*} object * @return {*} */ inspect: function(object) { return injectedScript._inspect(object); }, copy: function(object) { var string; if (injectedScript._subtype(object) === "node") { string = object.outerHTML; } else if (injectedScript.isPrimitiveValue(object)) { string = toString(object); } else { try { string = JSON.stringify(object, null, " "); } catch (e) { string = toString(object); } } var hints = { copyToClipboard: true, __proto__: null }; var remoteObject = injectedScript._wrapObject(string, "") InjectedScriptHost.inspect(remoteObject, hints); }, clear: function() { InjectedScriptHost.clearConsoleMessages(); }, /** * @param {!Node} node * @return {!Array.|undefined} */ getEventListeners: function(node) { var result = nullifyObjectProto(InjectedScriptHost.getEventListeners(node)); if (!result) return result; /** @this {{type: ssortingng, listener: function(), useCapture: boolean}} */ var removeFunc = function() { node.removeEventListener(this.type, this.listener, this.useCapture); } for (var type in result) { var listeners = result[type]; for (var i = 0, listener; listener = listeners[i]; ++i) { listener["type"] = type; listener["remove"] = removeFunc; } } return result; }, debug: function(fn) { InjectedScriptHost.debugFunction(fn); }, undebug: function(fn) { InjectedScriptHost.undebugFunction(fn); }, monitor: function(fn) { InjectedScriptHost.monitorFunction(fn); }, unmonitor: function(fn) { InjectedScriptHost.unmonitorFunction(fn); }, table: function(data, opt_columns) { InjectedScriptHost.callFunction(inspectedWindow.console.table, inspectedWindow.console, slice(arguments)); }, /** * @param {number} num */ _inspectedObject: function(num) { return InjectedScriptHost.inspectedObject(num); }, /** * @param {!Array.|ssortingng=} types * @return {!Array.} */ _normalizeEventTypes: function(types) { if (typeof types === "undefined") types = ["mouse", "key", "touch", "control", "load", "unload", "abort", "error", "select", "input", "change", "submit", "reset", "focus", "blur", "resize", "scroll", "search", "devicemotion", "deviceorientation"]; else if (typeof types === "ssortingng") types = [types]; var result = []; for (var i = 0; i < types.length; ++i) { if (types[i] === "mouse") push(result, "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"); else if (types[i] === "key") push(result, "keydown", "keyup", "keypress", "textInput"); else if (types[i] === "touch") push(result, "touchstart", "touchmove", "touchend", "touchcancel"); else if (types[i] === "control") push(result, "resize", "scroll", "zoom", "focus", "blur", "select", "input", "change", "submit", "reset"); else push(result, types[i]); } return result; }, /** * @param {!Event} event */ _logEvent: function(event) { inspectedWindow.console.log(event.type, event); } } 

Pour vérifier cela, appuyez simplement sur bound(selector, startNode) c'est un lien actif.

C’est une fonction intégrée à la console:

https://developer.chrome.com/devtools/docs/commandline-api