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:

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

Coloca el cursor sobre una expresión instantánea 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.

Coloca el cursor sobre el resultado de una expresión en vivo para destacar el nodo en el viewport.

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 del DOM como una variable global, ejecuta una expresión en la consola que se evalúe como un nodo, haz clic con el botón derecho en el resultado y, luego, selecciona Store as global variable.

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

Información sobre el iniciador y la prioridad ahora en importaciones y exportaciones de HAR

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

Exportar 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, las Herramientas para desarrolladores ahora incluyen información sobre el iniciador y la prioridad en ese 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 la razón por la que se solicitó 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 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. Herramientas para desarrolladores se detiene 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. Las Herramientas para desarrolladores registran 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 la consola.

unmonitorEvents(temp1);

Pasa un array como segundo argumento a monitorEvents() si solo deseas 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 prácticas a las que puedes llamar desde la consola.

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. 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 nuevas funciones, actualizaciones o cualquier otro aspecto relacionado con Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.