Selectores y funciones de utilidad de herramienta de consola

La API de utilidades de consola contiene un conjunto de variables y funciones convenientes para realizar tareas comunes, como:

• Selección e inspección de elementos DOM a través de selectores CSS.
• Mostrar los datos en un formato legible.
• Detener e iniciar el generador de perfiles.
• Supervisión de eventos DOM.

Estas variables y funciones solo funcionan escribiéndolas directamente en la consola de DevTools; No puede usar las variables y llamar a las funciones desde scripts.

Resumen

Variable o función	Description
Expresión evaluada recientemente: $_	Devuelve el valor de la expresión evaluada más recientemente.
Elemento seleccionado recientemente u objeto JavaScript: $0-$4	Devuelve un elemento o objeto JavaScript seleccionado recientemente.
Selector de consulta: $(selector)	Selector de consultas; devuelve la referencia al primer elemento DOM con el selector CSS especificado, como document.querySelector().
Selector de consultas todo: $$(selector, [startNode])	Selector de consultas todo; devuelve una matriz de elementos que coinciden con el selector de CSS especificado, como document.querySelectorAll().
XPath: $x(path, [startNode])	Devuelve una matriz de elementos DOM que coinciden con la expresión XPath especificada.
clear()	Limpia la consola de su historia.
copy(object)	Copia una representación de cadena del objeto especificado en el Portapapeles.
debug(function)	Cuando se llama a la función especificada, se invoca al depurador y se interrumpe dentro de la función en el panel Orígenes.
dir(objeto)	Muestra una lista de estilos de objeto de todas las propiedades del objeto especificado, como console.dir().
dirxml(objeto)	Imprime una representación XML del objeto especificado, tal como se muestra en la herramienta Elementos , como console.dirxml().
inspeccionar(objeto/función)	Abre y selecciona el elemento DOM especificado en la herramienta Elementos o el objeto de montón de JavaScript especificado en la herramienta Memoria .
getEventListeners(object)	Devuelve los detectores de eventos registrados en el objeto especificado.
keys(object)	Devuelve una matriz que contiene los nombres de las propiedades que pertenecen al objeto especificado.
monitor(function)	Registra un mensaje en la consola que indica el nombre de la función, junto con los argumentos pasados a la función como parte de una solicitud.
monitorEvents(object[, events])	Cuando se produce uno de los eventos especificados en el objeto especificado, el objeto de evento se registra en la consola.
profile([name])	Inicia una sesión de generación de perfiles de CPU de JavaScript con un nombre opcional.
profileEnd([name])	Completa una sesión de generación de perfiles de CPU de JavaScript y muestra los resultados en la herramienta Rendimiento .
queryObjects(constructor)	Devuelve una matriz de los objetos creados por el constructor especificado.
table(data[, columns])	Registra los datos del objeto, con formato de tabla con encabezados de columna, para el objeto de datos especificado.
undebug(function)	Detiene la depuración de la función especificada, de modo que cuando se solicita la función, ya no se invoca el depurador.
unmonitor(function)	Detiene la supervisión de la función especificada.
unmonitorEvents(object[, events])	Detiene la supervisión de eventos para el objeto y los eventos especificados.
values(object)	Devuelve una matriz que contiene los valores de todas las propiedades que pertenecen al objeto especificado.

Expresión evaluada recientemente: $_

$_ Devuelve el valor de la expresión evaluada más recientemente.

Sintaxis:

$_

Ejemplo 1

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba la expresión 2+2y presione Entrar.

   Se evalúa la expresión y se muestra el resultado. La $_ variable también se establece en el resultado de la expresión.

3. Escriba $_y, a continuación, presione Entrar:

   

Ejemplo 2

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. Pegue el siguiente código en la consola y, a continuación, presione Entrar:

   ["john", "paul", "george", "ringo"]
   

   La expresión evaluada es una matriz de nombres.

3. Escribe el siguiente código en la consola y presiona Entrar:

   $_.length
   

   La expresión $_.length se evalúa y 4 se muestra en la Consola porque $_ hace referencia a la expresión evaluada previamente, que es la matriz de nombres. $_.length es la longitud de la matriz de nombres.

