Novedades de Herramientas para desarrolladores (Chrome 71)

Kayce Basques

Las nuevas funciones y los cambios importantes que se incluirán en las Herramientas para desarrolladores de Chrome en Chrome 71 son los siguientes:

• Cómo colocar el cursor sobre una expresión en vivo para destacar un nodo del DOM
• Almacena nodos del DOM como variables globales
• Ahora se incluye información sobre el iniciador y la prioridad en las importaciones y exportaciones de HAR
• Cómo acceder al menú de comandos desde el menú principal
• Puntos de interrupción de Pantalla en pantalla
• (Sugerencia adicional) Ejecuta monitorEvents() en la consola para observar los eventos de un elemento

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 DOM

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

Figura 1. Colocar el cursor sobre un resultado de Live Expression para destacar el nodo en la ventana gráfica

Almacena 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 Almacenar como variable global.

Figura 2. Almacenar como variable global en la consola

O bien, haz clic con el botón derecho en el nodo del árbol del DOM y selecciona Almacenar como variable global.

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

Ahora se incluye información sobre el iniciador y la prioridad en las importaciones y exportaciones de HAR

Si deseas diagnosticar los registros de red con tus colegas, puedes exportar 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 Network, solo tienes que arrastrarlo y soltarlo.

Cuando exportas un archivo HAR, las Herramientas para desarrolladores ahora incluyen información sobre el iniciador y la prioridad en el archivo HAR. Cuando vuelves a importar archivos HAR a Herramientas para desarrolladores, ahora se propagan las columnas Iniciador y Prioridad.

El campo _initiator proporciona más contexto sobre lo que provocó que se solicitara el recurso. Esto se asigna a la columna Iniciador de la tabla Solicitudes.

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.

Figura 10: Cómo ver los iniciadores y las dependencias

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

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.

Figura 12: Cómo mostrar la columna Prioridad

Accede 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 Herramientas para desarrolladores.

Figura 13: El menú de comandos

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

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

Puntos de interrupción de 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 Event Listener Breakpoints para pausar la ejecución cada vez que se active uno de estos eventos de pantalla en pantalla. Las Herramientas para desarrolladores se detienen en la primera línea del controlador.

Figura 16: Eventos de pantalla en pantalla en el panel Event Listener Breakpoints

(Sugerencia adicional) Ejecuta monitorEvents() en la consola para observar los eventos que se activan en 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 listeners. Usa monitorEvents() para registrar todos los eventos del elemento en la consola.

1. Obtén una referencia al nodo.

   

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

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

   

   Figura 18: Cómo pasar el nodo a monitorEvents()

3. Interactúa con el nodo. Las Herramientas para desarrolladores registran todos 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 quieres supervisar ciertos eventos o tipos de eventos:

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

El tipo mouse le indica a Herramientas para desarrolladores 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 conocer otras funciones útiles 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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores