Novedades de Herramientas para desarrolladores (Chrome 103)

Captura eventos de doble clic y clic con el botón derecho en el panel Grabadora

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

Captura eventos de doble clic y clic con el botón derecho en el panel Grabadora

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

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

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

  • Doble clic se captura como type: doubleClick.
  • El evento de clic derecho se captura como type: click, pero con la propiedad button se establece en secondary. El valor button de un clic normal del mouse es primary.

Problemas de Chromium: 1300839, 1322879, 1299701, 1323688

Nuevo período y modo de instantánea en el panel de Lighthouse

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

Nuevo período y modo de instantánea en el panel de Lighthouse

El panel Lighthouse ahora admite 3 modos de medición de 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 Intervalos de tiempo analizan un período arbitrario, el cual por lo general incluye interacciones del usuario.
  • 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, miremos el rendimiento de agregar artículos al carrito en esta página de demostración. Selecciona el modo Intervalo de tiempo y haz clic en Iniciar período. Desplázate y agrega algunos artículos al carrito. Una vez que hayas terminado, haz clic en Finalizar período para generar un informe de Lighthouse de las interacciones del usuario.

Modo de período

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

Problema de Chromium: 1291284

Actualizaciones de las estadísticas de rendimiento

Control de zoom mejorado en el panel Estadísticas de rendimiento

Las Herramientas para desarrolladores ahora se acercarán en función del cursor del mouse en lugar de la posición del cabezal de reproducción.Con el zoom basado en el cursor más reciente, puedes mover el mouse a cualquier parte del recorrido y acercar al área deseada de inmediato.

Consulta la sección Estadísticas de rendimiento 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 que quieres borrar la grabación de una presentación

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

Confirma que quieres borrar la grabación de una presentación

Problema de Chromium: 1318087

Cómo reordenar paneles en el panel de Elementos

Ahora puedes reordenar los paneles en el panel Elementos 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 depuras problemas de accesibilidad con frecuencia, ahora puedes arrastrar el panel al frente para facilitar el acceso.

Cómo reordenar paneles en el panel de Elementos

Problema de Chromium: 1146146

Elegir un color fuera del navegador

Herramientas para desarrolladores ahora permite seleccionar un color fuera del navegador. Anteriormente, solo se podía elegir un color dentro del navegador.

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

Elegir un color fuera del navegador

Problema de Chromium: 1245191

Se mejoró la vista previa del valor intercalado 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 de forma correcta. Anteriormente, el depurador no mostraba el valor x en la vista previa intercalada.

Se mejoró la vista previa del valor intercalado durante la depuración.

Problema de Chromium: 1316340

Admite BLOBS de gran tamaño para autenticadores virtuales

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

Esta casilla de verificación está inhabilitada de forma predeterminada. Puedes habilitarlo solo para los autenticadores con el protocolo ctap2 que admiten claves residentes.

 Admite BLOBS de gran tamaño 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:

  • Activa o desactiva la barra lateral de navegación (izquierda) con Control / Comando + Mayúsculas + Y
  • Activar o desactivar 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 fuentes

Anteriormente, los desarrolladores experimentaban fallas aleatorias en las siguientes situaciones:

A continuación, se incluyen 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 las secuencias de comandos intercaladas y la ubicación de origen
  • Usa información de resguardo para la ubicación del texto del fotograma
  • Resolver correctamente las URL relativas con la URL del marco

Problemas de Chromium: 1319828, 1318635, 1305475

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 plataformas 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   Más > 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.