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 fácilmente 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 Elements, abre el panel Accesibilidad y selecciona la casilla de verificación Habilitar el árbol de accesibilidad de página completa. 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 ella para activar o desactivar la vista de á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 se seleccionó el nodo del 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 el árbol del DOM ⬌ de la vista de árbol de accesibilidad

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

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

Á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 mostraba en una sola línea.

Pestaña Cambios

Problemas de Chromium: 1238818, 1268754 , 1086491

Establecer un tiempo de espera más largo para el registro del flujo de usuarios

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

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 (demora 6 segundos). No se pudo volver a reproducir este flujo de usuarios porque supera los 5 segundos (el tiempo de espera predeterminado).

Podemos usar la nueva configuración de Tiempo de espera para corregir esto. Expande el paso en el que hacemos clic en el elemento de menú. Edita el paso en Add timeout y configúralo en 6,000 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 el registro de 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 asegurarte de 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 hasta ella en Chrome y, luego, en Herramientas para desarrolladores, ve a Aplicación > Memoria caché atrás/adelante. A continuación, haz clic en el botón Test back/forward cache (Probar la memoria caché atrás/adelante) y las Herramientas para desarrolladores intentarán salir y volver para determinar si la página se pudo restablecer desde 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 Memoria caché atrás/adelante

Problema de Chromium: 1110752

Nuevo filtro del panel Propiedades

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

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

Filtro del panel de propiedades

Problema de Chromium: 1269674

Emular la función multimedia de colores forzados de CSS

La función de medios de CSS de colores forzados 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 en la página una paleta de colores limitada que elige el usuario.

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

Problema de Chromium: 1130859

Mostrar reglas cuando se coloca el cursor sobre un comando

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

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

Mostrar reglas cuando se coloca el cursor sobre un comando

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 volver a reproducir XHR y expandir todos los resultados de la búsqueda

Combinaciones de teclas para reproducir XHR en el panel de red

Selecciona una solicitud XHR en el panel Network y presiona R en el teclado para volver a reproducir la XHR. Anteriormente, solo se podía volver a reproducir XHR a través del menú contextual (clic derecho > Replay XHR).

reproducir XHR

Problema de Chromium: 1050021

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

Se agrega un nuevo acceso directo en la pestaña Buscar, lo 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 con un clic en un archivo a la vez.

Abre la pestaña de búsqueda. Para ello, ve a Esc > el 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. Concéntrate 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 }

Ve a las combinaciones de teclas para consultar 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 enumerará 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 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 muestra dos elementos, ambos con el mismo "id"

Problema de Chromium: 772558

Panel de fuentes mejorado

Se realizaron muchas mejoras de estabilidad en el panel Sources cuando lo actualizamos para usar CodeMirror 6. Estas son algunas mejoras notables:

Considerablemente más rápido al abrir archivos grandes (p.ej., WASM, JavaScript)
Olvídate del desplazamiento aleatorio cuando recorres el código.
Sugerencias mejoradas de autocompletar para fuentes editables (p.ej., fragmentos, anulación local)

Problema de Chromium: 1241848

Otros aspectos destacados

Estas son algunas correcciones notables en esta versión:

Mostrar correctamente el diagrama de cascada de las solicitudes de red Anteriormente, el estilo estaba dañado. (1275501).
El código destacado no funcionaba al buscar en documentos con líneas muy largas en el panel Fuentes. Ya está arreglada. (1275496).
No habrá más pestañas duplicadas de Carga útil 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).
Admitir caracteres arbitrarios (p.ej., ,, .) 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 ahora 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 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 plataforma 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.
Para informar un problema de Herramientas para desarrolladores, use Más opciones > Ayuda > Informar 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.