Novedades de Herramientas para desarrolladores, Chrome 124

Sofia Emelianova
Sofia Emelianova

Nuevo panel Autocompletar

Esta versión incluye el nuevo panel Autocompletar en DevTools. La función Autocompletar de Chrome proporciona una forma conveniente de completar automáticamente formularios en sitios web con direcciones guardadas. El nuevo panel Autocompletar te permite inspeccionar la asignación entre los campos de tu formulario, los valores de autocompletar previstos y los datos guardados.

Prueba el nuevo panel en esta página de demostración con datos de prueba:

  1. En Autocompletar perfil, haz clic en cualquiera de los botones Completar formulario…, haz clic en Enviar y, luego, en la ventana de diálogo ¿Guardar dirección?, haz clic en Guardar y vuelve a la página con el formulario.
  2. Abre DevTools y activa un evento de autocompletado: selecciona un campo de formulario y elige la dirección de la lista desplegable.

El panel Autocompletar se abre automáticamente y muestra los campos de formulario detectados, los campos que infirió Autocompletar y los valores guardados.

El panel Autocompletar

Para obtener más información, consulta Aprende sobre los formularios y Autofill.

Limitación de red mejorada para WebRTC

Con la nueva incorporación de parámetros relacionados con paquetes a los perfiles de limitación de red personalizados, ahora puedes limitar tus aplicaciones de WebRTC directamente en DevTools. Esto es útil para probar tu implementación de comunicación en tiempo real, sin necesidad de usar software de terceros.

Los parámetros nuevos son: Pérdida de paquetes (porcentaje), Longitud de la cola de paquetes (cantidad de paquetes) y la marca Reordenamiento de paquetes.

Antes y después de agregar nuevas opciones relacionadas con los paquetes a los perfiles de limitación personalizados.

Para limitar una conexión WebRTC, especifica los parámetros relacionados con los paquetes en un perfil personalizado en Configuración > Limitación y selecciónalo en el panel Red.

Prueba los nuevos parámetros en esta página de demostración. Primero, permite que la página use la cámara. Luego, en el panel Red, selecciona el perfil personalizado que configuraste y, en la página, haz clic en Iniciar y Llamar.

Error de Chromium: 41175925.

Compatibilidad con animaciones basadas en el desplazamiento en el panel Animaciones

El panel Animations ahora te permite inspeccionar las animaciones basadas en el desplazamiento.

Prueba esta función en esta página de demostración. Abre el panel Animaciones y vuelve a cargar la página para capturar animaciones impulsadas por el desplazamiento.

Un grupo de animaciones impulsadas por el desplazamiento marcadas con un ícono de mouse.

En Descripción general, aparece un grupo de animación marcado con un ícono de . Ahora puedes inspeccionarlo. El grupo muestra valores de píxeles en lugar de milisegundos en la línea de tiempo.

Se mejoró la compatibilidad con anidamiento de CSS en Elementos > Estilos

La pestaña Elementos > Estilos mejora la compatibilidad con la anidación de CSS y ahora muestra los estilos anidados con sangría y llaves. La anidada de CSS es una forma de agrupar reglas de CSS y hacer que todo sea menos extenso y más estructurado.

El antes y el después de agregar sangría y encerrar los estilos anidados entre llaves.

Error de Chromium: 40166888.

Panel de rendimiento mejorado

Esta versión incluye varias mejoras en el panel Rendimiento.

Oculta las funciones y sus elementos secundarios en el gráfico tipo llama

Para filtrar el ruido del gráfico tipo llama en Rendimiento > Principal, ahora puedes ocultar las funciones irrelevantes y sus elementos secundarios. En el gráfico de llama, haz clic con el botón derecho en una función y elige una opción del menú contextual.

El antes y el después de agregar un menú contextual que te permite ocultar funciones y sus elementos secundarios.

Las funciones con elementos secundarios ocultos tienen un botón Menú desplegable a la derecha. Coloca el cursor sobre él para ver la cantidad de elementos secundarios ocultos y haz clic en él para volver a mostrarlos. Para volver al estado inicial del gráfico de llama, haz clic con el botón derecho en una función y selecciona Restablecer seguimiento.

Flechas de los iniciadores seleccionados a los eventos que iniciaron

Anteriormente, cuando seleccionabas un evento en la pista Principal, esta mostraba una flecha desde su iniciador hasta el evento seleccionado. Ahora, la pista también muestra una flecha del evento seleccionado al que inició, si corresponde.

Las flechas de antes y después que muestran los eventos seleccionados a los iniciados y los vínculos nombrados en lugar de Reveal.

Además, todos los iniciadores ahora tienen campos Initiator for en la pestaña Summary, y los campos Initiator for y Initiated by tienen vínculos con nombres en lugar de Reveal.

Problemas de Chromium: 325604258, 325024819 y 326055289.

