Qué hay de nuevo en DevTools (Chrome 105)

Published on Updated on

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

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

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

Reproducción paso a paso en la grabadora

Ahora puede establecer un punto de interrupción y reproducir un flujo de usuario paso a paso en el panel de Recorder.

Para establecer un punto de interrupción, haga clic en el punto azul al lado de un paso. Reprodúzca su flujo de usuario, la reproducción se detendrá antes de ejecutar el paso. Desde aquí, puede continuar la reproducción, ejecutar un paso o cancelar la reproducción.

Con esta función, puede visualizar y depurar fácilmente su flujo de usuario.

Visite la referencia de características del panel Recorder para más información.

Reproducción paso a paso en la grabadora

Chromium issue: 1257499

Soporte de eventos de ratón en el panel Recorder

Recorder ahora soporta añadir un paso de pasar el ratón por encima (hover) manualmente en una grabación.

Esta demo muestra un menu flotante al pasar el ratón por encima. Intente grabar un flujo de usuario y haga clic en un elemento del menú.

Si reproduce el flujo de usuario ahora, fallará porque Recorder no captura automáticamente los eventos de ratón al grabar. Para resolver esto, añada un paso manualmente para pasar el ratón por encima del selector antes de hacer clic en el elemento del menú.

Soporte de eventos de ratón en la Grabadora

Chromium issue: 1257499

Largest Contentful Paint (LCP) en el panel Performance Insights

LCP es una métrica importante, centrada en el usuario, para medir velocidad de carga percibida. Ahora puede conocer los caminos críticos y las causas raíz de un Largest Contentful Paint (LCP).

En una grabación de rendimiento, haga clic en el sello LCP en la Línea de tiempo. En el panel de detalles, puede ver la puntuación del LCP, aprender cómo arreglar recursos que ralentizan el LCP y ver el camino crítico para el recurso LCP.

Vea el panel Performance Insights para saber cómo conseguir ideas accionables y mejorar el rendimiento de su sitio con el panel.

LCP en el panel de percepción de rendimiento

Chromium issue: 1326481

Identificar parpadeos de texto (FOIT, FOUT) como causas potenciales de desplazamientos de diseño

El panel Performance Insights ahora detecta parpadeos de texto invisible (FOIT) y parpadeos de texto sin estilos (FOUT) como causas potenciales de desplazamientos de diseño.

Para ver las causas principales de un desplazamiento de diseño, haga clic en una captura de pantalla en la pista de Desplazamientos de diseño.

Vea Optimizar carga de fuentes web y pintado para aprender la técnica para evitar desplazamientos de diseño.

FOUT en el panel Performance Insights

Chromium issues: 1334628, 1328873

Controladores de protocolo en el panel de Manifiesto

Ahora puede usar DevTools para probar el registro de controlador de protocolo de URL para Aplicaciones Web Progresivas (PWA).

El registro de controladores para el protocolo URL permite a las PWAs instaladas manejar enlaces que usen un protocolo específico (por ejemplo, magnet, web+example) para una experiencia más integrada.

Navegue a la sección de Controladores de Protocolo a través del panel Aplicación > Manifiesto. Puede ver y probar todos los protocolos disponibles aquí.

Por ejemplo, instale esta PWA de demostración. En la sección Controladores de Protocolo, escriba “americano” y haga clic en Probar protocolo para abrir la página de café en la PWA.

Controladores de protocolo en el panel de Manifiesto

Chromium issues: 1300613

Insignia de capa superior en el panel de Elementos

Use la insignia de capa superior para entender el concepto de la capa superior y visualizar cómo cambia el contenido de la capa superior.

El elemento <dialog> se volvió estable recientemente en todos los navegadores. Cuando abre un diálogo, se pone en una capa superior. El contenido de nivel superior es pintado encima de todo el contenido.

En esta demo, haga clic en Open dialog.

