Novedades de Herramientas para desarrolladores (Chrome 103)

Jecelyn Yeen

Cómo capturar eventos de doble clic y clic con el botón derecho en el panel del Grabador

El panel Recorder ahora puede capturar eventos de doble clic y clic con el botón derecho.

Cómo capturar eventos de doble clic y clic con el botón derecho en el panel del Grabador

En este ejemplo, inicia una grabación y trata de realizar los siguientes pasos:

  • Haz doble clic en la tarjeta para agrandarla.
  • Haz clic con el botón derecho en la tarjeta y selecciona una acción del menú contextual.

Para comprender cómo Recorder capturó estos eventos, expande los pasos:

  • El doble clic se captura como type: doubleClick.
  • El evento de clic con el botón derecho se captura como type: click, pero con la propiedad button establecida en secondary. El valor de button de un clic del mouse normal es primary.

Problemas de Chromium: 1300839, 1322879, 1299701, 1323688

Nuevos modos de período y resumen en el panel de Lighthouse

Ahora puedes usar Lighthouse para medir el rendimiento de tu sitio web más allá de la carga de la página.

Nuevos modos de período y resumen en el panel de Lighthouse

El panel de Lighthouse ahora admite 3 modos de medición del flujo de usuarios:

  • Los informes de Navegación analizan la carga de una sola página. La navegación es el tipo de informe más común. Todos los informes de Lighthouse anteriores a la versión actual son informes de navegación.
  • Los informes de períodos analizan un período arbitrario, el cual por lo general incluye interacciones de los usuarios.
  • Los informes de instantáneas analizan la página en un estado particular, por lo general, después de que el usuario interactuó con ella.

Por ejemplo, midamos el rendimiento de la acción de agregar artículos al carrito en esta página de demostración. Selecciona el modo Período y haz clic en Iniciar período. Desplázate y agrega algunos artículos al carrito. Cuando termines, haz clic en End timespan para generar un informe de Lighthouse sobre las interacciones del usuario.

Modo de período

Consulta Flujos de usuarios en Lighthouse para obtener información sobre los casos de uso, los beneficios y las limitaciones únicos de cada modo.

Error de Chromium: 1291284

Actualizaciones de las Estadísticas de rendimiento

Se mejoró el control de zoom en el panel de estadísticas de rendimiento

Ahora, DevTools acercará la imagen según la posición del cursor del mouse en lugar de la posición del cabezal de reproducción.Con la función de zoom basada en el cursor más reciente, puedes mover el mouse a cualquier parte de la pista y acercar la imagen al área deseada de inmediato.

Consulta Performance Insights para obtener información sobre cómo obtener estadísticas prácticas y mejorar el rendimiento de tu sitio web con el panel.

Problema de Chromium: 1313382

Confirma la eliminación de una grabación de rendimiento

Las Herramientas para desarrolladores ahora muestran un diálogo de confirmación antes de borrar una grabación de rendimiento.

Confirmar la eliminación de una grabación de rendimiento

Problema de Chromium: 1318087

Cómo reordenar los paneles en el panel de elementos

Ahora puedes reordenar los paneles en el panel Elements según tus preferencias.

Por ejemplo, cuando abres Herramientas para desarrolladores en una pantalla estrecha, el panel Accesibilidad se oculta debajo del botón Mostrar más. Si sueles depurar problemas de accesibilidad, ahora puedes arrastrar el panel al frente para acceder a él con mayor facilidad.

Cómo reordenar los paneles en el panel de elementos

Error de Chromium: 1146146

Cómo elegir un color fuera del navegador

Las Herramientas para desarrolladores ahora admiten la selección de un color fuera del navegador. Anteriormente, solo podías elegir un color dentro del navegador.

En el panel Estilos, haz clic en cualquier vista previa de color para abrir un selector de color. Usa el cuentagotas para elegir un color desde cualquier lugar.

Cómo elegir un color fuera del navegador

Problema de Chromium: 1245191

Se mejoró la vista previa de valores intercalados durante la depuración

El depurador ahora muestra correctamente la vista previa de los valores intercalados.

En este ejemplo, la función double tiene un parámetro de entrada a y una variable x. Coloca un punto de interrupción en la línea return y ejecuta el código. La vista previa intercalada muestra los valores a y x correctamente. Anteriormente, el depurador no mostraba el valor x en la vista previa intercalada.

Se mejoró la vista previa de valores intercalados durante la depuración

Error de Chromium: 1316340

Compatibilidad con BLOBs grandes para autenticadores virtuales

La pestaña WebAuthn ahora tiene la nueva casilla de verificación Admite BLOB grandes para los autenticadores virtuales.

De forma predeterminada, esta casilla de verificación está inhabilitada. Solo puedes habilitarlo para los autenticadores con protocolo ctap2 que admitan claves residentes.

Compatibilidad con BLOBs grandes para autenticadores virtuales

Problema de Chromium: 1321803

Nuevas combinaciones de teclas en el panel Sources

Ahora hay dos combinaciones de teclas nuevas disponibles en el panel Fuentes:

  • Alternar la barra lateral de navegación (izquierda) con Control / Comando + Mayúsculas + Y
  • Alternar la barra lateral del depurador (derecha) con Control / Comando + Mayúsculas + H

Nuevas combinaciones de teclas para el panel Sources

Problemas de Chromium: 1226363

Mejoras en los mapas de origen

Anteriormente, los desarrolladores experimentaban fallas aleatorias durante las siguientes acciones:

  • Depuración con el ejemplo de Codepen
  • Cómo identificar la ubicación de origen de los problemas de rendimiento en un ejemplo de Codepen
  • Falta la pestaña Component cuando React DevTools está habilitado

Estas son algunas correcciones en los mapas de origen para mejorar la experiencia general de depuración:

  • Asignación correcta entre la ubicación y el desplazamiento para los secuencias de comandos intercalados y la ubicación de origen
  • Usar información de resguardo para la ubicación del texto del fotograma
  • Se resuelven correctamente las URLs relativas con la URL del iframe.

Problemas de Chromium: 1319828, 1318635, 1305475

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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

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