4. Escribe el siguiente código en la consola y presiona Entrar:

   $_
   

   $_ siempre hace referencia a la expresión evaluada anteriormente, que ahora es el número 4.

   

Elemento seleccionado recientemente u objeto JavaScript: $0-$4

$0, $1, $2, $3, y $4 devuelven elementos seleccionados u objetos JavaScript recientemente.

$0 devuelve el elemento seleccionado más recientemente o el objeto JavaScript, $1 devuelve el segundo seleccionado más recientemente, y así sucesivamente. Las $0variables , $1, $3$2, y funcionan $4 como una referencia histórica a los últimos cinco elementos del DOM que se inspeccionaron en la herramienta Elementos o a los últimos cinco objetos de montón de JavaScript que se seleccionaron en la herramienta Memoria.

Sintaxis

$0

Ejemplo

1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

2. En la herramienta Elementos , seleccione un elemento, por ejemplo, un <input> elemento.

3. Abra la herramienta Consola en el panel Vista rápida , en la parte inferior de DevTools.

4. Escriba $0 la herramienta Consola y presione Entrar.

   La $0 variable devuelve el elemento seleccionado <input> :

   

5. Seleccione un elemento diferente en la herramienta Elementos , por ejemplo, un <div> elemento.

6. En la herramienta Consola , escriba $0y, a continuación, presione Entrar.

   $0 hace referencia al elemento recién seleccionado, que es el <div> elemento.

7. Escriba $1y presione Entrar.

   $1 hace referencia al elemento seleccionado anteriormente, que es el <input> elemento:

   

Selector de consulta: $(selector)

$(selector) devuelve la referencia al primer elemento DOM que coincide con el selector selectorCSS especificado.

Esta función es similar a la función document.querySelector().

Si usa una biblioteca como jQuery que usa $, la funcionalidad se sobrescribe y $ corresponde a la implementación de esa biblioteca.

Sintaxis

$(selector, [parentElement])

Ejemplo 1

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba $('input'). Se muestra el primer elemento que coincide con el input selector CSS:

   

3. Haga clic con el botón derecho en el resultado devuelto y, a continuación, seleccione Mostrar en el Panel Elementos para encontrarlo en el DOM, o desplácese hasta ver para mostrarlo en la página.

Ejemplo 2

La $() función acepta un segundo parámetro, parentElement, que especifica un elemento principal en el que buscar. El valor predeterminado del parámetro es document, lo que significa que se busca en toda la página web de forma predeterminada. Al especificar un elemento principal, puede buscar elementos dentro de una parte específica de la página web.

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba $('input', $('ul'))

   El primer elemento que coincide con el input selector CSS encontrado dentro del primer ul elemento se vuelve a ejecutar:

   

Selector de consultas todo: $$(selector, [startNode])

$$() devuelve una lista de elementos que coinciden con el selector de CSS especificado, como document.querySelectorAll().

Esta función es similar a document.querySelectorAll() pero devuelve un array elemento of, en lugar de un NodeList.

Sintaxis

$$(selector, [parentElement])

Ejemplo 1

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba $$('button'). Se muestran todos los <button> elementos de la página web:

   

Ejemplo 2

Esta $$() función también admite un segundo parámetro, parentElement, que especifica un elemento principal en el que buscar. El valor predeterminado del parámetro es document, lo que significa que se busca en toda la página web de forma predeterminada. Al especificar un elemento principal, puede buscar elementos dentro de una parte específica de la página web.

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba $$('button', $('li.task')). Se muestran todos los <button> elementos que son descendientes del primer <li class="task"> elemento:

   

XPath: $x(path, [startNode])

$x(path) devuelve una matriz de elementos DOM que coinciden con la expresión pathXPath especificada.

Sintaxis

$x(path, [parentElement])

Ejemplo 1

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba $x("//li"). Se muestran todos los <li> elementos de la página web:

   

Ejemplo 2

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba $x("//li[button]"). Se muestran todos los <li> elementos que contienen <button> elementos:

   

Al igual que los otros comandos del selector, $x(path) tiene un segundo parámetro opcional, parentElement, que especifica un elemento o nodo en el que buscar elementos.

clear()

clear() borra la consola de su historia.

Sintaxis

clear()

