Novedades de Herramientas para desarrolladores (Chrome 71)

Kayce Basques
Kayce Basques
X GitHub Error

Entre las funciones nuevas y los cambios importantes que se agregarán a las Herramientas para desarrolladores de Chrome en Chrome 71, se incluyen los siguientes:

Sigue leyendo o mira la versión en video de esta página:

Coloca el cursor sobre una expresión activa para destacar un nodo del DOM

Cuando una expresión activa se evalúa como un nodo DOM, coloca el cursor sobre el resultado de la expresión activa para destacar ese nodo en la ventana de visualización.

Desplazarse sobre un resultado de expresión en vivo para destacar el nodo en la ventana de visualización

Figura 1. Desplazarse sobre un resultado de expresión en vivo para destacar el nodo en la ventana de visualización

Almacena los nodos DOM como variables globales

Para almacenar un nodo DOM como una variable global, ejecuta una expresión en Console que evalúe a un nodo, haz clic con el botón derecho en el resultado y, luego, selecciona Almacenar como variable global.

Almacena como variable global en la consola.

Figura 2. Almacena como variable global en la consola

También puedes hacer clic con el botón derecho en el nodo del Árbol de DOM y seleccionar Almacenar como variable global.

Almacena como variable global en el árbol DOM.

Figura 3. Almacena como variable global en el árbol del DOM

La información del iniciador y la prioridad ahora se incluye en las importaciones y exportaciones de HAR

Si deseas diagnosticar registros de red con colegas, puedes exportar las solicitudes de red a un archivo HAR.

Exporta las solicitudes de red a un archivo HAR.

Figura 8. Cómo exportar solicitudes de red a un archivo HAR

Para volver a importar el archivo al panel de red, arrástralo y suéltalo.

Cuando exportas un archivo HAR, DevTools ahora incluye información del iniciador y la prioridad en el archivo. Cuando vuelves a importar archivos HAR a DevTools, las columnas Initiator y Priority ahora se propagan.

El campo _initiator proporciona más contexto sobre lo que causó que se solicitara el recurso. Esto se asigna a la columna Initiator en la tabla Requests.

La columna de iniciador.

Figura 9. La columna del iniciador

También puedes mantener presionada la tecla Mayúsculas y colocar el cursor sobre una solicitud para ver su iniciador y sus dependencias.

Ver iniciadores y dependencias

Figura 10: Cómo ver iniciadores y dependencias

El campo _priority indica el nivel de prioridad que el navegador asignó al recurso. Esto se asigna a la columna Priority en la tabla Requests, que está oculta de forma predeterminada.

La columna Prioridad.

Figura 11: La columna Prioridad

Haz clic con el botón derecho en el encabezado de la tabla Requests y selecciona Priority para mostrar la columna Priority.

Cómo mostrar la columna Prioridad

Figura 12: Cómo mostrar la columna Prioridad

Cómo acceder al menú de comandos desde el menú principal

Usa el menú de comandos para acceder rápidamente a los paneles, las pestañas y las funciones de DevTools.

El menú de comandos.

Figura 13: El menú de comandos

Ahora puedes abrir el menú de comandos desde el menú principal. Haz clic en el botón Menú principal principal y selecciona Ejecutar comando.

Cómo abrir el menú de comandos desde el menú principal

Figura 14. Cómo abrir el menú de comandos desde el menú principal

Puntos de interrupción de la pantalla en pantalla

Picture-in-Picture es una nueva API experimental que permite que una página cree una ventana de video flotante sobre el escritorio.

Habilita las casillas de verificación enterpictureinpicture, leavepictureinpicture y resize en el panel de puntos de interrupción del objeto de escucha de eventos para hacer una pausa cada vez que se active uno de estos eventos de pantalla en pantalla. DevTools se pausa en la primera línea del controlador.

Eventos de imagen en imagen en el panel de interrupciones del objeto de escucha de eventos

Figura 16: Eventos de pantalla en pantalla en el panel de interrupciones del objeto de escucha de eventos

(Sugerencia adicional) Ejecuta monitorEvents() en la consola para ver cómo se activan los eventos de un elemento.

Supongamos que quieres agregar un borde rojo alrededor de un botón después de enfocarlo y presionar R, E, D, pero no sabes a qué eventos agregar objetos de escucha. Usa monitorEvents() para registrar todos los eventos del elemento en la consola.

  1. Obtén una referencia al nodo.

    Usar "Almacenar como variable global" para obtener una referencia al nodo

    Figura 17: Usa Almacenar como variable global para obtener una referencia al nodo

  2. Pasa el nodo como primer argumento a monitorEvents().

    Pasa el nodo a monitorEvents().

    Figura 18: Pasa el nodo a monitorEvents()

  3. Interactúa con el nodo. DevTools registra todos los eventos del nodo en la consola.

    Los eventos del nodo en la consola

    Figura 19: Los eventos del nodo en la consola

Llama a unmonitorEvents() para dejar de registrar eventos en Play Console.

unmonitorEvents(temp1);

Pasa un array como segundo argumento a monitorEvents() si solo quieres supervisar ciertos eventos o tipos de eventos:

monitorEvents(temp1, ['mouse', 'focus']);

El tipo mouse le indica a DevTools que registre todos los eventos relacionados con el mouse, como mousedown y click. Otros tipos admitidos son key, touch y control.

Consulta la Referencia de la línea de comandos para ver otras funciones útiles a las que puedes llamar desde la consola.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de versión preliminar te brindan acceso a las funciones más recientes de DevTools, te permiten probar las APIs de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

Una lista de todo lo que se analizó en la serie Novedades de DevTools.