Novedades de Herramientas para desarrolladores (Chrome 88)

Jecelyn Yeen

Inicio más rápido de DevTools

El inicio de DevTools 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, publicaremos una entrada de blog de ingeniería en la que se explicará la implementación en detalle. ¡No te pierdas ninguna novedad!

Error de Chromium: 1029427

Nuevas herramientas de visualización de ángulos de CSS

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

Ángulo 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 Estilos. Haz clic en el ícono de reloj para activar o desactivar la superposición de reloj. Haz clic en cualquier parte del reloj o arrastra la aguja para cambiar el ángulo.

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

Problemas de Chromium: 1126178, 1138633

Emular tipos de imágenes no admitidos

DevTools agregó dos emulaciones nuevas en la pestaña Renderización, lo que te permite inhabilitar los formatos de imagen AVIF y WebP. Estas nuevas emulaciones facilitan a los desarrolladores probar diferentes situaciones de carga de imágenes sin tener que cambiar de navegador.

Supongamos que tenemos el siguiente código HTML para entregar una imagen en AVIF y WebP para navegadores más nuevos, con una imagen PNG de resguardo para 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 Renderización, selecciona "Inhabilitar el formato de imagen AVIF" y actualiza la página. Coloca el cursor sobre img src. El src de la imagen actual (currentSrc) ahora es la imagen WebP de resguardo.

Emulación de tipos de imágenes

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 Aplicación > Almacenamiento, habilita la casilla de verificación Simular la cuota de almacenamiento personalizada y escribe cualquier número válido para simular la cuota de almacenamiento.

Simula el tamaño de la cuota de almacenamiento

Problemas de Chromium: 945786, 1146985

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

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

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

Actualmente, el carril muestra información de las métricas web esenciales, 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 Métricas web.

Carril de Métricas web

Problema de Chromium: N/A

Informa errores de CORS en el panel de red

DevTools ahora muestra un error de CORS cuando una solicitud de red falla debido al uso compartido de recursos entre dominios (CORS).

En el panel Red, observa la solicitud de red de CORS que falló. La columna de estado muestra "CORS error". Coloca el cursor sobre el error. Ahora, la información sobre herramientas muestra el código de error. Anteriormente, DevTools solo mostraba el estado genérico "(failed)" para los errores de CORS.

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

Errores de CORS

Error de Chromium: 1141824

Actualizaciones de la vista de detalles del marco

Información del aislamiento de origen cruzado en la vista de detalles del marco

El estado de aislamiento entre orígenes 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 varios orígenes. Obtén más información sobre el aislamiento entre orígenes y por qué será obligatorio para funciones como SharedArrayBuffers en este artículo.

Información de origen cruzado

Error de Chromium: 1139899

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

DevTools ahora muestra trabajadores web dedicados debajo del 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 sus detalles.

Información sobre los trabajadores web

Problemas de Chromium: 1122507, 1051466

Cómo mostrar los detalles del marco del abridor para las ventanas abiertas

Ahora puedes ver los detalles sobre qué marco causó la apertura de otra ventana.

Selecciona una ventana abierta en el árbol Frames para ver sus detalles. Haz clic en el vínculo Marco del activador para mostrar el activador en el panel Elementos.

Detalles del marco del abridor

Error de Chromium: 1107766

Abre el panel de red desde el panel de trabajadores de servicio

Consulta toda la información de enrutamiento de solicitudes de service worker (SW) con el nuevo vínculo Solicitudes de red. Esto les brinda a los desarrolladores más contexto cuando depuran el SO.

Ve a Application > Service Workers y haz clic en Network requests de un SW. Se abre el panel Network en el panel inferior, que muestra todas las solicitudes relacionadas con el trabajador de servicio (las solicitudes de red se filtran por "is:service-worker-intercepted").

Cómo abrir el panel de red desde los trabajadores del servicio

Problema de Chromium: N/A

Nuevas opciones de copia en el panel de red

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.

Cómo copiar el valor de una propiedad

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) Datos del formulario Parámetros de cadena de consulta Encabezados de solicitud Encabezados de respuesta

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

Error de Chromium: 1132084

Copia el seguimiento de pila del iniciador de red

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

Cómo copiar el seguimiento de pila

Error de Chromium: 1139615

Actualizaciones de depuración de Wasm

Vista previa del valor de la variable Wasm cuando se coloca el cursor sobre él

Cuando colocas el cursor sobre una variable en el desmontaje de WebAssembly (Wasm) mientras está detenida 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 el valor.

Vista previa de la variable Wasm cuando se coloca el cursor sobre ella

Problemas de Chromium: 1058836, 1071432

Evalúa la variable Wasm en la consola

Ahora puedes evaluar la variable Wasm en la consola mientras está detenida en un punto de interrupción.

En este ejemplo, colocamos un punto de interrupción en la línea local.get $input. Cuando realices la depuración, escribir $input en Console mostrará el valor actual de la variable, que es 4 en este caso.

Evalúa la variable Wasm en la consola

Error de Chromium: 1127914

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

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

Error de Chromium: 1035309

Cómo destacar los elementos pseudo en el panel de elementos

Las Herramientas para desarrolladores aumentaron el contraste de color de los elementos pseudo para ayudarte a detectarlos mejor.

Destaca los elementos seudo

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, DevTools ahora muestra una insignia flex en el panel Elementos para los elementos con display: flex aplicado.

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 se adaptan al contexto. La dirección del ícono se ajustará según lo siguiente:

  • flex-direction
  • direction
  • writing-mode

El objetivo de estos íconos es ayudarte a visualizar mejor el diseño de flexbox de la página.

Depuración de CSS Flex

Este es el documento de diseño de las funciones de herramientas de Flexbox. Pronto se agregarán más funciones.

Pruébala y comunícate con nosotros para darnos tu opinión.

Problemas de Chromium: 1144090, 1139945

Personaliza las combinaciones de teclas de los acordes

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

Ahora puedes crear acordes (también conocidos como combinaciones de teclas) en el editor de accesos directos.

Ve a Configuración > Accesos directos, coloca el cursor sobre un comando y haz clic en el botón Editar (ícono de pluma) para personalizar el acceso directo de acordes.

Combinaciones de teclas 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 plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que tus usuarios.

Comunícate con el equipo de Chrome DevTools

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

Novedades de DevTools

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