Ejemplo

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. Para crear un historial en la herramienta Consola , escriba varias expresiones de JavaScript. Por ejemplo:

   for (let i = 0; i < 10; i++) {
       console.log(i);
   }
   

3. Para borrar el historial, escriba clear() la herramienta Consola y presione Entrar:

   

copy(object)

copy(object) Copia una representación de cadena del objeto especificado en el Portapapeles.

Sintaxis

copy(object)

Ejemplo

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. Escriba el código siguiente en la herramienta Consola y, a continuación, presione Entrar:

   copy($$('*').map(element => element.tagName));
   

   El fragmento de código selecciona todos los elementos de la página web mediante la $$(selector) función y, a continuación, asigna la tagName propiedad de cada elemento a una matriz. A continuación, la matriz se copia en el portapapeles mediante la copy() función.

3. Pegue el contenido del Portapapeles en un editor de texto. El contenido del portapapeles es una lista de todas las etiquetas HTML de la página web, por ejemplo:

   ["HTML", "HEAD", "META", "TITLE", "LINK", "BODY", "H1", "FORM", "DIV", "LABEL", ...]
   

debug(function)

debug(function) pausas dentro de la función function especificada en la herramienta Orígenes , cuando se llama a esa función.

Una vez pausado el depurador, puede recorrer el código paso a paso y depurarlo.

Sintaxis

debug(function)

Ejemplo

1. Abra una nueva pestaña o ventana y, a continuación, vaya a una página que contenga una función de JavaScript que desea depurar. Por ejemplo, vaya a la página de demostración de la aplicación TODO .

2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

3. En la herramienta Consola , escriba debug(updateList).

4. En la página web representada, agregue un nuevo elemento TODO a la lista escribiendo test en el campo de texto Agregar una tarea y, a continuación, presionando Entrar.

   El depurador hace una pausa dentro de la updateList() función en la herramienta Orígenes :

   

Úsalo undebug(function) para detener la interrupción de la función o usa la interfaz de usuario para desactivar todos los puntos de interrupción.

Para obtener más información sobre los puntos de interrupción, vea Pausar el código con puntos de interrupción.

dir(objeto)

dir(object) Muestra una lista de estilos de objeto de todas las propiedades del objeto especificado, como console.dir().

Esta función es un alias de console.dir().

Sintaxis

dir(object)

Ejemplo

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba document.head y, a continuación, presione Entrar.

   Se muestra una representación HTML del <head> elemento.

3. Entrar dir(document.head) y presionar Entrar.

   Se muestra una lista de estilos de objeto de todas las propiedades <head> del elemento:

   

Para obtener más información, consulte console.dir() en la API de Console.

dirxml(objeto)

dirxml(object) imprime una representación XML del objeto especificado, como se muestra en la herramienta Elementos , como console.dirxml().

Esta función equivale a console.dirxml().

Sintaxis

dirxml(object)

inspeccionar(objeto/función)

inspect(element/function) abre y selecciona el elemento DOM especificado en la herramienta Elementos o la función de JavaScript especificada en la herramienta Orígenes .

• Para un elemento DOM, esta función se abre y selecciona el elemento DOM especificado en la herramienta Elementos .
• Para una función de JavaScript, esta función abre la función de JavaScript especificada en la herramienta Orígenes .

Sintaxis

inspect(element/function)

Ejemplo

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba inspect(document.body) y, a continuación, presione Entrar.

   Se abre la herramienta Elementos y se selecciona el <body> elemento:

   

Al pasar una función para inspeccionar, la función abre la página web en la herramienta Orígenes para que la inspeccione.

getEventListeners(object)

getEventListeners(object) Devuelve los detectores de eventos registrados en el objeto especificado.

El valor devuelto es un objeto que contiene una matriz para cada tipo de evento registrado (por click ejemplo, o keydown). Los elementos de cada matriz son objetos que describen el agente de escucha registrado para cada tipo.

Sintaxis

getEventListeners(object)

Ejemplo

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba getEventListeners($('form')) y, a continuación, presione Entrar.

   Se muestran los escuchas de eventos registrados en el primer <form> elemento:

   

Si se registra más de un agente de escucha en el objeto especificado, la matriz contiene un miembro para cada agente de escucha. En la siguiente figura, se registran dos oyentes de eventos en el document elemento para el click evento:

