Referencia de API de utilidades de consola

La API de utilidades de consola contiene una colección de comandos de comodidad para completar las siguientes tareas comunes.

• Elegir e inspeccionar elementos DOM
• Mostrar datos en formato legible
• Detener e iniciar el perfilador
• Supervisar eventos DOM

Para obtener más información sobre los console.log() métodos and console.error() y el resto de los console.* métodos, vaya a Console API Reference.

Expresión recientemente evaluada

Sintaxis de consola

$_

Este comando devuelve el valor de la expresión evaluada más recientemente.

Ejemplo de consola

En la siguiente figura, se evalúa una expresión sencilla ( 2 + 2 ) . A $_ continuación, se evalúa la propiedad, que contiene el mismo valor.

En la siguiente figura, la expresión evaluada contiene inicialmente una matriz de nombres. Al evaluar para encontrar la longitud de la matriz, el valor almacenado en se convierte en $_.length la última expresión $_ evaluada, 4 .

Elemento elegido recientemente o objeto JavaScript

Sintaxis de consola

$0

Este comando devuelve el elemento elegido más recientemente o el objeto JavaScript. $1 devuelve el segundo elegido más recientemente, y así sucesivamente. Los comandos , , y funcionan como una referencia histórica a los últimos cinco elementos DOM inspeccionados dentro de la herramienta Elementos o los últimos cinco objetos de montón de $0 $1 $2 $3 $4 JavaScript elegidos **** **** en la herramienta Memoria.

$0

$1

$2

$3

$4

Ejemplo de consola

En la siguiente figura, se img elige un elemento en la herramienta Elementos. En el cajón de consola, $0 se ha evaluado y muestra el mismo elemento.

En la siguiente figura, la imagen muestra un elemento diferente elegido en la misma página web. Ahora $0 hace referencia al elemento recién elegido, mientras que devuelve el elegido $1 anteriormente.

Selector de consultas

Sintaxis de consola

$(selector, [startNode])

Este comando devuelve la referencia al primer elemento DOM con el selector CSS especificado. Este método es un alias para el método document.querySelector().

Ejemplo de consola

En la siguiente figura, se devuelve una referencia al primer <img> elemento de la página web.

Para buscar el primer elemento en el DOM o para buscarlo y mostrarlo en la página web, realice las siguientes acciones.

1. Mantenga el mouse sobre el resultado devuelto.
2. Abra el menú contextual (haga clic con el botón derecho).
3. Elija Mostrar en el Panel de elementos.

En la siguiente figura, se devuelve una referencia al elemento seleccionado actualmente y se src muestra la propiedad.

Este método también admite un segundo parámetro, , que especifica un elemento o nodo desde el que startNode buscar elementos. El valor predeterminado del parámetro es document .

En la siguiente figura, se devuelve el primer elemento después de que se encuentra el elemento y se devuelve la propiedad img title--image del src img elemento.

Selector de consultas todos

Sintaxis de consola

$$(selector, [startNode])

Este comando devuelve una matriz de elementos que coinciden con el selector CSS especificado. Este método equivale a ejecutar el método document.querySelectorAll().

Ejemplo de consola

En el siguiente ejemplo de código y figura, se usa para crear una matriz de todos los elementos de la página web actual y mostrar el valor de la propiedad $$() <img> para cada src elemento.

var images = $$('img');
for (each in images) {
    console.log(images[each].src);
}

Este método también admite un segundo parámetro, , que especifica un elemento o nodo desde el que startNode buscar elementos. El valor predeterminado del parámetro es document .

En la siguiente ilustración y ejemplo de código, una versión modificada del ejemplo de código y la figura anteriores se usa para crear una matriz de todos los elementos que aparecen en la página web actual después del $$() <img> nodo elegido.

var images = $$('img', document.querySelector(`title--image`));
for (each in images) {
   console.log(images[each].src);
}

XPath

Sintaxis de consola

