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

En el panel Elementos, abre el panel Accesibilidad y selecciona la casilla de verificación Habilitar la vista de página completa del árbol de accesibilidad. Luego, vuelve a cargar DevTools y verás un nuevo botón de accesibilidad en el panel Elementos.

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

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

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

Nuestro equipo sigue trabajando activamente en esta función de vista previa. Esperamos recibir tus comentarios para realizar más mejoras.

Á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 Cambios se imprimen de forma más clara automáticamente.

Anteriormente, era difícil rastrear los cambios reales del código fuente reducido porque todo el código se muestra 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 la Grabadora para todos los pasos o un paso específico. Esto es útil, en especial, para las páginas con solicitudes de red lentas y animaciones largas.

Por ejemplo, registré un flujo de usuarios en esta página de demostración para cargar y hacer clic en el elemento de 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 de menú. Para editar el paso, agrega un 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 del tiempo de espera para el registro del flujo de usuarios

Error de Chromium: 1257499

Asegúrate 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 adelante y hacia atrás.

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 DevTools, ve a Application > Back-forward Cache. A continuación, haz clic en el botón Probar caché de atrás/adelante y DevTools intentará salir de la página y regresar para determinar si esta se puede restablecer desde la bfcache.

Como desarrolladores web, es fundamental saber cómo optimizar tus páginas para 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

Error de Chromium: 1110752

Nuevo filtro del panel Propiedades

Si deseas 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 Filtrar.

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 llegar más rápido a las propiedades que te interesan y, así, mejorar tu productividad.

Filtro del panel de propiedades

Error de Chromium: 1269674

Emular la función de medios de colores forzados de CSS

La función de medios de CSS forced-colors se usa para detectar si el usuario-agente 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 que elige el usuario en la página.

Abre el menú de comandos, ejecuta el comando Show Rendering y, luego, configura el menú desplegable Emulate CSS media feature forced-colors.

Función de medios de CSS de colores forzados

Error de Chromium: 1130859

Comando Mostrar reglas al colocar el cursor encima

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

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

Comando Mostrar reglas al colocar el cursor encima

Error 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

Error de Chromium: 1263866

Nuevas combinaciones de teclas para volver a 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 reproducirla. Anteriormente, solo podías volver a reproducir la XHR a través del menú contextual (clic con el botón derecho > Replay XHR).

XHR de repetición

Error de Chromium: 1050021

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

Se agregó un nuevo atajo 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 > Búsqueda. 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 atajo para expandir o contraer los archivos de búsqueda:

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

Ve a las combinaciones de teclas para consultar las combinaciones de teclas de Chrome DevTools.

Error de Chromium: 1255073

Lighthouse 9 en el panel de Lighthouse

El panel de Lighthouse ahora ejecuta Lighthouse 9. Lighthouse ahora mostrará una lista de 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 Sources, ya que lo actualizamos para usar CodeMirror 6. Estas son algunas de las mejoras más notables:

  • Es mucho más rápido cuando se abren archivos grandes (p. ej., WASM y JavaScript).
  • No más desplazamiento aleatorio cuando se recorre el código
  • Se mejoraron las sugerencias de Autocomplete para fuentes editables (p.ej., fragmentos, anulación local)

Error de Chromium: 1241848

Otros aspectos destacados

Estas son algunas correcciones importantes de esta versión:

  • Mostrar correctamente el diagrama en cascada de las solicitudes de red Anteriormente, el estilo estaba dañado. (1275501).
  • El resaltado de código se interrumpía cuando se buscaba en documentos con líneas muy largas en el panel Fuentes. Ya se solucionó. (1275496).
  • Ya no se duplica la pestaña Carga útil 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 Red de Búsqueda. (1267196).

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

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

La sección Endpoints ya está disponible. 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 la API 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 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.