Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores, Chrome 124

Sofia Emelianova

Nuevo panel de Autocompletar

Esta versión lleva el nuevo panel Autocompletar a Herramientas para desarrolladores. La función Autocompletar de Chrome ofrece una manera 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:

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

El panel Autocompletar se abre automáticamente y muestra los campos del formulario detectados, los campos inferidos para la función Autocompletar y los valores guardados.

El panel Autocompletar

Para obtener más información, consulta Más información sobre formularios y Autocompletar.

Limitación de red mejorada para WebRTC

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

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

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

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

Problema de Chromium: 41175925.

Compatibilidad con animaciones basadas en desplazamientos en el panel Animaciones

El panel Animations ahora te permite inspeccionar animaciones basadas en desplazamientos.

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

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

En Descripción general, aparece un grupo de animación marcado con el ícono del mouse del mouse. Ahora puedes inspeccionarla. El grupo muestra valores de píxeles en lugar de milisegundos en la sección Cronograma.

Se mejoró la compatibilidad con la anidación 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. La anidación de CSS es una forma de agrupar las reglas de CSS y hacer que todo sea menos detallado y estructurado.

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

Problema de Chromium: 40166888.

Panel Rendimiento mejorado

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

Ocultar funciones y sus elementos secundarios en el gráfico de llamas

Para filtrar el ruido del gráfico de llama en Rendimiento > Principal, ahora puedes ocultar las 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.

Las funciones con elementos secundarios ocultos tienen un botón arrow_drop_down 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 tipo llama, haz clic con el botón derecho en una función y selecciona Restablecer seguimiento.

Flechas de iniciadores seleccionados a eventos que iniciaron

Anteriormente, cuando se seleccionaba un evento en el segmento Principal, el segmento mostraba una flecha desde el iniciador hasta el evento seleccionado. Ahora, el recorrido también muestra una flecha desde el evento seleccionado hasta el que se inició, si corresponde.

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

Además, todos los iniciadores ahora tienen campos Initiator for en la pestaña Resumen, 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 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 opcional check_box_outline_blank de 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 habilitado.

Si habilitas el muestreo de JS, se agregarán pilas de llamadas de JavaScript detalladas al registro del rendimiento, pero es posible que se ralentice 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 > Ver seguimiento ilimitado después de que se genere el informe de Lighthouse.

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

Problema de Chromium: 772558.

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

Las instantáneas del montón en el panel Memory tienen grupos especiales de objetos que no se basan en constructores. Cuando coloques el cursor sobre esos objetos, el panel Memory ahora mostrará un cuadro de información 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 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 Aplicación > Almacenamiento.

Bytes usados para el almacenamiento compartido

La sección Aplicación > Almacenamiento > Almacenamiento compartido ahora muestra la cantidad de bytes que usa un origen.

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

El almacenamiento compartido te permite tener acceso de escritura ilimitado para el 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.

Luego, Herramientas para desarrolladores quitó la sección Web SQL del panel Application.

Problema de Chromium: 327254049.

Mejoras en el panel de cobertura

En esta versión, se incorporan algunas actualizaciones al panel Cobertura:

Ahora, la barra de estado calcula correctamente las estadísticas de uso de las URLs filtradas. Antes, en lugar de sumar los datos de uso de los elementos secundarios que coincidían con el filtro, agregaba los datos del elemento superior.

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

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

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

Problema de Chromium 41494198 y 329253687.

Es posible que el panel Capas deje de estar disponible

Es posible que el panel Layers deje de estar disponible pronto debido a su poco uso. Ahora, el panel muestra un banner de advertencia en la parte superior.

Banner de advertencia en la parte superior del panel Capas, en el que se anuncia la posible baja.

No dudes en compartir tus ideas y preocupaciones 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 del Generador de perfiles de JS es completamente obsoleto y ya no se puede volver a habilitar.

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

Problema de Chromium: 40262073.

Otros aspectos destacados

Estas son algunas 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).
Monitor de rendimiento: Las casillas de verificación de seguimiento ahora son las mismas que en el resto de la IU (1467464).
Fuentes: Se agregó resaltado de sintaxis para documentos XHTML (327940244).
Configuración > Dispositivos: Se reemplazó el antiguo Galaxy Fold por el Galaxy Z Fold 5 más reciente (40113439).
Rendimiento: Todos los resultados de la búsqueda coincidentes ahora se destacan cuando se realiza una búsqueda con Ctrl/Cmd + F (1523279).
Recursos para desarrolladores: Ahora también se muestran recursos cargados a través de extensiones de lenguaje, como la extensión de Chrome para la 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 son enfocables, por lo que los paneles se pueden cerrar con el teclado.

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).