Referencia de la API de Console Utilities

let images = $$('img');
for (let each of images) {
  console.log(each.src);
}

<img> elementos
que aparecen en el documento actual después del nodo seleccionado:
let images = $$('img', document.querySelector('.devsite-header-background'));
for (let each of images) {
  console.log(each.src);
}





$x(path [, startNode])

$x(path) devuelve un array de elementos DOM que coinciden con la expresión XPath determinada.

Por ejemplo, lo siguiente devuelve todos los elementos <p> de la página:
$x("//p")



En el siguiente ejemplo, se devuelven todos los <p> elementos que contienen <a> elementos:
$x("//p[a]")



Al igual que las otras funciones de selector, $x(path) tiene un segundo parámetro opcional, startNode, que especifica un elemento o un nodo desde el cual buscar elementos.



clear()

clear() borra el historial de la consola.
clear();

copy(object)

copy(object) copia una representación de cadena del objeto especificado en el portapapeles.
copy($0);

debug(function)

Cuando se llama a la función especificada, se invoca el depurador y se interrumpe dentro de la función en el panel Sources , lo que permite recorrer el código y depurarlo.
debug(getData);



Usa undebug(fn) para dejar de interrumpir la función o usa la IU para inhabilitar todos los puntos de interrupción.

Para obtener más información sobre los puntos de interrupción, consulta Cómo 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. Este método es un acceso directo para el método console.dir() de la API de Console.

En el siguiente ejemplo, se muestra la diferencia entre evaluar document.body directamente en la línea de comandos y usar dir() para mostrar el mismo elemento:
document.body;
dir(document.body);



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

dirxml(object)

dirxml(object) imprime una representación XML del objeto especificado, como se ve en el panel Elements.
Este método equivale al console.dirxml() método.

inspect(object/function)

inspect(object/function) abre y selecciona el elemento o el objeto especificado en el panel adecuado: el panel Elements para elementos DOM o el panel Profiles para objetos de montón de JavaScript.

En el siguiente ejemplo, se abre document.body en el panel Elements:
inspect(document.body);



Cuando pasas una función para inspeccionar, la función abre el documento en el panel Sources para que lo inspecciones.

getEventListeners(object)

getEventListeners(object) devuelve los objetos de escucha de eventos registrados en el objeto especificado. El valor que se muestra es un objeto que contiene un array para cada tipo de evento registrado (por ejemplo, click o keydown). Los miembros de cada array son objetos que describen el objeto de escucha registrado para cada tipo. Por ejemplo, lo siguiente muestra todos los objetos de escucha de eventos registrados en el objeto del documento:
getEventListeners(document);



Si se registra más de un objeto de escucha en el objeto especificado, el array contiene un miembro para cada objeto de escucha. En el siguiente ejemplo, hay dos objetos de escucha de eventos registrados en el elemento del documento para el evento click:



Puedes expandir cada uno de estos objetos para explorar sus propiedades:



Para obtener más información, consulta Cómo inspeccionar las propiedades de los objetos.

keys(object)

keys(object) devuelve un array que contiene los nombres de las propiedades que pertenecen al objeto especificado. Para obtener los valores asociados de las mismas propiedades, usa values().

Por ejemplo, supongamos que tu aplicación definió el siguiente objeto:
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

Si se supone que player se definió en el espacio de nombres global (para simplificar), escribir keys(player) y
values(player) en la Console genera lo siguiente:



monitor(function)

Cuando se llama a la función especificada, se registra un mensaje en la consola que indica el nombre de la función junto con los argumentos que se le pasan cuando se la llama.
function sum(x, y) {
  return x + y;
}
monitor(sum);



Usa unmonitor(function) para detener la supervisión.

monitorEvents(object [, events])

Cuando ocurre uno de los eventos especificados en el objeto especificado, el objeto Event se registra en la consola. Puedes especificar un solo evento para supervisar, un array de eventos o uno de los eventos genéricos "tipos" asignados a una colección predefinida de eventos. Consulta los ejemplos que se mencionan a continuación.

