Qué hay de nuevo en DevTools (Chrome 98)

Published on Updated on

Translated to: English, Português, 한국어, 中文, Pусский, 日本語

Gracias Carlos Caballero por la traducción y Miguel Ángel por la revisión.

¿Tienes interés en mejorar DevTools? Regístrate para participar en la Google User Research aquí.

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

El nuevo arbol de accesibilidad de página completa hace más fácil obtener una visión del árbol de accesibilidad y te ayuda a una mejor comprensión de cómo el contenido de tu web es expuesto a la tecnología de asistencia.

En el panel Elementos, abre el panel Accessibilidad y selecciona la casilla Enable full-page accessibility tree. A continuación, recarga DevTools y verás un nuevo botón de accesibilidad en el panel Elementos.

Clic en este botón para activar/desactivar la vista de árbol de accesibilidad de pantalla completa. Puede expandir nodos o cliquear para ver detalles en el panel de Accesibilidad.

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

Nuestro equipo está aún trabajando activamente en esta novedad. ¡Estamos buscando tu feedback para futuras mejoras!

Árbol de accesibilidad de pantalla completa

Chromium issue: 887173

Cambios más precisos en la pestaña Cambios

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

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

Pestaña Cambios

Chromium issues: 1238818, 1268754 , 1086491

Establecer un tiempo de espera más largo para la grabación del flujo de usuario

Ahora puede ajustar la configuración de Tiempo de espera (timeout) en el panel Recorder para todos los pasos o para un paso específico. Esto es útil especialmente para páginas con solicitudes de red lentas y animación prolongada.

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

Podemos usar la nueva configuración de Tiempo de espera para arreglar esto. Expanda el paso en el que hacemos clic en el elemento del menú. Edite el paso mediante Add timeout y configúrelo en 6000 milisegundos (igual a 6s).

Opcionalmente, puede ajustar el Tiempo de espera en Replay settings para todos los pasos. Expanda la configuración de reproducción (Replay settings) y edite el valor de Timeout.

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

Chromium issue: 1257499

Asegúrese de que sus páginas se puedan almacenar en caché con la pestaña de caché Atrás/adelante

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é atrás/adelante puede ayudarle a probar sus páginas para asegurarse de que estén optimizadas para bfcache e identificar cualquier problema que pueda estar impidiendo que sean elegibles.

Para probar una página en particular, navegue hasta ella en Chrome y luego, en DevTools, vaya a Aplicación > Caché de páginas completas. A continuación, haga clic en el botón Realizar prueba y DevTools intentará navegar hacia adelante y hacia atrás para determinar si la página se puede restaurar desde bfcache.

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

Pestaña de caché atrás/adelante

Chromium issue: 1110752

Nuevo filtro de panel de propiedades

Si desea enfocarse en una propiedad específica en el panel Propiedades, ahora puede escribir el nombre o el valor de esa propiedad en el nuevo cuadro de texto Filter

Por defecto, las propiedades cuyo valor son null o undefined no se muestran. Active la casilla de verificación Show All para ver todas las propiedades.

¡Estas mejoras le permiten llegar a las propiedades que le interesan más rápido y, por lo tanto, mejorar su productividad!

Filtro del panel de propiedades

Chromium issue: 1269674

Emular la característica de medios de colores forzados de CSS

La función de medios CSS colores forzados se usa para detectar si el agente de usuario ha habilitado un modo de colores forzados (por ejemplo, el modo de alto contraste de Windows) donde impone una paleta de colores limitada elegida por el usuario en la página.

Abra el Menú de comandos, ejecute el comando Mostrar renderizado y luego configure el menú desplegable Emular función multimedia CSS forced-colors.

Emular función multimedia de CSS forced-colors

Chromium issue: 1130859

Mostrar reglas con el comando hover

Ahora puede 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 el alto de un elemento.

Anteriormente, solo podía habilitar las reglas de página a través de la casilla de verificación Preferencias > Show rulers on hover.

Mostrar reglas con el comando hover

Chromium issue: 1270562

Soporte para row-reverse y column-reverse en el editor Flexbox

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

Editor de flexbox

Chromium issue: 1263866

Nuevos atajos de teclado para reproducir XHR y expandir todos los resultados de búsqueda

