Se usó la API de Cloud Translation para traducir esta página.

Novedades de Herramientas para desarrolladores (Chrome 88)

Jecelyn Yeen

Inicio más rápido de Herramientas para desarrolladores

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

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

Problema de Chromium: 1029427

Nuevas herramientas de visualización de ángulos CSS

Ahora las Herramientas para desarrolladores ofrecen una mejor compatibilidad con la depuración de ángulos de CSS.

Ángulo de CSS

Cuando a un elemento HTML de tu página se le aplicó un ángulo de CSS (p.ej., background: linear-gradient(angle, color-stop1, color-stop2) o transform: rotate(angle)), se muestra un ícono de reloj junto al ángulo en el panel Estilos. Haz clic en el ícono del 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 y 1138633

Emula tipos de imagen no compatibles

Las Herramientas para desarrolladores agregaron 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 en 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 Renderización, selecciona "Inhabilitar formato de imagen AVIF" y actualiza la página. Coloca el cursor sobre img src. La imagen actual src (currentSrc) ahora es la imagen WebP de resguardo.

Emular tipos de imágenes

Problema de Chromium: 1130556

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

Ahora puedes anular el tamaño de la cuota de almacenamiento en el panel de 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 cuota de almacenamiento personalizada y, luego, ingresa cualquier número válido para simular la cuota de almacenamiento.

Simula el tamaño de la cuota de almacenamiento

Problemas de Chromium: 945786 y 1146985

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

Ahora, los registros de rendimiento tienen la opción de mostrar información de las Métricas web.

Después de registrar el rendimiento de carga, habilita la casilla de verificación de 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 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 Web vitals.

Carril de Métricas web

Problema de Chromium: N/A

Informa errores de CORS en el panel Network

Las Herramientas para desarrolladores ahora muestran el 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 CORS fallida. La columna de estado muestra "error CORS". Coloca el cursor sobre el error y la información sobre la herramienta ahora mostrará el código de error. Anteriormente, las Herramientas para desarrolladores solo mostraban el estado genérico "(con errores)" para los errores de CORS.

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

Errores de CORS

Problema de Chromium: 1141824

Actualizaciones de la vista de detalles del marco

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

El estado aislado 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 elementos SharedArrayBuffer (SAB) y si se pueden compartir mediante postMessage().

Se mostrará una advertencia de baja si la SAB y postMessage() están disponibles actualmente, pero el contexto no está aislado de origen cruzado. En este artículo, puedes obtener más información sobre el aislamiento de origen cruzado y los motivos por los que será obligatorio para funciones como SharedArrayBuffers.

Información de origen cruzado

Problema de Chromium: 1139899

Nueva información de Web Workers en la vista de detalles de Frame

Herramientas para desarrolladores ahora muestra trabajadores web dedicados debajo del marco que los crea.

En el panel Application, expande un marco con Web Workers y, luego, selecciona un trabajador debajo del árbol Workers para ver sus detalles.

Información de los trabajadores web

Problemas de Chromium: 1122507 y 1051466

Muestra 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 debajo del árbol Frames para ver los detalles. Haz clic en el vínculo Marco de apertura para mostrar el elemento de apertura en el panel Elementos.

Detalles del marco del abridor

Problema de Chromium: 1107766

Abrir el panel Network desde el panel Service Workers

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

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

Abrir el panel Network desde los Service Workers

Problema de Chromium: N/A

Nuevas opciones de copia en el panel Red

Copiar valor de propiedad

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

Copiar valor de 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 esta sección: Carga útil de la solicitud (JSON) Parámetros de cadena de consulta de datos del formulario Encabezados de solicitud, encabezados de respuesta

Luego, puedes seleccionar Copiar valor (Copy value) para copiar el valor de la propiedad en el portapapeles.

Problema de Chromium: 1132084

Copiar el seguimiento de pila para el iniciador de 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.

Copiar seguimiento de pila

Problema de Chromium: 1139615

Actualizaciones de depuración de Wasm

Vista previa del valor de la variable de Wasm al desplazar el mouse sobre un anuncio

Cuando se coloca el cursor sobre una variable en el desensamblado de WebAssembly (Wasm) mientras se pausa en un punto de interrupción, DevOps 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 de Wasm al desplazar el mouse sobre un anuncio

Problemas de Chromium: 1058836 y 1071432

Evalúa la variable de Wasm en la consola

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

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

Evalúa la variable de Wasm en la consola

Problema de Chromium: 1127914

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

Las Herramientas para desarrolladores ahora usan kB de manera coherente para mostrar los tamaños de archivo y memoria. Anteriormente, Herramientas para desarrolladores 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 una confusión innecesaria.

Problema de Chromium: 1035309

Cómo destacar pseudoelementos en el panel Elementos

Herramientas para desarrolladores aumentó el contraste de color de los seudoelementos para ayudarte a identificarlos mejor.

Resaltar pseudoelementos

Problema de Chromium: 1143833

Funciones experimentales

Herramientas de depuración de CSS Flexbox

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

Para comenzar, Herramientas para desarrolladores ahora muestra una insignia de flex en el panel Elementos para los elementos con display: flex aplicado.

Además, se agregan 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 de eso, estos iconos son contextuales. 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 las herramientas de Flexbox. Pronto se agregarán más.

Pruébalo y danos tu opinión.

Problemas de Chromium: 1144090 y 1139945

Personalizar combinaciones de teclas de acordes

Las Herramientas para desarrolladores agregaron compatibilidad experimental para personalizar combinaciones de teclas desde la última versión.

Ahora puedes crear acordes (también conocidas como combinaciones de teclas al presionar varias teclas) en el editor de combinaciones de teclas.

Ve a Configuración > Combinaciones de teclas, coloca el cursor sobre un comando y haz clic en el botón Editar (ícono de lápiz) para personalizar el acceso directo de las cuerdas.

Combinaciones de teclas de Chords

Problema de Chromium: 174309

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

Envíanos tus sugerencias o comentarios a través de crbug.com.
Informa un problema en Herramientas para desarrolladores mediante Más opciones > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
Envía un tweet a @ChromeDevTools.
Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).