Funciones y selectores de la utilidad de herramientas de consola

Console Utilities API contiene una colección de variables y funciones útiles para realizar tareas comunes, como:

• Selección e inspección de elementos DOM.
• Mostrar datos en un formato legible.
• Detener e iniciar el generador de perfiles.
• Supervisión de eventos DOM.

Estas variables y funciones solo funcionan si se escriben directamente en la consola de DevTools; no puede usar las variables y llamar a las funciones desde scripts.

Resumen

Variable o función	Descripción
Expresión evaluada recientemente: $_	Devuelve el valor de la expresión evaluada más recientemente.
Elemento seleccionado recientemente o objeto de JavaScript: $0-$4	Devuelve un elemento o un objeto JavaScript seleccionados recientemente.
Selector de consultas: $(selector)	Selector de consultas; devuelve la referencia al primer elemento DOM con el selector CSS especificado, como document.querySelector().
Selector de consultas all: $$(selector, [startNode])	Selector de consultas all; devuelve una matriz de elementos que coinciden con el selector CSS especificado, como document.querySelectorAll().
XPath: $x(path, [startNode])	Devuelve una matriz de elementos DOM que coinciden con la expresión XPath especificada.
clear()	Borra la consola de su historial.
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(object)	Muestra una lista de estilo de objeto de todas las propiedades del objeto especificado, como console.dir().
dirxml(object)	Imprime una representación XML del objeto especificado, como se muestra en la herramienta Elementos , como console.dirxml().
inspect(object/function)	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 agentes de escucha 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([nombre])	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 al 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, a continuación, 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 código siguiente en la consola y, a continuación, presione Entrar:

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

   La expresión evaluada es una matriz de nombres.

3. Escriba el código siguiente en la consola y presione Entrar:

   $_.length
   

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

4. Escriba el código siguiente en la consola y presione Entrar:

   $_
   

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

   

Elemento seleccionado recientemente o objeto de JavaScript: $0-$4

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

$0 devuelve el elemento seleccionado más recientemente o el objeto JavaScript, $1 devuelve el segundo seleccionado más recientemente, etc. Las $0variables , $1, $2, $3y $4 funcionan como una referencia histórica a los últimos cinco elementos DOM que se inspeccionaron dentro de la herramienta Elements o a los cinco últimos objetos de montón de JavaScript seleccionados 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 consultas: $(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 de 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 primario en el que buscar. El valor predeterminado del parámetro es document, lo que significa que se busca toda la página web de forma predeterminada. Al especificar un elemento primario, 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 en el primer ul elemento se vuelve atruear:

   

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

$$() devuelve una lista de elementos que coinciden con el selector 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 primario en el que buscar. El valor predeterminado del parámetro es document, lo que significa que se busca toda la página web de forma predeterminada. Al especificar un elemento primario, 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 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:

   

De forma similar a los demás comandos selectores, $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 historial.

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 el 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) se pausa dentro de la función function especificada en la herramienta Orígenes , cuando se llama a esa función.

Después de pausar el depurador, puede recorrer el código 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 quiera 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 prueba en el campo Agregar un texto de tarea y, a continuación, presione Entrar.

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

   

Use undebug(function) para dejar de interrumpir la función o use 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(object)

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

Esta función es un alias para 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 presione Entrar.

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

3. Escriba dir(document.head) y presione Entrar.

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

   

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

dirxml(object)

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

Esta función es equivalente a console.dirxml().

Sintaxis

dirxml(object)

inspect(object/function)

inspect(element/function) abre y selecciona el elemento DOM especificado en la herramienta Elements o la función JavaScript especificada en la herramienta Sources .

• 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 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 presione Entrar.

   Se abre la herramienta Elementos y el <body> elemento está seleccionado:

   

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

getEventListeners(object)

getEventListeners(object) devuelve los agentes de escucha de eventos registrados en el objeto especificado.

El valor devuelto es un objeto que contiene una matriz para cada tipo de evento registrado (como click 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 presione Entrar.

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

   

Si hay más de un agente de escucha registrado en el objeto especificado, la matriz contiene un miembro para cada agente de escucha. En la ilustración siguiente, se registran dos agentes de escucha 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, vea 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 denominado player1, que contiene dos propiedades.

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

   

4. Para obtener los valores de las propiedades que pertenecen al player1 objeto, escriba values(player1) en la herramienta Consola y 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 iniciar la supervisión de la sum función, escriba monitor(sum) en la herramienta Consola y, a continuación, 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 pasados 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 asignados a una colección predefinida de eventos.

Sintaxis

monitorEvents(object[, events])

Ejemplo 1

Para supervisar un único 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 de ventana.

3. Cambie el tamaño de la ventana, por ejemplo, haciendo de DevTools más grande o más pequeño. Los eventos de cambio de tamaño 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 tanto scroll los eventos como resize los eventos en el objeto de ventana.

3. Cambie el tamaño de la ventana, por ejemplo, haciendo que sea más corta y, a continuación, desplácese en 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 mediante uno de los conjuntos predefinidos de eventos. 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	"blur", "change", "focus", "reset", "resize", "scroll", "select", "submit", "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 de ventana.

3. En la página web representada, presione las teclas . 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 generar perfiles en una nueva pestaña o ventana. 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 algún tiempo, escriba profileEnd("My profile")y, a continuación, presione Entrar.

   Los resultados del perfil aparecen en la herramienta Rendimiento :

   

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

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

profileEnd([nombre])

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, vea profile([nombre]), anterior.

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 presione Entrar:

   

Otros ejemplos:

• Use queryObjects(Promise) para devolver todas las instancias de Promise objetos si la página web usa Promise objetos.
• Use 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 para 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. Escriba el código siguiente en la consola y, a continuación, presione 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 denominado names, que contiene dos propiedades.

3. Para mostrar el names objeto como una tabla, escriba table(names) en la consola y 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 pausa en la función.

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

Sintaxis

undebug(function)

unmonitor(function)

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

Para obtener más información, consulte monitor(function), anteriormente.

Sintaxis

unmonitor(function)

unmonitorEvents(object[, events])

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

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

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), anterior.

Sintaxis

values(object)

Ejemplo

Consulte el ejemplo anterior en keys(object).

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().

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.