Novedades de Herramientas para desarrolladores (Chrome 88)

Jecelyn Yeen

Inicio más rápido de Herramientas para desarrolladores

El inicio de las Herramientas para desarrolladores ahora es un 37% más rápido en términos de compilación de JavaScript (de 6.9 s a 5 s). 🎉

El equipo realizó algunas optimizaciones para reducir la sobrecarga de rendimiento de la serialización, el análisis y la deserialización durante el inicio.

Próximamente, se publicará una entrada de blog de ingeniería en la que se explicará la implementación en detalle. ¡No te pierdas las novedades!

Error de Chromium: 1029427

Nuevas herramientas de visualización de ángulos CSS

Ahora las Herramientas para desarrolladores brindan una mejor asistencia para la depuración de ángulos de CSS.

Cuando un elemento HTML de tu página tiene un ángulo CSS aplicado (p.ej., background: linear-gradient(angle, color-stop1, color-stop2), transform: rotate(angle)), se muestra un ícono de reloj junto al ángulo en el panel Styles. Haz clic en el ícono de reloj para activar o desactivar la superposición del reloj. Haz clic en cualquier parte del reloj o arrastra la aguja para cambiar el ángulo.

También hay combinaciones de teclas y atajos del mouse para cambiar el valor del ángulo. Consulta nuestra documentación para obtener más información.

Problemas de Chromium: 1126178, 1138633

Cómo emular tipos de imágenes no compatibles

Las Herramientas para desarrolladores agregaron dos nuevas emulaciones en la pestaña Rendering, lo que te permite inhabilitar los formatos de imagen AVIF y WebP. Estas nuevas emulaciones facilitan a los desarrolladores la prueba de diferentes situaciones de carga de imágenes sin tener que cambiar de navegador.

Supongamos que tenemos el siguiente código HTML para publicar una imagen en AVIF y WebP para los navegadores más nuevos, con una imagen PNG de resguardo para los navegadores más antiguos.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Abre la pestaña Rendering, selecciona "Disable AVIF image format" y actualiza la página. Coloca el cursor sobre img src. La URL actual de la imagen (currentSrc) ahora es la imagen de WebP de resguardo.

Error de Chromium: 1130556

Simula el tamaño de la cuota de almacenamiento en el panel Almacenamiento

Ahora puedes anular el tamaño de la cuota de almacenamiento en el panel Almacenamiento. Esta función te permite simular diferentes dispositivos y probar el comportamiento de tus apps en situaciones de baja disponibilidad de disco.

Ve a Application > Storage, habilita la casilla de verificación Simulate custom storage quota y, luego, ingresa cualquier número válido para simular la cuota de almacenamiento.

Problemas de Chromium: 945786 y 1146985

Nuevo carril de Métricas web en las grabaciones del panel Rendimiento

Las grabaciones de rendimiento ahora tienen una opción para mostrar información sobre las Métricas web.

Después de registrar el rendimiento de la carga, habilita la casilla de verificación Métricas web en el panel de rendimiento para ver el nuevo carril de Métricas web.

Actualmente, el carril muestra información sobre las Métricas web, como el primer procesamiento de imagen con contenido (FCP), el procesamiento de imagen con contenido más grande (LCP) y el cambio de diseño (LS).

Consulta web.dev/vitals para obtener más información sobre cómo optimizar la experiencia del usuario con las métricas de Web Vitals.

Problema de Chromium: N/A

Cómo informar errores de CORS en el panel de red

Las Herramientas para desarrolladores ahora muestran un error de CORS cuando falla una solicitud de red debido al uso compartido de recursos entre dominios (CORS).

En el panel Red, observa la solicitud de red de CORS fallida. En la columna de estado, se muestra "Error de CORS". Si colocas el cursor sobre el error, la sugerencia ahora muestra el código de error. Anteriormente, Herramientas para desarrolladores solo mostraba el estado genérico "(failed)" para los errores de CORS.

Esto sienta las bases para nuestras próximas mejoras, que proporcionarán una descripción más detallada de los problemas de CORS.

Problema de Chromium: 1141824

Actualizaciones de la vista de detalles del fotograma

Información de aislamiento de origen cruzado en la vista Detalles del fotograma

El estado de aislamiento de origen cruzado ahora se muestra en la sección Seguridad y aislamiento.

En la nueva sección Disponibilidad de la API, se muestra la disponibilidad de los SharedArrayBuffer (SAB) y si se pueden compartir con postMessage().

Se mostrará una advertencia de baja si el SAB y postMessage() están disponibles actualmente, pero el contexto no está aislado de origen cruzado. Obtén más información sobre el aislamiento de origen cruzado y por qué será necesario para funciones como SharedArrayBuffers en este artículo.

Error de Chromium: 1139899

Nueva información de Web Workers en la vista Detalles del fotograma

Las Herramientas para desarrolladores ahora muestran trabajadores web dedicados en el marco que los crea.

En el panel Application, expande un marco con trabajadores web y, luego, selecciona un trabajador en el árbol Workers para ver los detalles del trabajador web.