Para ayudar a visualizar los elementos de la capa superior, DevTools agrega un contenedor de capa superior (#top-layer) al árbol del DOM. Reside después de la etiqueta de cierre </html>.

Para saltar del elemento del contenedor de la capa superior al elemento del árbol de la capa superior, haga clic en el botón revelar al lado del elemento o en el fondo del elemento en el contenedor de la capa superior.

Al lado del elemento del árbol de la capa superior (por ejemplo, el elemento de diálogo), haga clic en la insignia capa superior para saltar al contenedor de la capa superior.

Insigna de capa superior en el panel de Elementos

Chromium issue: 1313690

Enlazar información de depuración de WASM al momento de ejecutar

Ahora puede enlazar la información de depuración DWARF para WASM durante el tiempo de ejecución. Antes, el panel Fuentes solo admitía enlazar mapas de origen a archivos JavaScript y WASM.

Abra el archivo Wasm en el panel de Fuentes. Haga clic derecho en el editor y seleccione Añadir información de depuración DWARF para enlazar la información de depuración bajo demanda.

Enlazar información de depuración de WASM al momento de ejecutar

Chromium issue: 1341255

## Soporte para edición en vivo durante la depuración

Ahora puede editar la función superior de la pila sin reiniciar el depurador.

En Chrome 104, DevTools devuelve la función de reiniciar frame. Sin embargo, no se podía editar la función en la que estaba detenido. Es común para los desarrolladores que hagan una pausa en una función y luego editar esa función mientras está detenido.

Con esta actualización, el depurador reinicia automáticamente la función con las siguientes restricciones:

  • Solo la función superior puede ser editada mientras está detenido.
  • No hay llamadas recursivas en la misma función más abajo en la pila.
Edición en vivo durante la depuración

Chromium issue: 1334484

Ver y editar las reglas de @scope en el panel de Estilos

Ahora puede ver y editar las reglas de CSS @scope en el panel de Estilos.

Las reglas de @scope son parte de la especificación de nivel de cascada y herencia de CSS Cascading and Inheritance Level 6. Estas reglas permiten a los desarrolladores limitar las reglas de estilo en CSS.

Abra esta página de demostración e inspeccione el enlace dentro del elemento <div class=”dark-theme”>. En el panel de Estilos, vea las reglas de @scope. Haga clic en la declaración de la regla para editarla.

La regla de CSS @scope está actualmente en desarrollo. Para probar esta característica, active la opción Experimental Web Platform features mediante chrome://flags/#enable-experimental-web-platform-features.

Reglas @scope en el panel de Estilos

Chromium issue: 1337777

Mejoras en los mapas de código fuente

Aquí hay algunos arreglos en los mapas de código fuente que mejoran la experiencia de depuración general:

  • DevTools ahora resuelve correctamente los identificadores de mapas de código fuente con signos de puntuación. Algunos minificadores modernos (por ejemplo, esbuild) producen mapas de código fuente que fusionan identificadores con signos de puntuación (coma, paréntesis, punto y coma).
  • DevTools ahora resuelve correctamente los nombres de mapas de código fuente para los constructores con una llamada a super.
Devtools resuelve correctamente los nombres de mapas de código fuente
  • Se arregló el índice de URL de mapa de código fuente para URLs duplicadas. Antes, los puntos de ruptura no se activaban en algunos archivos porque tenían URLs duplicadas.

Chromium issue: 1335338, 1333411

## Otros detalles destacados

Estos son algunos arreglos destacados en esta versión:

  • Borra correctamente un par de clave-valor de almacenamiento local de la tabla en el panel de Aplicación > Almacenamiento local cuando se elimina. (1339280)
  • Las vistas previas de color ahora se muestran correctamente cuando se vean archivos CSS en el panel de Fuentes. Antes, su posición estaba mal colocada. (1340062)
  • Muestra consistentemente los elementos flex y grid en el panel de Diseño, así como los muestra como insignias en el panel de Elementos. Antes, los elementos flex y grid faltaban de forma aleatoria en ambos lugares. (1340441, 1273992)
  • Un nuevo enlace de Script de anunciante está disponible para los (marcos de anuncios si DevTools encontró el script que causó que el marco fuera etiquetado como un anuncio). Puede abrir un marco mediante Aplicación > Marcos. (1217041)

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 105

Chrome 104

Chrome 103

Chrome 102

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.