$x(path, [startNode])

Este comando devuelve una matriz de elementos DOM que coinciden con la expresión XPath especificada.

Ejemplo de consola

En el siguiente ejemplo de código y figura, se devuelven todos los <p> elementos de la página web.

$x("//p")

En el siguiente ejemplo de código y figura, se devuelven todos los <p> elementos que contienen <a> elementos.

$x("//p[a]")

Al igual que los demás comandos de selector, tiene un segundo parámetro opcional, , que especifica un elemento o nodo desde el que buscar $x(path) startNode elementos.

clear

Sintaxis de consola

clear()

Este commnad borra la consola del historial.

Ejemplo de consola

clear()

copy

Sintaxis de consola

copy(object)

Este método copia una representación de cadena del objeto especificado en el portapapeles.

Ejemplo de consola

copy($0)

depurar

Sintaxis de consola

debug(method)

Cuando se solicita el método especificado, el depurador invoca y rompe dentro del método en la herramienta Orígenes. Le permite realizar un paso a través y depurar el código.

Ejemplo de consola

debug("debug");

Se undebug(method) usa para detener la interrupción del método o usar la interfaz de usuario para desactivar todos los puntos de interrupción.

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

dir

Sintaxis de consola

dir(object)

Este comando muestra una lista de estilo de objeto de todas las propiedades del objeto especificado. Este método es un alias para el método console.dir().

Evalúe document.head en la consola para mostrar el HTML entre las <head> </head> etiquetas y.

Ejemplo de consola

En el siguiente ejemplo de código y figura, se muestra una descripción de estilo de objeto después de usar console.dir() en la consola.

document.head;
dir(document.head);

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

dirxml

Sintaxis de consola

dirxml(object)

Este comando imprime una representación XML del objeto especificado, tal como se muestra en la herramienta Elementos. Este método es equivalente al método console.dirxml().

inspeccionar

Sintaxis de consola

inspect(object/method)

Este comando se abre y elige el elemento u objeto especificado en el **** panel correspondiente: la herramienta Elementos para elementos DOM o la herramienta Memoria para objetos de montón de JavaScript.

Ejemplo de consola

En el siguiente ejemplo de código y figura, se document.body abre en la herramienta Elementos.

Ejemplo de consola

inspect(document.body);

Al pasar un método para inspeccionar, el método abre la página web en la herramienta Orígenes para que la examine.

getEventListeners

Sintaxis de consola

getEventListeners(object)

Este comando 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 (por click ejemplo, o keydown ). Los miembros de cada matriz son objetos que describen el agente de escucha registrado para cada tipo.

Ejemplo de consola

En el siguiente fragmento de código y figura, se enumeran todos los agentes de escucha de eventos registrados document en el objeto.

getEventListeners(document);

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

Puede expandir cada uno de los siguientes objetos para explorar las propiedades.

teclas

Sintaxis de consola

keys(object)

Este comando devuelve una matriz que contiene los nombres de las propiedades que pertenecen al objeto especificado. Para obtener los valores asociados de las mismas propiedades, use values() .

Ejemplo de consola

Por ejemplo, supongamos que la aplicación definió el siguiente objeto.

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

En los siguientes ejemplos de código y figura, se supone que el resultado se definió en el espacio de nombres global (por simplicidad) antes de escribir y player1 keys(player1) en la values(player1) consola.

keys(player1)

values(player1)

monitor

Sintaxis de consola

monitor(method)

Este comando registra un mensaje en la consola que indica el nombre del método junto con los argumentos pasados al método como parte de una solicitud.

Ejemplo de consola

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

Se unmonitor(method) usa para finalizar la supervisión.

monitorEvents

Sintaxis de consola

monitorEvents(object[, events])

Cuando se produce uno de los eventos especificados en el objeto especificado, el objeto de evento se registra en la consola. 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.

Ejemplo de consola

Revise el siguiente ejemplo de código y figura.

