Novedades de Herramientas para desarrolladores, Chrome 124

Sofia Emelianova
Sofia Emelianova

Nuevo panel de Autocompletar

Esta versión incorpora el nuevo panel Autocompletar en Herramientas para desarrolladores. 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 predichos y los datos guardados.

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

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

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

El panel de Autocompletar

Para obtener más información, consulta Aprendizaje en Formularios y Autocompletar.

Se mejoró la limitación de la red para WebRTC

Con la reciente incorporación de parámetros relacionados con paquetes a los perfiles personalizados de limitación de red, ahora puedes limitar tus aplicaciones WebRTC directamente en Herramientas para desarrolladores. Esto es útil para probar la implementación de la 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 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 Settings > Throttling y selecciónalo en el panel Network.

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 de animaciones

El panel Animations ahora te permite inspeccionar 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 las animaciones controladas por desplazamiento.

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

En la 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 el Cronograma.

Se mejoró la compatibilidad con el anidamiento de CSS en Elements > Styles

La pestaña Elements > Styles mejora la compatibilidad con el anidamiento de CSS y ahora muestra los estilos anidados con sangría y entre llaves. El anidamiento de CSS es una forma de agrupar reglas de CSS y hacer que las cosas sean menos detalladas y más estructuradas.

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 de llamas

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

Antes y 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 de 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 llamas, haz clic con el botón derecho en una función y selecciona Reset trace.

Flechas desde los iniciadores seleccionados hasta los eventos que iniciaron

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

El antes y el después muestran flechas desde los eventos seleccionados hasta los iniciados y los vínculos con nombre en lugar de Revelar.

Además, todos los iniciadores ahora tienen campos de Iniciador para en la pestaña Resumen, y los campos de Iniciador para y Iniciado por tienen vínculos con nombres en lugar de Revelar.

Problemas de Chromium: 325604258, 325024819 y 326055289.

Lighthouse 11.6.0

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

Entre los cambios destacados, se incluye el nuevo parámetro de configuración opcional Habilitar el muestreo de JS. Este parámetro de configuración está inhabilitado de forma predeterminada.

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

Habilitar el muestreo de JS agrega pilas de llamadas de JavaScript detalladas al registro de rendimiento, pero puede ralentizar la generación de informes.

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

El registro está disponible en Menú de herramientas > Ver registro sin limitación después de que se genera el informe de Lighthouse.

Para conocer los conceptos básicos del uso del panel Lighthouse en las Herramientas para desarrolladores, consulta Lighthouse: Optimiza la velocidad del sitio web.

Problema de Chromium: 772558.

Información sobre herramientas para categorías especiales en Memory > Heap snapshots

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

El antes y el después que muestran una sugerencia descriptiva para grupos especiales de objetos.

Error de Chromium: 41490331.

Aplicación > Actualizaciones de almacenamiento

Esta versión incluye algunas actualizaciones en Application > Storage.

Bytes utilizados para el almacenamiento compartido

En la sección Aplicación > Almacenamiento > Almacenamiento compartido, ahora se 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 y entre sitios con acceso de lectura que preserva la privacidad.

Problema de Chromium: 324464353.

Web SQL dejó de estar disponible

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

Del mismo modo, 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 Coverage:

  • Ahora, la barra de estado 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 sus elementos principales.

El antes y el después del cálculo correcto de 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 las personas con deficiencia en la percepción del color que no es verde.

Antes y 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 poco uso. Ahora el panel 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

Comparte tus opiniones e inquietudes antes de que el equipo tome la decisión final de descontinuar el panel.

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

En esta versión, el panel JS Profiler está completamente obsoleto 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 destacadas de esta versión:

  • Red:
    • Se corrigió un error relacionado 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 Iniciador (327665602).
  • Supervisor de rendimiento: Las casillas de verificación ahora son las mismas que en el resto de la IU (1467464).
  • Fuentes: Se agregó el resaltado de sintaxis para documentos XHTML (327940244).
  • Configuración > Dispositivos: El Galaxy Fold anterior se reemplaza por el nuevo Galaxy Z Fold5 (40113439).
  • Rendimiento: Todos los resultados de la búsqueda coincidentes ahora se destacan cuando se busca 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 de C/C++ DevTools Support (DWARF) (40746829).
  • Rendimiento: Se corrigió el diseño incorrecto y el recorte del registro de pila de llamadas en la pestaña Resumen (325314708).
  • Panel lateral: Ahora se pueden enfocar los botones de Cerrar, 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 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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores