Novedades de Herramientas para desarrolladores (Chrome 71)

Kayce Basques

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

• Coloca el cursor sobre una expresión instantánea para destacar un nodo del DOM
• Almacena nodos del DOM como variables globales
• Información sobre el iniciador y la prioridad ahora en las importaciones y exportaciones de HAR
• Accede al menú de comandos desde el menú principal
• Puntos de interrupción de pantalla en pantalla
• (Sugerencia adicional) Ejecuta monitorEvents() en la consola para ver cómo se activan los eventos de un elemento.

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 instantánea se evalúe como un nodo del DOM, coloca el cursor sobre el resultado de la expresión instantánea para destacar ese nodo en el viewport.

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

Almacena nodos del 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 (Store as global variable).

Figura 2. Almacenar como una variable global en la consola

También puedes hacer clic con el botón derecho en el nodo del árbol del DOM y seleccionar Store as global variable.

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

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

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

Figura 8. Exporta 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 HAR . Cuando vuelves a importar archivos HAR a Herramientas para desarrolladores, aparecen las columnas Initiator y Priority. ahora se propagaron.

El campo _initiator proporciona más contexto sobre la razón por la que se solicitó el recurso. Esta se asigna a la columna Initiator en la tabla Requests.

Figura 9. La columna del iniciador

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

Figura 10: Visualiza iniciadores y dependencias

El campo _priority indica el nivel de prioridad que el navegador asignó al recurso. Este mapa La columna Priority (Prioridad) de la tabla Requests, que está oculta de forma predeterminada

Figura 11: La columna Prioridad

Haz clic con el botón derecho en el encabezado de la tabla Solicitudes y selecciona Prioridad para que aparezca la Prioridad. .

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: Menú de comandos

Ahora puedes abrir el menú de comandos desde el menú principal. Haz clic en el menú principal. Botón 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

Pantalla en pantalla es una nueva API experimental que permite que una página cree un video flotante en el escritorio.

Habilita las casillas de verificación enterpictureinpicture, leavepictureinpicture y resize en el Evento. El panel Breakpoints de los objetos de escucha para que se pause cuando se active uno de estos eventos de pantalla en pantalla. Herramientas para desarrolladores se detiene en la primera línea del controlador.

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

(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 los eventos de cada elemento a 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 primer argumento 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.

   

   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 las 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 línea de comandos para obtener 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 navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las 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.