Referencia de API de utilidades de consola

La API de utilidades de consola contiene una colección de comandos útiles para realizar tareas comunes: seleccionar e inspeccionar elementos de DOM, Mostrar datos en formato legible, detener e iniciar el generador de perfiles y supervisar eventos de DOM.

Advertencia

Los siguientes comandos solo funcionan en la consola de Microsoft Edge DevTools. Los comandos no funcionan si se ejecutan desde las secuencias de comandos.

¿Busca console.log() , console.error() y el resto de los console.* métodos? Consulte referenciade la API de consola.

Expresión evaluada recientemente

$_

Devuelve el valor de la expresión evaluada más reciente.

En la siguiente ilustración, se evalúa una expresión simple \ ( 2 + 2 ). $_A continuación, se evalúa la propiedad, que contiene el mismo valor.

$ _ es la expresión evaluada más recientemente

En la siguiente ilustración, la expresión evaluada inicialmente contiene una matriz de nombres. Si se evalúa $_.length para encontrar la longitud de la matriz, el valor almacenado en $_ los cambios se convertirá en la última expresión evaluada, 4 .

$ _ es la expresión evaluada más recientemente

Elemento o objeto JavaScript recientemente seleccionados

$0

Devuelve el último elemento o objeto JavaScript seleccionado. $1 Devuelve la segunda versión seleccionada recientemente, y así sucesivamente. Los $0 comandos,,, $1 $2 $3 y $4 funcionan como referencia histórica a los últimos cinco elementos DOM inspeccionados en el panel elementos o los últimos cinco objetos del montón de JavaScript seleccionados en el panel memoria .

$0
$1
$2
$3
$4

En la siguiente ilustración, img se selecciona un elemento en el panel elementos . En el cajón de consola , se ha $0 evaluado y muestra el mismo elemento.

$ _ es la expresión evaluada más recientemente

En la siguiente ilustración, la imagen muestra un elemento diferente seleccionado en la misma página. $0Ahora hace referencia al elemento que acaba de seleccionarse, mientras $1 devuelve la selección.

$ _ es la expresión evaluada más recientemente

Selector de consultas

$(selector, [startNode])

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

En la siguiente ilustración, se devuelve una referencia al primer <img> elemento en el documento.

$ _ es la expresión evaluada más recientemente

Desplace el puntero sobre el resultado devuelto, abra el menú contextual \ (haga clic con el botón derecho ) y elija Mostrar en el panel de elementos para encontrarlo en el Dom o Desplácese hacia la vista para mostrarlo en la página.

En la siguiente ilustración, se devuelve una referencia al elemento que está seleccionado y se muestra la propiedad src.

$ _ es la expresión evaluada más recientemente

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

En la siguiente ilustración, el primer img elemento se encuentra después de title--image y muestra que src se devuelve correctamente.

$ _ es la expresión evaluada más recientemente

Nota

Si está usando una biblioteca, como jQuery, que usa $ , la funcionalidad se sobrescribe y se $ corresponde con la implementación de esa biblioteca.

Selector de consulta todo

$$(selector, [startNode])

Devuelve una matriz de elementos que coincide con el selector CSS especificado. Este método es equivalente a llamar al método Document. querySelectorAll () .

En el siguiente ejemplo de código y Ilustración, use $$() para crear una matriz de todos los <img> elementos en el documento actual y mostrar el valor de la src propiedad para cada elemento.

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

$ _ es la expresión evaluada más recientemente

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

En el siguiente ejemplo de código y figura, una versión modificada de la muestra de código anterior y la ilustración usa $$() para crear una matriz de todos los <img> elementos que aparecen en el documento actual después del nodo seleccionado.

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

$ _ es la expresión evaluada más recientemente

Nota

Seleccione Shift + Enter en la consola para iniciar una nueva línea sin ejecutar el script.

Instrucción

$x(path, [startNode])

Devuelve una matriz de elementos DOM que coinciden con la expresión XPath especificada.

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

$x("//p")

$ _ es la expresión evaluada más recientemente

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

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

$ _ es la expresión evaluada más recientemente

Es similar a los otros comandos del selector, $x(path) tiene un segundo parámetro opcional, startNode que especifica un elemento o nodo desde el que buscar elementos.

$ _ es la expresión evaluada más recientemente

Libere

clear()

Borra la consola del historial.

clear()

copy

copy(object)

El copy(object) método copia una representación de cadena del objeto especificado en el portapapeles.

copy($0)

depurar

debug(method)

Nota

El #1050237 de problemas de cromo está realizando un seguimiento de un error con la debug() función. Si encuentra el problema, pruebe a usar puntos de interrupción en su lugar.

Cuando se solicita el método especificado, se invoca el depurador y se interrumpe dentro del método en el panel de fuentes , lo que permite recorrer el código y depurarlo.

debug("debug");

$ _ es la expresión evaluada más recientemente

Use undebug(method) este modo para detener la ruptura en el método o use la interfaz de usuario para deshabilitar todos los puntos de interrupción.

Para obtener más información sobre los puntos de interrupción, navegue para poner en pausa el código con puntos de interrupción.

dir

dir(object)

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 código HTML entre <head> las </head> etiquetas y. En el siguiente ejemplo de código y figura, se muestra una lista de estilo de objeto después console.dir() de usar en la consola.

