Novedades de Herramientas para desarrolladores (Chrome 71)

Kayce Basques

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:

• Coloca el cursor sobre una expresión instantánea para destacar un nodo del DOM
• Almacena nodos del DOM como variables globales
• La información del iniciador y la prioridad ahora están disponibles 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 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 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.

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.

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.

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.

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.

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.

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.

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

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.

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 y selecciona Ejecutar comando.

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.

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.

   

   Figura 17: Usa 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 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.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de DevTools con more_vert Más opciones > Ayuda > Informar un problema de DevTools en DevTools.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de las Herramientas para desarrolladores o en los videos de YouTube con sugerencias de 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.