keys(object)

keys(object) Devuelve una matriz que contiene los nombres de las propiedades que pertenecen al objeto especificado.

Para obtener los valores asociados de las mismas propiedades, consulte values(object), a continuación.

Sintaxis

keys(object)

Ejemplo

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba el código siguiente y, a continuación, presione Entrar:

   var player1 = {"name": "Ted", "level": 42}
   

   El fragmento de código anterior define un objeto en el espacio de nombres global llamado player1, que contiene dos propiedades.

3. Para obtener los nombres de las propiedades que pertenecen al objeto, escriba keys(player1) en la herramienta Consola y, a player1 continuación, presione Entrar:

   

4. Para obtener los valores de las propiedades que pertenecen al objeto, ingrese values(player1) en la herramienta Consola y, a player1 continuación, presione Entrar:

   

monitor(function)

monitor(function) registra un mensaje en la consola cada vez que se llama a la función especificada. El mensaje indica el nombre de la función y los argumentos pasados a la función.

Sintaxis

monitor(function)

Ejemplo

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba el código siguiente y presione Entrar:

   function sum(x, y) {
     return x + y;
   }
   

   El fragmento de código anterior define una función denominada sum, que acepta dos argumentos.

3. Para comenzar a monitorear la sum función, ingrese monitor(sum) la herramienta Consola y luego presione Entrar:

4. Para llamar a la función, escriba sum(1, 2) y presione Entrar. Aparece un mensaje que indica que se llamó a la sum función y los argumentos se pasaron a la función:

   

Para finalizar la supervisión, use unmonitor(function).

monitorEvents(object[, events])

monitorEvents(object[, events]) registra un objeto de evento en la consola cada vez que se producen los eventos especificados en el objeto especificado.

Puede especificar un único evento para supervisar, una matriz de eventos o uno de los tipos de eventos genéricos que se asignan a una colección predefinida de eventos.

Sintaxis

monitorEvents(object[, events])

Ejemplo 1

Para supervisar un solo evento:

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba el código siguiente y presione Entrar:

   monitorEvents(window, "resize");
   

   El fragmento de código anterior supervisa todos los eventos de cambio de tamaño en el objeto window.

3. Cambiar el tamaño de la ventana, por ejemplo, haciendo que DevTools sea más grande o más pequeño. Cambiar el tamaño de los eventos aparecen en la herramienta Consola :

   

Ejemplo 2

Para supervisar varios eventos:

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba el código siguiente y presione Entrar:

   monitorEvents(window, ["resize", "scroll"]);
   

   El fragmento de código anterior define una matriz de nombres de eventos para supervisar ambos resize y scroll eventos en el objeto window.

3. Cambie el tamaño de la ventana, por ejemplo, haciéndola más corta, y luego desplácese por la página web representada. Los eventos de cambio de tamaño y desplazamiento aparecen en la herramienta Consola :

   

Ejemplo 3

También puede especificar una colección de eventos utilizando uno de los conjuntos de eventos predefinidos. En la tabla siguiente se muestran los tipos de eventos disponibles y las asignaciones de eventos asociadas:

Tipo de evento	Eventos asignados correspondientes
mouse	"Click", "DblClick", "MouseDown", "MouseMove", "MouseOut", "MouseOver", "MouseUp", "MouseWheel"
key	"keydown", "keypress", "keyup", "textInput"
touch	"touchcancel", "touchend", "touchmove", "touchstart"
control	"Desenfocar", "cambiar", "enfocar", "restablecer", "cambiar tamaño", "desplazarse", "seleccionar", "enviar", "zoom"

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. En la herramienta Consola , escriba el código siguiente y presione Entrar:

   monitorEvents(window, "key");
   

   El fragmento de código anterior supervisa todos los eventos de teclado en el objeto window.

3. En la página web representada, presione cualquier tecla. Los eventos de teclado aparecen en la herramienta Consola :

   

profile([name])

profile([name]) inicia una sesión de generación de perfiles de CPU de JavaScript con un nombre opcional.

Para completar el perfil y mostrar los resultados en la herramienta Rendimiento, llame a profileEnd([name]).

