Referencia de la API de Console Utilities

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

Elementos <img> 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(ruta [, nodoInicial])

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

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



En el siguiente ejemplo, se muestran todos los elementos <p> que contienen elementos <a>:
$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(función)

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



Usa undebug(fn) para dejar de detenerte en 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 tu 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 al 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 es equivalente al método console.dirxml().

inspect(objeto/función)

inspect(object/function) abre y selecciona el elemento o el objeto especificado en el panel correspondiente: el panel Elementos para los elementos DOM o el panel Perfiles para los objetos del montón de JavaScript.

En el siguiente ejemplo, se abre el elemento 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 Fuentes para que lo inspecciones.

getEventListeners(object)

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



Si hay más de un objeto de escucha registrado 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 aún más cada uno de estos objetos para explorar sus propiedades:



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

keys(objeto)

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
};

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



monitor(función)

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 pasan a la función cuando se la llamó.
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 "tipos" de eventos genéricos asignados a una colección predefinida de eventos. Consulte los ejemplos que se mencionan a continuación.

El siguiente código supervisa todos los eventos de cambio de tamaño en el objeto de ventana.
monitorEvents(window, "resize");



El siguiente código define un array para supervisar los eventos "resize" y "scroll" en el objeto de ventana:
monitorEvents(window, ["resize", &quot;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, el siguiente código usa el tipo de evento "key" para todos los eventos de teclado correspondientes en un campo de texto de entrada seleccionado actualmente en el panel Elements.
monitorEvents($0, "key");

A continuación, se muestra un ejemplo de resultado después de escribir algunos 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 y muestra los resultados en el segmento Rendimiento > Principal.



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

Para detener la generación de perfiles y ver los resultados en el segmento Performance > Main, haz lo siguiente:
profileEnd("Profile 1")

Resultado en el segmento Principal de Rendimiento:



Los perfiles también se pueden anidar. Por ejemplo, esto funcionará en cualquier orden:
profile('A');
profile('B');
profileEnd('A&#39;);
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);



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. Se usa en conjunto con debug(fn).
undebug(getData);

unmonitor(function)

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

unmonitorEvents(object [, events])

unmonitorEvents(object[, events]) deja de supervisar los eventos del objeto y los eventos especificados. Por ejemplo, el siguiente código detiene toda la supervisión de eventos en el objeto de 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, deja de supervisar los eventos "mousemove" (quizás para reducir el ruido en el resultado de la consola):
monitorEvents($0, "mouse");
unmonitorEvents($0, &quot;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);