La API de Console Utilities contiene un conjunto de funciones útiles para realizar tareas tareas: seleccionar e inspeccionar elementos DOM, consultar objetos, mostrar datos en formatos legibles, detener y iniciar el generador de perfiles, supervisar eventos del DOM y llamadas de función, y mucho más.
¿Buscas console.log(), console.error() y el resto de las funciones console.*? Consulta
Referencia de la API de Console
$_
$_ muestra el valor de la expresión evaluada más reciente.
En el siguiente ejemplo, se evalúa una expresión simple (2 + 2). Entonces, la propiedad $_ se
evaluado, que contiene el mismo valor:
En el siguiente ejemplo, la expresión evaluada contiene inicialmente un array de nombres. Evaluando
$_.length para encontrar la longitud del array; el valor almacenado en $_ cambia para ser el más reciente
expresión evaluada, 4:
De USD 0 a USD 4
Los comandos $0, $1, $2, $3 y $4 funcionan como una referencia histórica a los últimos cinco DOM
elementos inspeccionados en el panel Elements o en los últimos cinco objetos del montón de JavaScript seleccionados en
el panel Perfiles. $0 muestra el elemento o objeto de JavaScript seleccionado más recientemente, $1.
muestra el último seleccionado, y así sucesivamente.
En el siguiente ejemplo, se selecciona un elemento img en el panel Elements. En el panel lateral Console,
Se evaluó $0 y muestra el mismo elemento:
La siguiente imagen muestra un elemento diferente seleccionado en la misma página. El elemento $0 ahora hace referencia a la
el elemento seleccionado, mientras que $1 muestra el que se seleccionó anteriormente:
$(selector [, startNode])
$(selector) muestra la referencia al primer elemento del DOM con el selector CSS especificado. Cuándo
llamada con un argumento, esta función es una combinación de teclas para la función document.querySelector().
En el siguiente ejemplo, se muestra una referencia al primer elemento <img> del documento:
Haz clic con el botón derecho en el resultado devuelto y selecciona Mostrar en el panel de elementos para encontrarlo en el DOM. Desplázate hasta Ver para que se muestre en la página.
En el siguiente ejemplo, se muestra una referencia al elemento seleccionado actualmente y se muestra su src
propiedad:
Esta función también admite un segundo parámetro, startNode, que especifica un "elemento". o un nodo desde
para buscar elementos. El valor predeterminado de este parámetro es document.
En el siguiente ejemplo, se muestra una referencia al primer elemento img que es subordinado de devsite-header-background.
muestra su propiedad src:
$$(selector [, startNode])
En el siguiente ejemplo, se usa $$(selector) muestra un array de elementos que coinciden con el selector CSS determinado. Este comando es
que equivalen a llamar a Array.from(document.querySelectorAll()).
$$() to create an array of all <img> elements in the current document
and displays the value of each element's src property: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(ruta [, startNode])
$x(path) muestra un array de elementos del DOM que coinciden con la expresión XPath determinada.
En el siguiente ejemplo, se muestran 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 selección, $x(path) tiene un segundo parámetro opcional, startNode,
que especifica un elemento o nodo desde el cual buscar elementos.
clear()
clear() borra el historial de la consola.
clear();
copiar(objeto)
copy(object) copia una representación de cadena del objeto especificado en el portapapeles.
copy($0);
depurar(función)
Cuando se llama a la función especificada, se invoca al depurador y se desglosa la función en el El panel Sources que permite recorrer el código y depurarlo
debug(getData);
Usa undebug(fn) para dejar de desglosar la función o 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 atajo 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
la línea de comandos y el uso de 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(objeto)
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(object/function)
inspect(object/function) abre y selecciona el elemento o el objeto especificado de la manera
panel: puede ser el panel Elements para los elementos DOM o el panel Profiles para los objetos de montón de JavaScript.
En el siguiente ejemplo, se abre document.body en el panel Elements:
inspect(document.body);
Cuando se pasa una función a inspect, la función abre el documento en el panel Sources por ti para inspeccionar.
getEventListeners(object)
getEventListeners(object) muestra los objetos de escucha de eventos registrados en el objeto especificado. El
El valor que se muestra 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. A continuación, se muestra, por ejemplo, todos los objetos de escucha de eventos registrados en el documento.
objeto:
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
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 propiedades de objetos.
claves(objeto)
keys(object) muestra un array con los nombres de las propiedades que pertenecen al elemento 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), escribe keys(player) y
values(player) en la consola da como resultado lo siguiente:
supervisar(función)
Cuando se llama a la función especificada, se registra un mensaje en la consola que indica junto con los argumentos que se pasaron a la función cuando 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 de Cloud. Puedes especificar un solo evento para supervisar, un array de eventos o uno de los eventos genéricos. "tipos" se asigna a una colección predefinida de eventos. Consulta los ejemplos que se mencionan a continuación.
A continuación, se supervisan todos los eventos rename en el objeto window.
monitorEvents(window, "resize");
En el siguiente ejemplo, se define un array para supervisar tanto el “cambio de tamaño” y "desplazar" en el objeto window:
monitorEvents(window, ["resize", "scroll"])
También puedes especificar uno de los "tipos" de eventos disponibles, que son cadenas que se asignan a conjuntos predefinidos eventos. En la siguiente tabla, se indican 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", "rueda del mouse" |
| clave | “keydown”, “keyup”, “keypress” o “textInput” |
| táctil | "touchstart", "touchmove", "touchend" y "touchcancel" |
| control | “cambiar el tamaño”, “desplazar”, “zoom”, “enfoque”, “desenfoque”, “seleccionar”, “cambiar”, “enviar”, “restablecer” |
En el siguiente ejemplo, se usa la “clave” tipo de evento todos los eventos clave correspondientes en un 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 un carácter en el campo de texto:
Usa unmonitorEvents(object[, events]) para detener la supervisión.
perfil([name]) y profileEnd([name])
profile() inicia una sesión de generación de perfiles de CPU en JavaScript con un nombre opcional. profileEnd()
completa el perfil y muestra los resultados en la sección Rendimiento > Pista principal.
Para iniciar la generación de perfiles, haz lo siguiente:
profile("Profile 1")
Para detener la generación de perfiles y ver los resultados en la pestaña Rendimiento > Pista principal:
profileEnd("Profile 1")
Como resultado, en Rendimiento > Pista principal:
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 mostrar un array de objetos creados.
con el constructor especificado. Por ejemplo:
queryObjects(Promise)Muestra todas las instancias dePromise.queryObjects(HTMLElement)Muestra todos los elementos HTML.queryObjects(foo), dondefooes un nombre de clase. Devuelve todos los objetos para los que se crearon instancias a través denew foo().
El alcance de queryObjects() es el contexto de ejecución seleccionado actualmente en la consola.
tabla(datos [, columnas])
Registra los datos de objetos con formato de tabla pasando un objeto de datos con encabezados de columna opcionales.
Esta es la combinación de teclas para console.table().
Por ejemplo, para mostrar una lista de nombres con una tabla en la consola, harías:
let names = [
{ firstName: "John", lastName: "Smith" },
{ firstName: "Jane", lastName: "Doe" },
];
table(names);
undebug(función)
undebug(function) detiene la depuración de la función especificada para que, cuando la función se
ya no se invoca al depurador. Se usa en conjunto con debug(fn).
undebug(getData);
unmonitor(función)
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]) detiene los eventos de supervisión del objeto y los eventos especificados. Para
ejemplo, lo siguiente detiene toda la supervisión de eventos en el objeto window:
unmonitorEvents(window);
También puedes dejar de supervisar eventos específicos de un objeto de manera selectiva. Por ejemplo, el siguiente el código comienza a supervisar todos los eventos del mouse en el elemento seleccionado actualmente y, luego, deja de supervisar “mousemove” (quizás para reducir el ruido en el resultado de la consola):
monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");
valores(objeto)
values(object) muestra un array con los valores de todas las propiedades que pertenecen al elemento especificado.
.
let player = {
"name": "Parzival",
"number": 1,
"state": "ready",
"easterEggs": 3
};
values(player);