Atajos de teclado para repetir XHR en el panel Red

Seleccione una solicitud XHR en el panel Red y presione R en el teclado para repetir el XHR. Anteriormente, solo podía repetir el XHR a través del menú contextual (clic con el botón derecho > Repetir XHR)

Repetir XHR

Chromium issue: 1050021

Atajo de teclado para expandir todos los resultados de búsqueda

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

Abra la pestaña de búsqueda a través de Esc > Menú de 3 puntos > Buscar. Ingrese una cadena de búsqueda (por ejemplo, function) y presione Entrar para ver la lista de resultados de búsqueda. Enfóquese en los resultados de la búsqueda y use el siguiente atajo para expandir/contraer los archivos de búsqueda:

  • Windows / Linux - Ctrl + Shift + { or }
  • MacOS - Cmd + Options + { or }

Vaya a los atajos de teclado para consultar los atajos de teclado en Chrome DevTools.

Lighthouse 9

El panel Lighthouse ahora ejecuta Lighthouse 9. Lighthouse ahora enumerará todos los elementos que comparten la misma identificación.

La identificación de elemento no único es un problema de accesibilidad común. Por ejemplo, la identificación a la que se hace referencia en un atributo aria-labelledby se usa en múltiples elementos.

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

A Lighthouse audit for 'All focusable elements must have a unique `id`', showing two elements, both with the same `id`

Chromium issue: 772558

Panel Fuentes mejorado

Muchas mejoras de estabilidad en el panel Fuentes a medida que lo actualizamos para usar CodeMirror 6. Aquí hay algunas mejoras notables:

  • Significativamente más rápido al abrir archivos grandes (por ejemplo, WASM, JavaScript)
  • No más desplazamiento aleatorio al recorrer el código
  • Sugerencias de autocompletado mejoradas para códigos editables (por ejemplo, snippets, sobreescribir valores locales)

Chromium issue: 1241848

Destacados varios

Estas son algunas correcciones notables en esta versión:

  • Visualización adecuada del diagrama de cascada de las solicitudes de red. Anteriormente, el estilo estaba roto. (1275501)
  • El resaltado del código se rompía al buscar en documentos con líneas muy largas en el panel Fuentes. Ahora está arreglado. (1275496)
  • No más pestañas duplicadas de Payload en las solicitudes de red. (1273972)
  • Se corrigieron los detalles de los cambios de diseño que faltaban en la sección Resumen del panel Rendimiento. (1259606)
  • Admite caracteres arbitrarios (por ejemplo, ,, .), en consultas de Búsqueda de red. (1267196)

[Experimental] Endpoints en el panel de informes de API

Para habilitar el experimento, marque la casilla de verificación Enable Reporting API panel in the Application panel en Configuración > Experimentos.

El panel experimental API Reporting se introdujo en Chrome 96 para ayudarlo a monitorear los informes generados en su página y su estado.

La sección Endpoints ya está disponible. Le brinda una descripción general de todos los endpoints configurados en el encabezado Reporting-Endpoints.

Aprenda a usar la API de informes para monitorear violaciones de seguridad, llamadas a API obsoletas y más.

Panel de informes de API

Chromium issue: 1200732

Descarga de los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo por defecto. Estos canales de prueba te dan acceso a las últimas funcionalidades de DevTools, probar innovadoras APIs de la plataforma web y encontrar errores en tus sitios antes que tus usuarios lo hagan.

Ponerse en contacto con el equipo de Chrome DevTools

Usa las siguientes opciones para hablar sobre nuevas funcionalidades y cambios en el artículo o cuaquier cosa relacionada con DevTools.

  • Envía una sugerencia u opinión a través de crbug.com.
  • Reporta un problema con DevTools usando Más opciones   Más   > Ayuda > Reportar un problema con DevTools in DevTools.
  • Haz un Tweet a @ChromeDevTools.
  • Deja un comentario en los vídeos de YouTube sobre Qué hay de nuevo en DevTools.

Más características de DevTools

Por favor, revisa la versión en inglés de What's New In DevTools para una lista completa de las características lanzadas. Debajo tienes más contenido que ha sido traducido al castellano.

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.