¿Qué significa == $ 0 (doble igual dólar cero) en las Herramientas para desarrolladores de Chrome?

310

En las herramientas para desarrolladores de Google Chrome, cuando selecciono un elemento, veo al ==$0lado del elemento seleccionado. Qué significa eso?

Captura de pantalla

google-chrome google-chrome-devtools code-inspection oneNiceFriend
fuente
28
Es el ID del nodo DOM seleccionado. intente seleccionar cualquier nodo y escriba $0en la consola y vea lo que aparece;)
punto muerto
33
Es muy confuso Parece que alguien escribió algo de JavaScript que olvidó poner en una etiqueta de script. Pasé unos buenos diez minutos tratando de descubrir dónde había estropeado mi código ...
Kip
2
consulte siguiente developer.chrome.com/devtools/docs/commandline-api#0-4
Mukesh
2
Creo que solo el color de fondo diferente en la línea en la que se hizo clic debería ser suficiente ... No veo la necesidad de agregar == $ 0 a la fuente html ... Mala idea. Chrome doind Chrome-ish cosas.
Sergio Abreu
developers.google.com/web/tools/chrome-devtools/console/…
Pacerier

Respuestas:

286

Es el último índice de nodo DOM seleccionado. Chrome asigna un índice a cada nodo DOM que seleccione. Por $0lo tanto , siempre apuntará al último nodo que seleccionó, mientras que $1apuntará al nodo que seleccionó antes. Piense en ello como una pila de nodos seleccionados más recientemente.

Como ejemplo, considere lo siguiente

<div id="sunday"></div>
<div id="monday"></div>
<div id="tuesday"></div>

Ahora abrió la consola de devtools y seleccionó #sunday, #mondayy #tuesdayen el orden mencionado, obtendrá identificadores como:

$0 -> <div id="tuesday"></div> 
$1 -> <div id="monday"></div>
$2 -> <div id="sunday"></div>

Nota: Puede ser útil saber que el nodo se puede seleccionar en sus scripts (o consola), por ejemplo, un uso popular para esto es el selector de elemento angular, por lo que simplemente puede elegir su nodo y ejecutar esto:

angular.element($0).scope()

Voila tienes acceso al alcance del nodo a través de la consola.

punto muerto
fuente
99
¿Cuál es el uso / beneficio de esto?
joe_young
66
Creo que puede ser útil en la depuración. La capacidad de acceder al elemento inspeccionado utilizando un selector simple puede ayudar en muchas situaciones durante la depuración.
punto muerto
66
Entonces, ¿qué bien se muestra siempre == $0en la interfaz de usuario? Cualquiera que sepa $0ya sabrá qué elemento es, y no tiene sentido para cualquiera que no lo sepa.
BlueRaja - Danny Pflughoeft
66
@joe_young, creo que el beneficio es poder acceder rápidamente a los elementos de la consola al modificar las cosas. ¡Aquí hay un video que armé para demostrarlo! youtu.be/AKLdx8z6aDk
RoccoB
1
@LucaDeNardi Sí, es perjudicial en la producción y cada desarrollador Angular agrega esta línea: - $ compileProvider.debugInfoEnabled (falso); en la configuración de su aplicación, para aumentar el rendimiento. Sin embargo, puede ejecutar fácilmente angular.reloadWithDebugInfo (); en la consola para depurar cuando sea necesario.
Varun Sharma
57

$ 0 devuelve el elemento u objeto JavaScript seleccionado más recientemente, $ 1 devuelve el segundo elemento seleccionado más recientemente, y así sucesivamente.

Consulte: Referencia de la API de línea de comandos

Ani Menon
fuente
26

Las otras respuestas aquí explican claramente qué significa. Me gusta explicar su uso.

Puede seleccionar un elemento en la elementspestaña y cambiar a la consolepestaña en Chrome. Simplemente escriba $0 or $1o cualquier número y presione Entrar y el elemento se mostrará en la consola para su uso.

captura de pantalla de las herramientas de desarrollo de Chrome

Siva Prakash
fuente
13

Esta es la sugerencia de Chrome para decirle que si escribe $ 0 en la consola, será equivalente a ese elemento específico.

Internamente, Chrome mantiene una pila, donde $ 0 es el elemento seleccionado, $ 1 es el elemento que se seleccionó por última vez, $ 2 sería el que se seleccionó antes de $ 1 y así sucesivamente.

Estas son algunas de sus aplicaciones:

  • Acceso a elementos DOM desde la consola: $ 0
  • Accediendo a sus propiedades desde la consola: $ 0.parentElement
  • Actualización de sus propiedades desde la consola: $ 1.classList.add (...)
  • Actualización de elementos CSS desde la consola: $ 0.styles.backgroundColor = "aqua"
  • Activación de eventos CSS desde la consola: $ 0.click ()
  • Y haciendo cosas mucho más complejas, como: $ 0.appendChild (document.createElement ("div"))

Mira todo esto en acción:

ingrese la descripción de la imagen aquí

Declaración de respaldo:

Sí, estoy de acuerdo en que hay mejores formas de realizar estas acciones, pero esta característica puede resultar útil en ciertos escenarios complejos , como cuando se debe hacer clic en un elemento DOM, pero no es posible hacerlo desde la interfaz de usuario porque está cubierto por otros elementos o, por alguna razón, no es visible en la interfaz de usuario en ese momento.

Sagar
fuente
2

Diré que es solo una sintaxis abreviada para obtener referencia del elemento html durante el tiempo de depuración, normalmente este tipo de tarea se realizará mediante este método

document.getElementById , document.getElementsByClassName , document.querySelector

Por lo tanto, hacer clic en un elemento html y obtener una variable de referencia ($ 0) en la consola es un gran ahorro de tiempo durante el día

malbarmavi
fuente