Novedades de Herramientas para desarrolladores (Chrome 116)

Se mejoró la depuración de las hojas de diseño faltantes

Las Herramientas para desarrolladores reciben varias mejoras para ayudarte a identificar y depurar problemas con las hojas de estilo faltantes más rápido:

• El árbol Fuentes > Página ahora solo muestra las hojas de estilo que se implementaron y cargaron correctamente para minimizar la confusión.
• Ahora, Fuentes > Editor subraya y muestra sugerencias sobre errores intercalados junto a las instrucciones @import, url() y href que fallaron.

• La consola, además de los vínculos a las solicitudes con errores, ahora proporciona vínculos a la línea exacta que hace referencia a una hoja de diseño que no se cargó.

• El panel Network siempre completa la columna Initiator con vínculos a la línea exacta que hace referencia a una hoja de diseño que no se cargó.

• En el panel Issues, se enumeran todos los problemas de carga de hojas de estilo, incluidas las URLs rotas, las solicitudes fallidas y las instrucciones @import mal ubicadas.

Problemas de Chromium: 1440626, 1442198, 1453611.

Compatibilidad con la sincronización lineal en Elements > Styles > Easing Editor

El Editor de aceleración en Elementos > Estilos te permite ajustar los valores de transition-timing-function y animation-timing-function con un solo clic. En esta versión, el Editor de aceleración ahora admite la función de sincronización lineal.

Para configurar los tiempos lineales, haz clic en el botón del selector lineal. Para agregar un punto de control, haz clic en cualquier parte de la línea. Para quitar un punto de control, haz doble clic en él. También puedes elegir uno de los ajustes predeterminados: linear, elastic, bounce o emphasized. Mira el video para ver el ajuste lineal en acción.

Error de Chromium: 1421241.

Compatibilidad con buckets de almacenamiento y vista de metadatos

Se agregó compatibilidad con buckets de almacenamiento a la sección Aplicación > Almacenamiento. Los buckets de almacenamiento son independientes entre sí, por lo que puedes especificar la prioridad de descarte para las porciones de datos y asegurarte de que no se borren los datos más valiosos. Cada bucket de almacenamiento puede almacenar datos asociados con APIs de almacenamiento establecidas, como IndexedDB y CacheStorage.

Consulta este fiddle para probar la función. Abre Herramientas para desarrolladores, navega a Application > Storage > IndexedDB y ejecuta el código. Ahora, Herramientas para desarrolladores te muestra los buckets y su contenido. Selecciona un bucket para ver sus metadatos.

La vista de metadatos unificada ahora también está disponible para las secciones de almacenamiento local, de sesión y de caché.

Problemas de Chromium: 1448011 y 1406017.

Lighthouse 10.3.0

El panel Lighthouse ahora ejecuta Lighthouse 10.3.0. En particular, esta versión agrega cuatro auditorías nuevas que capturan varios problemas de accesibilidad con los encabezados de tabla y los títulos, los nombres de los botones de entrada y las discrepancias de idioma. Por ejemplo:

Consulta también la lista completa de cambios. 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.

Accesibilidad: Comandos del teclado y lectura de pantalla mejorada

Ahora las Herramientas para desarrolladores admiten más combinaciones de teclas y se corrigieron problemas relacionados con los lectores de pantalla:

• Ahora puedes abrir el menú contextual con una combinación de teclas, por ejemplo, Mayúsculas + F10 en Windows y muchas distribuciones de Linux. Para conocer los atajos de MacOS, consulta Acciones alternativas del puntero.
• Aplicaciones de lectores de pantalla:
  • No anunciará innecesariamente las etiquetas de las casillas de verificación dos veces.
  • Anunciará los nombres de los encabezados de las columnas ordenables cuando presiones el atajo "Leer encabezado de columna".

El equipo de Herramientas para desarrolladores agradece a Yanling Wang y Elorm Coch por implementar estas mejoras.

Problemas de Chromium: 1446482, 1414952.

Otros aspectos destacados

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

• El panel Network sigue registrando la actividad de red incluso después de que interactuaste con la línea de tiempo (1422552).
• El panel Coverage ahora reconoce si hubo activación de la renderización previa o navegación por la memoria caché atrás/adelante, y te solicita que vuelvas a cargar la página (1393057).
• Ahora puedes navegar por el panel Fuentes > Puntos de interrupción con el teclado: Flecha arriba y Flecha abajo para moverte, y Espacio para seleccionar (1446150).
• Se corrigió la carga y el filtrado de archivos HAR en el panel Network (1450622).
• El gráfico de llamas del panel Rendimiento ahora incluye pequeños espacios entre los registros para renderizarlos mejor (1452150).
• Se corrigió la asignación automática para los archivos incorporados en los mapas de origen (1446383).

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.

• 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 DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

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