A continuación se supervisan todos los eventos de cambio de tamaño del objeto de ventana.

monitorEvents(window, "resize");

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

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

También puede especificar uno de los tipos de eventos disponibles, cadenas que se asignan a conjuntos predefinidos de eventos. En la tabla siguiente se muestran los tipos de eventos disponibles y las asignaciones de eventos asociadas.

En el siguiente ejemplo de código, el tipo de evento correspondiente a los eventos de un campo de texto de entrada se elige key actualmente en la key herramienta Elementos.

monitorEvents($0, "key");

En la siguiente figura, se muestra el resultado de ejemplo después de escribir un carácter en el campo de texto.

profile

Sintaxis de consola

profile([name])

Este comando inicia una sesión de generación de perfiles de CPU de JavaScript con un nombre opcional. El método profileEnd() completa el perfil y muestra los resultados en la herramienta Memoria.

Ejemplo de consola

1. Ejecute el profile() método para iniciar la generación de perfiles.

   profile("My profile")
   

2. Ejecute el método profileEnd() para detener la generación de perfiles y mostrar los resultados en la herramienta Memoria.

Los perfiles también pueden estar anidados. En los siguientes ejemplos de código y figura, el resultado es el mismo sea cual sea el orden.

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

profileEnd

Sintaxis de consola

profileEnd([name])

Este comando completa una sesión de generación de perfiles de CPU de JavaScript y muestra los resultados en la herramienta Memoria. Debe ejecutar el método profile().

Ejemplo de consola

1. Ejecute el método profile() para iniciar la generación de perfiles.

2. Ejecute el profileEnd() método para detener la generación de perfiles y mostrar los resultados en la herramienta Memoria.

   profileEnd("My profile")
   

Los perfiles también pueden estar anidados. En el siguiente ejemplo de código y figura, el resultado es el mismo sea cual sea el orden.

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

El resultado aparece como una instantánea de montón en la herramienta Memoria.

queryObjects

Sintaxis de consola

queryObjects(Constructor)

Este comando devuelve una matriz de objetos creados con el constructor especificado. El ámbito de queryObjects() es el contexto de tiempo de ejecución elegido actualmente en la consola.

Ejemplo de consola

queryObjects(promise)

queryObjects(HTMLElement)

queryObjects(functionName)

tabla

Sintaxis de consola

table(data[, columns])

Este comando registra los datos del objeto con formato de tabla basado en el objeto de datos con encabezados de columna opcionales.

Ejemplo de consola

En el siguiente ejemplo de código y figura, se muestra una lista de nombres que usan una tabla en la consola.

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

undebug

Sintaxis de consola

undebug(method)

Este comando detiene la depuración del método especificado. Por lo tanto, cuando se solicita el método, el depurador ya no se invoca.

Ejemplo de consola

undebug(getData);

unmonitor

Sintaxis de consola

unmonitor(method)

Este comando detiene la supervisión del método especificado. Este método se usa en función del método monitor().

Ejemplo de consola

unmonitor(getData);

unmonitorEvents

Sintaxis de consola

unmonitorEvents(object[, events])

Este comando detiene la supervisión de eventos para el objeto y los eventos especificados.

Ejemplo de consola

Por ejemplo, el siguiente fragmento de código detiene toda la supervisión de eventos en el objeto de ventana.

unmonitorEvents(window);

También puede detener selectivamente la supervisión de eventos específicos en un objeto. Por ejemplo, el siguiente código inicia la supervisión de todos los eventos en el elemento seleccionado actualmente y, a continuación, detiene los eventos de supervisión (quizás para reducir el ruido en la salida mouse mousemove de la consola).

monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

valores

Sintaxis de consola

values(object)

Este comando devuelve una matriz que contiene los valores de todas las propiedades que pertenecen al objeto especificado.

Ejemplo de consola

values(object);

Este trabajo se publica bajo una licencia de Atribución 4.0 Internacional de Creative Commons.