Lo siguiente supervisa todos los eventos de cambio de tamaño en el objeto de la ventana.
monitorEvents(window, "resize");



Lo siguiente define un array para supervisar los eventos "resize" y "scroll" en el objeto de la ventana:
monitorEvents(window, ["resize", "scroll"])

También puedes especificar uno de los "tipos" de eventos disponibles, cadenas que se asignan a conjuntos predefinidos de eventos. En la siguiente tabla, se enumeran los tipos de eventos disponibles y sus asignaciones de eventos asociadas:

Tipo de evento y eventos asignados correspondientes
ratón
"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
clave
"keydown", "keyup", "keypress", "textInput"
táctil
"touchstart", "touchmove", "touchend", "touchcancel"
control
"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

Por ejemplo, lo siguiente usa el tipo de evento "key" todos los eventos clave correspondientes en un campo de texto de entrada seleccionado actualmente en el panel Elements.
monitorEvents($0, "key");

A continuación, se muestra un resultado de ejemplo después de escribir caracteres en el campo de texto:



Usa unmonitorEvents(object[, events]) para detener la supervisión.

profile([name]) y profileEnd([name])

profile() inicia una sesión de generación de perfiles de CPU de JavaScript con un nombre opcional. profileEnd()
completa el perfil, abre automáticamente el panel Performance y muestra los resultados en la pista Main.



Para iniciar la generación de perfiles, sigue estos pasos:
profile("Profile 1")

Para detener la generación de perfiles y ver los resultados en la pista Performance > Main , sigue estos pasos:
profileEnd("Profile 1")

Resultado en la pista Performance > Main:



Los perfiles también se pueden anidar. Por ejemplo, esto funcionará en cualquier orden:
profile('A');
profile('B');
profileEnd('A');
profileEnd('B');



queryObjects(Constructor)

Llama a queryObjects(Constructor) desde la consola para devolver un array de objetos que se crearon con el constructor especificado. Por ejemplo:


queryObjects(Promise). Devuelve todas las instancias de Promise.
queryObjects(HTMLElement). Devuelve todos los elementos HTML.
queryObjects(foo), donde foo es un nombre de clase. Devuelve todos los objetos que se crearon a través de new foo().


El alcance de queryObjects() es el contexto de ejecución seleccionado actualmente en la consola.

table(data [, columns])

Registra los datos del objeto con formato de tabla pasando un objeto de datos con encabezados de columna opcionales.
Este es un acceso directo para console.table().

Por ejemplo, para mostrar una lista de nombres con una tabla en la consola, harías lo siguiente:
let names = [
  { firstName: "John", lastName: "Smith" },
  { firstName: "Jane", lastName: "Doe" },
];
table(names);



Para copiar una tabla registrada en el portapapeles como una tabla de Markdown con formato o datos CSV, haz clic con el botón derecho en la tabla de la Console y selecciona la opción de copia correspondiente en el menú contextual.

undebug(function)

undebug(function) detiene la depuración de la función especificada para que, cuando se llame a la función, ya no se invoque el depurador. Esto se usa en conjunto con debug(fn).
undebug(getData);

unmonitor(function)

unmonitor(function) detiene la supervisión de la función especificada. Esto se usa en conjunto con monitor(fn).
unmonitor(getData);

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) detiene la supervisión de eventos para el objeto y los eventos especificados. Por ejemplo, lo siguiente detiene toda la supervisión de eventos en el objeto de la ventana:
unmonitorEvents(window);

También puedes detener de forma selectiva la supervisión de eventos específicos en un objeto. Por ejemplo, el siguiente código comienza a supervisar todos los eventos del mouse en el elemento seleccionado actualmente y, luego, detiene la supervisión de los eventos "mousemove" (quizás para reducir el ruido en el resultado de la consola):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

values(object)

values(object) devuelve un array que contiene los valores de todas las propiedades que pertenecen al objeto especificado.
let player = {
    "name": "Parzival",
    "number": 1,
    "state": "ready",
    "easterEggs": 3
};

values(player);