Novedades de Herramientas para desarrolladores (Chrome 88)

Jecelyn Yeen

Inicio más rápido de Herramientas para desarrolladores

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ó una optimización para reducir la sobrecarga de rendimiento de la serialización, el análisis y la deserialización durante el inicio.

Habrá una próxima entrada de blog de ingeniería en la que se explicará en detalle la implementación. ¡No te pierdas ninguna novedad!

Problema 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.

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 existen combinaciones de teclas del mouse y del teclado 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 publicar una imagen en AVIF y WebP para navegadores más nuevos, con una imagen PNG de resguardo para navegadores anteriores.

<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.

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.

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, como First Contentful Paint (FCP), Largest Contentful Paint (LCP) y Layout Shift (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.

Problema en 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 con errores. 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, que permitirán proporcionar descripciones más detalladas de los problemas 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 las SharedArrayBuffer (SAB) y si se pueden compartir mediante 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. En este artículo, puedes obtener más información sobre el aislamiento de origen cruzado y por qué será obligatorio para funciones como SharedArrayBuffers.

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 debajo del árbol Workers para ver sus detalles.

Problemas de Chromium: 1122507 y 1051466

Muestra los detalles del marco del abridor de 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 Opener Framework para revelar el abridor en el panel Elements.

Error de Chromium: 1107766

Abrir el panel Network desde el panel Service Workers

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").

Problema en 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.

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.

Problema de Chromium: 1132084

Copiar el seguimiento de pila para el iniciador de la red

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

Problema 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.

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.

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, las Herramientas para desarrolladores combinaban 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 una 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.

Error de Chromium: 1143833

Funciones experimentales

Herramientas de depuración de Flexbox de CSS

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

En primer lugar, las Herramientas para desarrolladores ahora muestran una insignia flex en el panel Elements para los elementos que tienen 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.

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

Personalizar combinaciones de teclas de 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, desplaza el cursor sobre un comando y haz clic en el botón Editar (ícono de lápiz) para personalizar la combinación de teclas de las cuerdas.

Problema 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 vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, te permiten probar API de plataformas web de vanguardia y te ayudan a encontrar problemas en tu sitio antes que los 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 DevTools.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Para informar un problema de Herramientas para desarrolladores, usa more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en los videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.

Novedades de DevTools

Una lista de todo lo que se ha abordado en la serie Novedades de Herramientas para desarrolladores.