Novedades de Herramientas para desarrolladores, Chrome 124

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.

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 redes, 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 check_box Reordenamiento de paquetes.

Para limitar una conexión WebRTC, especifica los parámetros relacionados con los paquetes en un perfil personalizado en settings 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.

En la Descripción general, aparece un grupo de animación marcado con un ícono de mouse. 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.

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.

Las funciones con elementos secundarios ocultos tienen un botón de arrow_drop_down 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.

Además, todos los iniciadores ahora tienen campos de Iniciador de en la pestaña Resumen, y los campos de Iniciador de 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 check_box_outline_blank Habilitar el muestreo de JS. Este parámetro de configuración está inhabilitado de forma predeterminada.

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

El registro está disponible en more_vert 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.

Error 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.

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 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 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.

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 niños que coincidían con el filtro, sumaba los datos de sus padres.

• 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.

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.

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 importantes 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 de la pila de llamadas en la pestaña Resumen (325314708).
• Panel lateral: Ahora se pueden enfocar los botones de cierre 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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

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