Novedades de Herramientas para desarrolladores (Chrome 116)

Se mejoró la depuración de las hojas de estilo faltantes.

Herramientas para desarrolladores obtiene una serie de mejoras que te ayudan a identificar y depurar más rápido los problemas con las hojas de estilo faltantes:

• La opción Fuentes > El árbol de página ahora muestra solo las hojas de estilo implementadas y cargadas correctamente para minimizar la confusión.
• La opción Fuentes > El editor ahora subraya y muestra información sobre la herramienta de error intercalada junto a las sentencias @import, url() y href con errores.

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

• El panel Network completa de manera constante la columna Initiator con vínculos a la línea exacta que hace referencia a una hoja de estilo que no se pudo cargar.

• En el panel Issues, se enumeran todos los problemas de carga de las hojas de estilo, incluidas las URL que no funcionan, las solicitudes fallidas y las sentencias @import mal ubicadas.

Problemas de Chromium: 1440626, 1442198, 1453611.

Compatibilidad con sincronización lineal en Elementos > Estilos > Editor de aceleración

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

Para configurar los tiempos lineales, haz clic en el botón de selección 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.

Problema de Chromium: 1421241.

Compatibilidad con buckets de almacenamiento y vista de metadatos

Haz clic en Application > La sección Storage es compatible con los buckets de almacenamiento. Los buckets de almacenamiento son independientes entre sí, de modo que puedes especificar la priorización de expulsiones para porciones de datos y asegurarte de que los datos más valiosos no se borren. Cada bucket de almacenamiento puede almacenar datos asociados con las APIs de almacenamiento establecidas, como IndexedDB y CacheStorage.

Echa un vistazo a este violín para probar la función. Abre las Herramientas para desarrolladores, navega a Aplicación > Almacenamiento > Base de datos indexada, y ejecuta el código. Herramientas para desarrolladores ahora te muestra los buckets y su contenido. Selecciona un bucket para ver sus metadatos.

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

Problemas de Chromium: 1448011, 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 capturan varios problemas de accesibilidad con los encabezados de las tablas y los subtítulos, los nombres de los botones de entrada y las incongruencias de idioma. Por ejemplo:

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

Accesibilidad: Comandos del teclado y lectura de pantalla mejorada

Herramientas para desarrolladores ahora admite más combinaciones de teclas y corrige 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 las combinaciones de teclas de macOS, consulta Acciones alternativas del puntero.
• Aplicaciones del lector de pantalla:
  • No anunciará innecesariamente las etiquetas de la casilla de verificación dos veces.
  • Se anunciarán los nombres de los encabezados de columna para las columnas que se pueden ordenar cuando presiones “Read column header” atajo.

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 correcciones y mejoras importantes en esta versión:

• El panel Red continúa registrando 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 se activó la renderización previa o la navegación en la memoria caché atrás/adelante, y te solicita que vuelvas a cargar la página (1393057).
• Ahora puedes navegar por la sección Fuentes > Panel Breakpoints con el teclado: Flecha hacia arriba y Flecha hacia abajo para moverte y Espacio para seleccionar (1446150).
• Se corrigieron la carga y el filtrado de archivos HAR en el panel Red (1450622).
• Flamechart en el panel Performance ahora coloca pequeños espacios entre los seguimientos para renderizarlos mejor (1452150).
• Se corrigió la asignación automática de archivos incorporados en los mapas de origen (1446383).

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