Novedades de Herramientas para desarrolladores, Chrome 124

Sofia Emelianova
Sofia Emelianova

Nuevo panel de Autocompletar

Esta versión incluye el nuevo panel Autocompletar en Herramientas para desarrolladores. Autocompletar de Chrome brinda una forma conveniente de completar formularios de manera automática en sitios web con direcciones guardadas. El nuevo panel Autocompletar te permite inspeccionar la asignación entre los campos del formulario, los valores de autocompletado previstos y los datos guardados.

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

  1. En Profile Autofill, haz clic en cualquiera de los botones Fill form ... y, luego, en Submit. Luego, en la ventana de diálogo Save address?, haz clic en Save y vuelve a la página con el formulario.
  2. Abre Herramientas para desarrolladores y activa un evento de autocompletado: selecciona un campo del formulario y elige la dirección de la lista desplegable.

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

El panel de Autocompletar

Para obtener más información, consulta Formularios de aprendizaje y Autocompletar.

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 Herramientas para desarrolladores. Esto es útil para probar tu implementación de comunicaciones en tiempo real, sin la necesidad de usar software de terceros.

Los parámetros nuevos son los siguientes: Packet Loss (porcentaje), Packet Queue Length (cantidad de paquetes) y la marca check_box Packet Reordering.

El antes y el 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 el paquete en un perfil personalizado en settings Configuración > Regulación y selecciónala 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, de nuevo en la página, haz clic en Iniciar y Llamar.

Problema de Chromium: 41175925.

Compatibilidad con animaciones basadas en desplazamientos en el panel Animaciones

El panel Animations ahora te permite inspeccionar animaciones controladas por desplazamiento.

Prueba la función en esta página de demostración. Abre el panel Animations y vuelve a cargar la página para capturar animaciones basadas en desplazamientos.

Un grupo de animaciones basadas en desplazamientos marcadas con un ícono de mouse.

Un grupo de animación marcado con un ícono de mouse de ratón aparece en la Descripción general. Ahora puedes inspeccionarla. El grupo muestra valores de píxeles en lugar de milisegundos en Timeline.

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

La opción Elementos > La pestaña Estilos mejora la compatibilidad con el anidamiento de CSS y ahora muestra los estilos anidados con sangría y llaves. El anidado de CSS es una forma de agrupar las reglas de CSS y hacer que todo sea menos detallado y más estructurado.

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

Problema de Chromium: 40166888.

Panel de rendimiento mejorado

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

Ocultar 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 funciones irrelevantes y sus elementos secundarios. En el gráfico tipo 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, y agregan un menú contextual que te permite ocultar funciones y sus elementos secundarios.

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

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 el iniciador al evento seleccionado. Ahora, la pista también muestra una flecha desde el evento seleccionado hasta el que inició, si corresponde.

El antes y el después se muestran flechas de los eventos seleccionados a iniciados y vínculos con nombre en lugar de mostrar.

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

Problemas de Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

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

Entre los cambios más notables, se encuentra 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.

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

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

Seguimiento de rendimiento sin muestreo de JS (izquierda) y con (derecha)

El seguimiento está disponible en more_vert Menú Herramientas > Puedes ver el seguimiento ilimitado después de que se genere el informe de Lighthouse.

Para aprender los conceptos básicos del uso del panel de Lighthouse en Herramientas para desarrolladores, consulta Lighthouse: Cómo optimizar la velocidad del sitio web.

Problema de Chromium: 772558.

Cuadros de información para categorías especiales en Memoria > Instantáneas del montón

Las instantáneas de montón del panel Memory tienen grupos especiales de objetos que no se basan en constructores. Cuando colocas el cursor sobre esos objetos, el panel Memoria ahora te muestra información sobre la herramienta 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 información sobre la herramienta descriptiva para grupos especiales de objetos.

Problema de Chromium: 41490331.

Aplicación > Actualizaciones de almacenamiento

Esta versión trae algunas actualizaciones a Application > Almacenamiento.

Bytes utilizados para el almacenamiento compartido

Haz clic en Application > Almacenamiento > Almacenamiento compartido 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 a almacenamiento entre sitios con acceso de lectura que preserva la privacidad.

Problema de Chromium: 324464353.

Web SQL está completamente obsoleto

Chrome dio de baja 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.

De la misma manera, las Herramientas para desarrolladores quitaron la sección Web SQL del panel Aplicación.

Problema 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 para las URLs filtradas. Anteriormente, en lugar de sumar los datos de uso de los elementos secundarios que coincidían con el filtro, se sumaban los datos de los elementos superiores.

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

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

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

Problema de Chromium: 41494198, 329253687.

Es posible que el panel Capas esté obsoleto

Es posible que el panel Capas pronto deje de estar disponible debido al poco 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 dude en compartir sus 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 no se puede volver a habilitar.

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

Problema de Chromium: 40262073.

Otros aspectos destacados

Estas son algunas correcciones y mejoras importantes en 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 Initiator (327665602).
  • Monitor de rendimiento: Las casillas de verificación del seguimiento ahora son las mismas que en el resto de la IU (1467464).
  • Fuentes: Se agregó la sintaxis destacada para documentos XHTML (327940244).
  • Configuración > Dispositivos: Se reemplazó el antiguo Galaxy Fold por un nuevo Galaxy Z Fold5 (40113439).
  • Rendimiento: Todos los resultados de la búsqueda coincidentes ahora se destacan cuando se realiza una búsqueda con Ctrl/Ctrl + Ctrl (1523279).
  • Recursos para desarrolladores: Ahora también se muestran los recursos cargados con extensiones de lenguaje, como la extensión de Chrome Compatibilidad con Herramientas para desarrolladores de C/C++ (DWARF) (40746829).
  • Rendimiento: Se corrigió la pila de llamadas recortada y su diseño incorrecto en la pestaña Resumen (325314708).
  • Panel lateral: Los botones Cerrar 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 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.