Problemas de Chromium: 1122507, 1051466

Mostrar los detalles del marco del elemento que abrió las ventanas

Ahora puedes ver los detalles sobre qué frame provocó la apertura de otra ventana.

Selecciona una ventana abierta en el árbol Frames para ver los detalles de la ventana. Haz clic en el vínculo Opener Frame para mostrar el elemento que abrió la ventana en el panel de elementos.

Error de Chromium: 1107766

Cómo abrir el panel de redes desde el panel de Service Workers

Consulta toda la información de enrutamiento de solicitudes del service worker (SW) con el nuevo vínculo Solicitudes de red. Esto proporciona a los desarrolladores contexto adicional cuando depuran el SW.

Ve a Aplicación > Service Workers y haz clic en las Solicitudes de red de un SW. El panel Network se abre en el panel inferior y muestra todas las solicitudes relacionadas con el trabajador de servicio (las solicitudes de red se filtran por "is:service-worker-intercepted").

Problema de Chromium: N/A

Nuevas opciones de copia en el panel Network

Cómo copiar el valor de una propiedad

La nueva opción "Copiar valor" en el menú contextual te permite copiar el valor de la propiedad de una solicitud de red.

En el panel Red, haz clic en una solicitud de red para abrir el panel Encabezados. Haz clic con el botón derecho en una de las propiedades de estas secciones: Carga útil de la solicitud (JSON), Parámetros de cadena de consulta de datos de formulario, Encabezados de solicitud y Encabezados de respuesta.

Luego, puedes seleccionar Copiar valor para copiar el valor de la propiedad en el portapapeles.

Error de Chromium: 1132084

Copiar el seguimiento de pila del iniciador de red

Haz clic con el botón derecho en una solicitud de red y, luego, selecciona Copiar stacktrace para copiar el stacktrace en el portapapeles.

Error de Chromium: 1139615

Actualizaciones de depuración de Wasm

Obtén una vista previa del valor de la variable de Wasm cuando coloques el cursor sobre ella

Cuando se desplaza el cursor sobre una variable en el desensamblado de WebAssembly (Wasm) mientras se pausa en un punto de interrupción, DevTools ahora muestra el valor actual de la variable.

En el panel Sources, abre un archivo Wasm, coloca un punto de interrupción y actualiza la página. Coloca el cursor sobre una variable para ver su valor.

Problemas de Chromium: 1058836, 1071432

Evalúa la variable de Wasm en la consola

Ahora puedes evaluar la variable de Wasm en la consola mientras se detiene en un punto de interrupción.

En este ejemplo, colocamos un punto de interrupción en la línea local.get $input. Cuando depures, escribe $input en la consola para que se muestre el valor actual de la variable, que es 4 en este caso.

Error de Chromium: 1127914

Unidades de medida coherentes para los tamaños de archivos y memoria

Las Herramientas para desarrolladores ahora usan kB de forma coherente para mostrar los tamaños de archivos y memoria. Anteriormente, DevTools mezclaba kB (1,000 bytes) y KiB (1,024 bytes). Por ejemplo, el panel Network antes usaba etiquetas "kB", pero en realidad realizaba cálculos con KiB, lo que causaba confusión innecesaria.

Error de Chromium: 1035309

Cómo destacar los seudoelementos en el panel de elementos

Las Herramientas para desarrolladores aumentaron el contraste de color de los seudoelementos para ayudarte a identificarlos mejor.

Error de Chromium: 1143833

Funciones experimentales

Herramientas de depuración de Flexbox de CSS

¡Llegarán las herramientas de depuración de Flexbox!

Para empezar, las Herramientas para desarrolladores ahora muestran una insignia flex en el panel Elementos para los elementos a los que se les aplicó display: flex.

Además, se agregaron nuevos íconos de alineación en las siguientes propiedades de Flexbox:

• flex-direction
• align-items
• align-content
• align-self
• justify-items
• justify-content

Además, estos íconos son sensibles al contexto. La dirección del ícono se ajustará según lo siguiente:

• flex-direction
• direction
• writing-mode

Estos íconos tienen como objetivo ayudarte a visualizar mejor el diseño de flexbox de la página.

Aquí se encuentra el documento de diseño de las funciones de herramientas de Flexbox. Pronto se agregarán más funciones.

Pruébala y cuéntanos qué te parece.

Problemas de Chromium: 1144090, 1139945

Personaliza las combinaciones de teclas de acordes

Desde la última versión, DevTools agregó compatibilidad experimental para personalizar combinaciones de teclas.

Ahora puedes crear combinaciones de teclas (también conocidas como accesos directos de varias pulsaciones) en el editor de accesos directos.

Ve a Configuración > Atajos, coloca el cursor sobre un comando y haz clic en el botón Editar (ícono de lápiz) para personalizar el atajo de acordes.

Error de Chromium: 174309

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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus usuarios.

Comunícate con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para hablar sobre las funciones nuevas, las actualizaciones o cualquier otro tema relacionado con Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de DevTools