Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 98)

Jecelyn Yeen

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 te ayuda a 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 árbol de accesibilidad de página completa. Luego, vuelve a cargar Herramientas para desarrolladores 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 de Accesibilidad.

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

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

Nuestro equipo sigue trabajando activamente en esta función de versión preliminar. Esperamos tus comentarios para mejorarla.

Árbol de accesibilidad de página completa

Problema de Chromium: 887173

Cambios más precisos en la pestaña Cambios

Los cambios de código en la pestaña Cambios se imprimen automáticamente.

Anteriormente, era difícil hacer un seguimiento de 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 el registro del flujo de usuarios

Ahora puedes ajustar la configuración del Tiempo de espera en la Grabadora para todos los pasos o para un paso específico. Esto es útil en especial para 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 el elemento de menú y hacer clic en él. Sin embargo, la carga de los elementos de menú es lenta (lleva 6 segundos). La reproducció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ú. Edita el paso Agregar tiempo de espera y establécelo en 6,000 milisegundos (igual a 6 s).

De manera opcional, puedes ajustar el Tiempo de espera en la Configuración de reproducció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 el registro del flujo de usuarios

Problema 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 atrás y hacia adelante.

La nueva pestaña Memoria caché 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 específica, navega a ella en Chrome y, en Herramientas para desarrolladores, ve a Aplicación > Memoria caché atrás/adelante. A continuación, haz clic en el botón Probar la memoria caché atrás/adelante y las Herramientas para desarrolladores intentarán navegar hacia atrás y hacia atrás para determinar si la página se podría restablecer desde la bfcache.

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

Pestaña Memoria caché atrás/adelante

Problema de Chromium: 1110752

Nuevo filtro del panel Propiedades

Si deseas enfocarte en una propiedad específica del panel Propiedades, ahora puedes escribir el nombre o 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 de propiedades

Problema de Chromium: 1269674

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

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

Abre el Menú de comandos, ejecuta el comando Mostrar procesamiento y, luego, configura el menú desplegable Emular CSS media feature forced-colors.

Función de medios de colores forzados de CSS

Problema de Chromium: 1130859

Mostrar reglas al colocar el cursor sobre él

Ahora puedes abrir el Menú de comandos y ejecutar el comando Mostrar reglas al colocar el cursor sobre él. Las reglas de la página facilitan la medición del ancho y el alto de un elemento.

Anteriormente, solo se podían habilitar las reglas de la página mediante la casilla de verificación Configuración > Mostrar reglas.

Mostrar reglas al colocar el cursor sobre él

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 Network

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

reproducir XHR

Problema 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 Buscar para que puedas expandir y contraer todos los resultados de la búsqueda. Anteriormente, solo se podían expandir y contraer los resultados de la búsqueda haciendo clic en un archivo a la vez.

Abre la pestaña de búsqueda a través de Esc > menú de 3 puntos > Buscar. Ingresa una cadena de búsqueda (p.ej., una 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 la siguiente combinación de teclas para expandir o contraer los archivos de búsqueda:

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

Consulta las combinaciones de teclas como referencia para las combinaciones de teclas en las Herramientas para desarrolladores de Chrome.

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

Un ID de elemento que no es ú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 las 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 muestre dos elementos, ambos con el mismo "id"

Problema de Chromium: 772558

Panel de fuentes mejoradas

Muchas mejoras de estabilidad en el panel Sources, que se actualizó para usar CodeMirror 6, A continuación, se muestran algunas mejoras importantes:

Mucho más rápido cuando se abren archivos grandes (p.ej., WASM, JavaScript)
No hay más desplazamiento aleatorio cuando se recorre el código.
Sugerencias mejoradas de autocompletar para fuentes editables (p.ej., fragmentos o anulaciones locales)

Problema de Chromium: 1241848

Otros aspectos destacados

Estas son algunas correcciones notables de esta versión:

Se muestra correctamente el diagrama de cascada de solicitudes de red. Anteriormente, el estilo no funcionaba. (1275501).
El resaltado del código no funcionaba cuando se buscaban en documentos con líneas muy largas en el panel Fuentes. Ya se solucionó. (1275496).
No hay más pestaña Carga útil duplicada en las solicitudes de red. (1273972).
Se corrigieron los detalles faltantes de los cambios de diseño en la sección Summary del panel Performance. (1259606).
Admite caracteres arbitrarios (p.ej., , y .) en las consultas de Network Search. (1267196).

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

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

La sección Extremos 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

Problema de Chromium: 1200732

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).