Novedades de Herramientas para desarrolladores (Chrome 98)

Jecelyn Yeen

Función de vista previa: Árbol de accesibilidad de página completa

El nuevo árbol de accesibilidad de página completa te permite obtener más fácilmente una descripción general del árbol de accesibilidad de página completa y comprender mejor cómo se expone tu contenido web a la tecnología de asistencia.

En el panel Elements, abre el panel Accessibility y selecciona la casilla de verificación Enable full-page accessibility tree. Luego, vuelve a cargar las Herramientas para desarrolladores y verás un nuevo botón de accesibilidad en el panel Elements.

Puedes hacer clic en él para cambiar a la vista de árbol de accesibilidad de página completa. Puedes expandir nodos o hacer clic para ver detalles en el panel Accesibilidad.

Selecciona un nodo y vuelve a la vista de árbol del DOM. Ahora se seleccionó el nodo DOM correspondiente. Esta es una excelente manera de comprender la asignación entre el nodo del DOM y su nodo del árbol de accesibilidad. Esto también funciona para la vista de árbol del DOM ⬌ árbol de accesibilidad.

Anteriormente, el árbol de accesibilidad estaba disponible en el panel Accesibilidad. La vista es limitada y solo te permite explorar un solo nodo y sus antecesores.

Nuestro equipo sigue trabajando activamente en esta función en versión preliminar. Queremos conocer tu opinión para seguir mejorando la función.

Árbol de accesibilidad de página completa

Error de Chromium: 887173

Cambios más precisos en la pestaña Cambios

Los cambios de código en la pestaña Changes se imprimen automáticamente con un formato legible.

Anteriormente, era difícil rastrear los cambios reales del código fuente reducido porque todo el código se mostraba en una sola línea.

Pestaña Cambios

Problemas de Chromium: 1238818, 1268754 y 1086491

Establece un tiempo de espera más largo para la grabación del flujo de usuarios

Ahora puedes ajustar la configuración de Tiempo de espera en el Grabador para todos los pasos o para un paso específico. Esto es especialmente útil para las páginas con solicitudes de red lentas y animaciones extensas.

Por ejemplo, grabé un flujo de usuarios en esta página de demostración para cargar y hacer clic en el elemento del menú. Sin embargo, la carga de los elementos del menú es lenta (tarda 6 segundos). La repetición de este flujo de usuarios falló porque supera los 5 segundos (el tiempo de espera predeterminado).

Podemos usar la nueva configuración de Tiempo de espera para solucionar este problema. Expande el paso en el que hacemos clic en el elemento del menú. Edita el paso con Agregar tiempo de espera y configúralo en 6000 milisegundos (igual a 6 s).

De manera opcional, puedes ajustar el Tiempo de espera en la Configuración de repetición para todos los pasos. Expande la Configuración de repetición y edita el valor de Tiempo de espera.

Configuración de tiempo de espera para la grabación del flujo del usuario

Error de Chromium: 1257499

Cómo asegurarte de que tus páginas se puedan almacenar en caché con la pestaña Memoria caché atrás/adelante

La memoria caché atrás/adelante (o bfcache) es una optimización del navegador que permite la navegación instantánea hacia atrás y hacia adelante.

La nueva pestaña Caché de atrás/adelante puede ayudarte a probar tus páginas para garantizar que estén optimizadas para la bfcache y detectar cualquier problema que pueda impedir que sean aptas.

Para probar una página en particular, navega a ella en Chrome y, luego, en Herramientas para desarrolladores, ve a Aplicación > Caché atrás-adelante. A continuación, haz clic en el botón Test back/forward cache y las Herramientas para desarrolladores intentarán salir de la página y luego regresar para determinar si esta se puede restablecer desde la bfcache.

Como desarrolladores web, es fundamental saber cómo optimizar tus páginas para la bfcache en todos los navegadores, ya que mejorará significativamente la experiencia de navegación de los usuarios, especialmente aquellos con redes o dispositivos más lentos.

Pestaña de la memoria caché atrás/adelante

Problema de Chromium: 1110752

Nuevo filtro del panel Propiedades

Si quieres enfocarte en una propiedad específica en el panel Propiedades, ahora puedes escribir el nombre o el valor de esa propiedad en el nuevo cuadro de texto Filtro.

De forma predeterminada, no se muestran las propiedades cuyo valor es null o undefined. Habilita la casilla de verificación Mostrar todo para ver todas las propiedades.

Estas mejoras te permiten acceder más rápido a las propiedades que te interesan y, por lo tanto, mejorar tu productividad.

Filtro del panel Propiedades

Error de Chromium: 1269674

Emula la función de medios de CSS forced-colors