document.head;
dir(document.head);

$ _ es la expresión evaluada más recientemente

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

dirxml

dirxml(object)

Imprime una representación XML del objeto especificado, como se muestra en la pestaña elementos . Este método es equivalente al método Console. dirxml () .

controlados

inspect(object/method)

Abre y selecciona el elemento u objeto especificado en el panel correspondiente: el panel elementos de los elementos DOM o el panel memoria para los objetos del montón JavaScript.

En el siguiente ejemplo de código y figura, el document.body se abre en el panel elementos .

inspect(document.body);

$ _ es la expresión evaluada más recientemente

Cuando pase un método para inspeccionar, el método abrirá el documento en el panel orígenes para que lo inspeccione.

getEventListeners

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 miembros de cada matriz son objetos que describen el agente de escucha registrado para cada tipo. En la siguiente ilustración de ejemplo de código, se enumeran todos los agentes de escucha de eventos registrados en el objeto de documento.

getEventListeners(document);

$ _ es la expresión evaluada más recientemente

Si hay más de un agente de escucha registrado en el objeto especificado, la matriz contendrá un miembro para cada agente de escucha. En la siguiente ilustración, hay dos escuchas de eventos registradas en el elemento de documento para el click evento.

$ _ es la expresión evaluada más recientemente

Puede expandir aún más cada uno de los siguientes objetos para explorar las propiedades.

$ _ es la expresión evaluada más recientemente

teclas

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, use values() .

Por ejemplo, supongamos que su aplicación ha definido el siguiente objeto.

var player1 =   

En los siguientes ejemplos de código y la figura, el resultado se ha dado por sentado que player1 se definió en el espacio de nombres global \ (para simplificar ) antes de escribir keys(player1) y values(player1) en la consola.

keys(player1)

values(player1)

$ _ es la expresión evaluada más recientemente

monitor

monitor(method)

Registra un mensaje en la consola que indica el nombre del método junto con los argumentos que se pasan al método cuando se llamó.

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

$ _ es la expresión evaluada más recientemente

Usar unmonitor(method) para cesar la supervisión.

monitorEvents

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 solo 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. Consulta la siguiente muestra de código y la figura.

El siguiente monitor supervisa todos los eventos de cambiar tamaño en el objeto Window.

monitorEvents(window, "resize");

$ _ es la expresión evaluada más recientemente

En el procedimiento siguiente se define una matriz para supervisar ambos resize scroll eventos y eventos en el objeto de ventana.

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

También puede especificar uno de los tipos de eventos disponibles, cadenas que se asignan a conjuntos de eventos predefinidos. 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 "desenfocar", "cambiar", "foco", "restablecer", "cambiar tamaño", "desplazar", "seleccionar", "enviar", "hacer zoom"

En el siguiente ejemplo de código, el key tipo de evento correspondiente a key los eventos de un campo de texto de entrada está actualmente seleccionado en el panel elementos .

monitorEvents($0, "key");

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

$ _ es la expresión evaluada más recientemente

profile

profile([name])

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 el panel memoria .

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

    profile("My profile")
    
  2. Ejecuta el método profileEnd () para detener la generación de perfiles y mostrar los resultados en el panel memoria .

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

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

Nota

Varios perfiles de CPU pueden funcionar al mismo tiempo y no es necesario cerrar cada uno de ellos en el orden de creación.

profileEnd

profileEnd([name])

Completa una sesión de generación de perfiles de CPU de JavaScript y muestra los resultados en el panel memoria . Debes estar ejecutando el método Profile () .

  1. Ejecuta 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 el panel 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, independientemente del orden.

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

El resultado aparece como una instantánea de montones en el panel memoria .

$ _ es la expresión evaluada más recientemente

Nota

Varios perfiles de CPU pueden funcionar al mismo tiempo y no es necesario cerrar cada uno de ellos en el orden de creación.

queryObjects

queryObjects(Constructor)

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

queryObjects(promise)

Devuelve All Promises .

queryObjects(HTMLElement)

Devuelve todos los elementos HTML.

queryObjects(functionName)

Devuelve todos los objetos de los que se crearon instancias mediante new functionName() .


Table

table(data[, columns])

Registra datos de objeto con formato de tabla basado en el objeto de datos en con encabezados de columna opcionales. En el siguiente ejemplo de código y figura, se muestra una lista de nombres que usan una tabla de la consola.

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

$ _ es la expresión evaluada más recientemente

despurar

undebug(method)

Detiene la depuración del método especificado para que cuando se llame al método se deje de llamar al depurador.

undebug(getData);

dessupervisar

unmonitor(method)

Detiene la supervisión del método especificado. Este método se usa en conjunto con el método monitor () .

unmonitor(getData);

unmonitorEvents

unmonitorEvents(object[, events])

Detiene la supervisión de eventos para el objeto y los eventos especificados. Por ejemplo, a continuación se detiene toda la supervisión de eventos en el objeto Window.

unmonitorEvents(window);

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

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

los

values(object)

Devuelve una matriz que contiene todos los valores de todas las propiedades que pertenecen al objeto especificado.

values(object);

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según las condiciones descritas en la licencia internacional de Creative Commons Atribution 4,0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.