Sintaxis

profile([name])

Ejemplo

1. Abra la página de la que desea crear el perfil en una pestaña o ventana nueva. Por ejemplo, vaya a la página de demostración Animación lenta .

2. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

3. Para iniciar la generación de perfiles, en la herramienta Consola , escriba profile("My profile)y, a continuación, presione Entrar.

4. Para detener la generación de perfiles, una vez transcurrido un tiempo, escriba profileEnd("My profile")y presione Entrar.

   Los resultados del perfil aparecen en la herramienta Rendimiento :

   

Puede crear varios perfiles al mismo tiempo y no es necesario finalizar cada uno de los perfiles en orden de creación. Por ejemplo, el código siguiente crea dos perfiles y, a continuación, los termina en el orden opuesto:

profile('A');
profile('B');
profileEnd('B');
profileEnd('A');

profileEnd([name])

profileEnd([name]) completa una sesión de generación de perfiles de CPU de JavaScript y muestra los resultados en la herramienta Rendimiento .

Para llamar a esta función, debe ejecutar la función profile([name]).

Sintaxis

profileEnd([name])

Para obtener más información, consulte perfil ([nombre]), arriba.

queryObjects(constructor)

queryObjects(constructor) Devuelve una matriz de los objetos creados por el constructor especificado.

El ámbito de es el contexto de tiempo de queryObjects() ejecución seleccionado actualmente en la Consola.

Sintaxis

queryObjects(constructor)

Ejemplo

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. Para devolver todas las instancias de elementos HTML, escriba queryObjects(HTMLElement) en la herramienta Consola y, a continuación, presione Entrar:

   

Otros ejemplos:

• Se usa queryObjects(Promise) para devolver todas las instancias de Promise objetos si la página web usa Promise objetos.
• Se usa queryObjects(ClassName) para devolver todas las instancias de la clase si la ClassName página web usa clases de JavaScript.

table(data[, columns])

table(data[, columns]) registra los datos del objeto, con formato de tabla con encabezados de columna, para el objeto de datos especificado.

Esta función es un alias de console.table().

Sintaxis

table(data[, columns])

Ejemplo

Para mostrar una lista de nombres de personas como una tabla, en la consola:

1. Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola se abre en DevTools, junto a la página web.

2. Escribe el siguiente código en la consola y, a continuación, presiona Entrar:

   var names = {
     0: {
       firstName: "John",
       lastName: "Smith"
     },
     1:  {
       firstName: "Jane",
       lastName: "Doe"
     }
   };
   

   El fragmento de código anterior define un objeto en el espacio de nombres global llamado names, que contiene dos propiedades.

3. Para mostrar el names objeto como una tabla, escriba table(names) en la consola y, a continuación, presione Entrar:

   

undebug(function)

undebug(function) Detiene la depuración de la función especificada, de modo que cuando se ejecuta la función, el depurador ya no se detiene en la función.

Para obtener más información, vea debug(function), arriba.

Sintaxis

undebug(function)

unmonitor(function)

unmonitor(function) Detiene la supervisión de la función especificada.

Para obtener más información, vea monitor(function), arriba.

Sintaxis

unmonitor(function)

unmonitorEvents(object[, events])

unmonitorEvents(object[, events]) Detener la supervisión de eventos para el objeto y los eventos especificados.

Para obtener más información, vea monitorEvents(object[, events]), más arriba.

Sintaxis

unmonitorEvents(object[, events])

values(object)

values(object) Devuelve una matriz que contiene los valores de todas las propiedades que pertenecen al objeto especificado.

Para obtener las claves asociadas de las mismas propiedades, consulte keys(object), arriba.

Sintaxis

values(object)

Ejemplo

Consulta el ejemplo de keys(object), más arriba.

Vea también

• Referencia de características de la consola
• Referencia de API de objeto de - console.* consola funciones, como console.log() y console.error().

Nota:

Algunas partes de esta página son modificaciones que se basan en trabajo creado y compartido por Google y que se usan de acuerdo con los términos descritos en la Licencia internacional de Creative Commons Atribution 4.0. La página original se encuentra aquí y está escrita por Kayce Basques.

Este trabajo está bajo una licencia Creative Commons Attribution 4.0 International.