La función de medios de CSS forced-colors se usa para detectar si el agente de usuario habilitó un modo de colores forzados (p.ej., el modo de contraste alto de Windows) en el que se aplica una paleta de colores limitada elegida por el usuario en la página.

Abre el menú de comandos, ejecuta el comando Mostrar renderización y, luego, configura el menú desplegable Emular la función de medios de CSS forced-colors.

Función de medios de CSS forced-colors

Error de Chromium: 1130859

Comando para mostrar reglas al colocar el cursor encima

Ahora puedes abrir el menú de comandos y ejecutar el comando Show rulers on hover. Las reglas de página facilitan la medición del ancho y la altura de un elemento.

Anteriormente, solo podías habilitar las reglas de página a través de la casilla de verificación Configuración > Mostrar reglas.

Comando para mostrar reglas al colocar el cursor encima

Problema de Chromium: 1270562

Compatibilidad con row-reverse y column-reverse en el editor de Flexbox

El editor de Flexbox agregó dos botones nuevos para admitir row-reverse y column-reverse en flex-direction.

Editor de Flexbox

Problema de Chromium: 1263866

Nuevas combinaciones de teclas para reproducir XHR y expandir todos los resultados de la búsqueda

Combinaciones de teclas para volver a reproducir XHR en el panel de red

Selecciona una solicitud XHR en el panel Red y presiona R en el teclado para volver a ejecutar la XHR. Anteriormente, solo podías reproducir el XHR a través del menú contextual (clic con el botón derecho > Replay XHR).

Repetir XHR

Error de Chromium: 1050021

Combinación de teclas para expandir todos los resultados de la búsqueda

Se agregó un nuevo acceso directo en la pestaña Búsqueda que te permite expandir y contraer todos los resultados de la búsqueda. Anteriormente, solo podías expandir y contraer los resultados de la búsqueda haciendo clic en un archivo a la vez.

Abre la pestaña de búsqueda con Esc > menú de 3 puntos > Buscar. Ingresa una cadena de búsqueda (p.ej., función) y presiona Intro para ver la lista de resultados de la búsqueda. Enfócate en los resultados de la búsqueda y usa el siguiente acceso directo para expandir o contraer los archivos de búsqueda:

  • Windows / Linux: Ctrl + Shift + { o }
  • MacOS: Cmd + Options + { o }

Consulta las combinaciones de teclas para obtener información sobre las combinaciones de teclas en Chrome DevTools.

Error de Chromium: 1255073

Lighthouse 9 en el panel de Lighthouse

El panel Lighthouse ahora ejecuta Lighthouse 9. Lighthouse ahora mostrará todos los elementos que comparten el mismo ID.

El ID de elemento no único es un problema de accesibilidad común. Por ejemplo, el ID al que se hace referencia en un atributo aria-labelledby se usa en varios elementos.

Consulta Novedades de Lighthouse 9.0 para obtener más detalles sobre las actualizaciones.

​Una auditoría de Lighthouse para "Todos los elementos enfocables deben tener un "id" único", que muestra dos elementos, ambos con el mismo "id"

Error de Chromium: 772558

Panel de fuentes mejorado

Se realizaron muchas mejoras de estabilidad en el panel Fuentes, ya que lo actualizamos para que use CodeMirror 6. Estas son algunas de las mejoras más importantes:

  • Mucho más rápido al abrir archivos grandes (p.ej., WASM, JavaScript)
  • Ya no habrá desplazamientos aleatorios cuando recorras el código
  • Se mejoraron las sugerencias de autocompletar para las fuentes editables (p. ej., resúmenes y reemplazos locales).

Error de Chromium: 1241848

Otros aspectos destacados

Estas son algunas correcciones destacadas en esta versión:

  • Se muestra correctamente el diagrama de cascada de las solicitudes de red. Anteriormente, el diseño estaba dañado. (1275501)
  • Se interrumpió el resaltado de código cuando se buscaba en documentos con líneas muy largas en el panel Fuentes. Ya se solucionó. (1275496)
  • Ya no hay pestañas Carga útil duplicadas en las solicitudes de red. (1273972)
  • Se corrigieron los detalles faltantes de los cambios de diseño en la sección Resumen del panel Rendimiento. (1259606)
  • Admite caracteres arbitrarios (p.ej., ,, .) en las búsquedas de Network Search. (1267196)

[Experimental] Endpoints en el panel de la API de Reporting

El panel experimental de la API de Reporting se introdujo en Chrome 96 para ayudarte a supervisar los informes generados en tu página y su estado.

Ahora está disponible la sección Endpoints. Te brinda una descripción general de todos los extremos configurados en el encabezado Reporting-Endpoints.

Aprende a usar la API de Reporting para supervisar incumplimientos de seguridad, llamadas a APIs obsoletas y mucho más.

Panel de la API de Reporting

Error de Chromium: 1200732

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 hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

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