Lighthouse 11.6.0

El panel de Lighthouse ahora ejecuta Lighthouse 11.6.0. Consulta la lista completa de cambios.

Entre los cambios notables, se encuentra el nuevo parámetro de configuración de habilitación Habilitar el muestreo de JS. Este parámetro está inhabilitado de forma predeterminada.

Antes y después de agregar un parámetro de configuración de muestreo de JS con solicitud de aceptación.

Si habilitas el muestreo de JS, se agregarán pilas de llamadas de JavaScript detalladas al seguimiento de rendimiento, pero es posible que se ralentice la generación de informes.

Registro de rendimiento sin (izquierda) y con (derecha) muestreo de JS.

El seguimiento está disponible en menú Herramientas > Ver seguimiento sin limitación después de que se genera el informe de Lighthouse.

Para conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 772558.

Información sobre herramientas para categorías especiales en Memoria > Instantáneas de montón

Las instantáneas de montón en el panel Memoria tienen grupos especiales de objetos que no se basan en constructores. Cuando colocas el cursor sobre esos objetos, el panel Memoria ahora muestra una información sobre herramientas con una descripción breve y un vínculo a una descripción más extensa en la documentación.

El antes y el después de mostrar una información sobre herramientas descriptiva para grupos especiales de objetos.

Error de Chromium: 41490331.

Aplicación > Actualizaciones de almacenamiento

Esta versión incluye algunas actualizaciones en Aplicación > Almacenamiento.

Bytes utilizados para el almacenamiento compartido

La sección Application > Storage > Shared storage ahora muestra la cantidad de bytes que usa un origen.

El antes y el después que muestran cuántos bytes se usan para el almacenamiento compartido.

El almacenamiento compartido te permite tener acceso de escritura ilimitado en varios sitios con acceso de lectura que preserva la privacidad.

Error de Chromium: 324464353.

Web SQL dejó de estar disponible

Chrome dejó de admitir WebSQL en la versión 119 y quitó el token de prueba de baja en esta versión, por lo que ya no puedes usar WebSQL.

A su vez, DevTools quitó la sección Web SQL del panel Application.

Error de Chromium: 327254049.

Mejoras en el panel de cobertura

Esta versión incluye algunas actualizaciones en el panel Cobertura:

  • La barra de estado ahora calcula correctamente las estadísticas de uso de las URLs filtradas. Anteriormente, en lugar de sumar los datos de uso de los elementos secundarios que coincidían con el filtro, sumaba los datos de su elemento superior.

El antes y el después de calcular correctamente las estadísticas de los elementos secundarios coincidentes.

  • El color del código usado ahora es gris en lugar de verde para mejorar la visibilidad, especialmente para la deficiencia de visión de color que no es verde.

El antes y el después de cambiar el color del código usado a gris.

Problema de Chromium: 41494198, 329253687.

Es posible que el panel Capas deje de estar disponible

Es posible que el panel Capas deje de estar disponible pronto debido a su bajo uso. El panel ahora muestra un banner de advertencia en la parte superior.

El banner de advertencia que anuncia la posible baja en la parte superior del panel Capas

No dudes en compartir tus inquietudes y opiniones antes de que el equipo tome la decisión final de dar de baja el panel.

Baja del generador de perfiles de JavaScript: Fase cuatro, final

En esta versión, el panel JS Profiler dejó de estar disponible por completo y ya no se puede volver a habilitar.

Para generar perfiles del rendimiento de la CPU, usa el panel Rendimiento.

Error de Chromium: 40262073.

Otros aspectos destacados

Estas son algunas de las correcciones y mejoras más importantes de esta versión:

  • Red:
    • Se corrigió un error con el análisis incorrecto de cookies de varias líneas (325410304).
    • Se corrigió la vista previa de la pila de llamadas en la columna Initiator (327665602).
  • Supervisor de rendimiento: Las casillas de verificación de seguimiento ahora son las mismas que en el resto de la IU (1467464).
  • Sources: Se agregó el resaltado de sintaxis para documentos XHTML (327940244).
  • Configuración > Dispositivos: El Galaxy Fold anterior se reemplaza por el Galaxy Z Fold 5 más reciente (40113439).
  • Rendimiento: Ahora, todos los resultados de la búsqueda coincidentes se destacan cuando se realiza una búsqueda con Ctrl/Cmd + F (1523279).
  • Recursos para desarrolladores: Ahora también se muestran los recursos cargados a través de extensiones de lenguaje, como la extensión de Chrome para la compatibilidad con DevTools de C/C++ (DWARF) (40746829).
  • Rendimiento: Se corrigió la pila de llamadas recortada y su mal diseño en la pestaña Resumen (325314708).
  • Panel lateral: Los botones Cerrar ahora se pueden enfocar, por lo que los paneles se pueden cerrar con el teclado.

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 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 funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

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