Novedades de Herramientas para desarrolladores (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Se mejoró la depuración de los esquemas de diseño faltantes.

DevTools incluye varias mejoras para ayudarte a identificar y depurar problemas con hojas de estilo faltantes más rápido:

  • El árbol Sources > Page ahora solo muestra los diseños de página implementados y cargados correctamente para minimizar la confusión.
  • En Sources > Editor, ahora se subrayan y muestran las indicaciones de herramientas de error intercaladas junto a las sentencias @import, url() y href que fallaron.

Sentencias subrayadas con información sobre herramientas en el panel de fuentes

  • Console, además de los vínculos a las solicitudes que fallaron, ahora proporciona vínculos a la línea exacta que hace referencia a una hoja de estilo que no se pudo cargar.

La consola proporciona vínculos a las líneas exactas con instrucciones problemáticas.

  • El panel Red propaga de forma coherente la columna Initiator con vínculos a la línea exacta que hace referencia a un diseño de página que no se pudo cargar.

  • En el panel Issues, se enumeran todos los problemas de carga de los diseños de página, incluidas las URLs rotas, las solicitudes fallidas y las instrucciones @import mal ubicadas.

Panel de problemas con vínculos a fuentes y solicitudes

Problemas de Chromium: 1440626, 1442198 y 1453611.

Compatibilidad con los tiempos lineales en Elementos > Estilos > Editor de suavización

El Editor de suavización Editor de suavización. en Elementos > Estilos te permite ajustar los valores de transition-timing-function y animation-timing-function con un clic. En esta versión, el editor de suavización Editor de suavización. obtiene la compatibilidad con la función de temporizació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 parámetros 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

La sección Application > Storage admite buckets de almacenamiento. Los buckets de almacenamiento son independientes entre sí, por lo que puedes especificar la priorización de expulsión para segmentos 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 DevTools, navega a Application > Storage > Indexed DB y ejecuta el código. DevTools ahora te muestra los buckets y su contenido. Selecciona un bucket para ver sus metadatos.

Visualizar los metadatos de un bucket

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

La nueva vista de metadatos unificados.

Problemas de Chromium: 1448011 y 1406017.

Lighthouse 10.3.0

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

Una verificación de encabezados de tabla aprobada.

Consulta también la lista completa de cambios. Para conocer los aspectos básicos del uso del panel Lighthouse en DevTools, consulta Lighthouse: Optimiza la velocidad del sitio web.

Error de Chromium: 772558.

Accesibilidad: Comandos del teclado y lectura de pantalla mejorada

Las Herramientas para desarrolladores ahora admiten más combinaciones de teclas y corrigen problemas 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 las combinaciones de teclas de MacOS, consulta Acciones de puntero alternativas.
  • Aplicaciones de lectores de pantalla:
    • No se anunciarán innecesariamente las etiquetas de casillas de verificación dos veces.
    • Anunciará los nombres de los encabezados de las columnas que se pueden ordenar cuando presiones el atajo "Leer encabezado de columna".

El equipo de DevTools agradece a Yanling Wang y Elorm Coch por implementar estas mejoras.

Errores de Chromium: 1446482, 1414952.

Otros aspectos destacados

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

  • El panel Network sigue grabando la actividad de la red incluso después de que hayas interactuado con la línea de tiempo (1422552).
  • El panel Cobertura ahora reconoce si hubo activación de renderización previa o navegación en la caché de atrás/adelante y te solicita que vuelvas a cargar la página (1393057).
  • Ahora puedes navegar por el panel Sources > Breakpoints con el teclado: Flecha hacia arriba y Flecha hacia abajo para desplazarte y Espacio para seleccionar (1446150).
  • Se corrigió la carga y el filtrado de archivos HAR en el panel Network (1450622).
  • El diagrama de llama en el panel Rendimiento ahora coloca pequeños espacios entre los seguimientos para renderizarlos mejor (1452150).
  • Se corrigió la asignación automática de archivos incorporados en 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con DevTools.

Novedades de DevTools

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