Novedades de Herramientas para desarrolladores (Chrome 88)

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

Las Herramientas para desarrolladores ahora tienen una mejor compatibilidad con la depuración de ángulo de CSS.

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

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

Problemas de Chromium: 1126178, 1138633

Emula tipos de imágenes no compatibles

Herramientas para desarrolladores agregó dos emulaciones nuevas en la pestaña Renderización, lo que te permite inhabilitar el AVIF y la imagen WebP formatos. Estas emulaciones nuevas permiten que los desarrolladores prueben con mayor facilidad diferentes cargas 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 y selecciona "Inhabilitar el formato de imagen AVIF". y actualiza la página. Coloca el cursor sobre el ícono img src El src de la imagen actual (currentSrc) ahora es la imagen WebP de resguardo.

Problema de Chromium: 1130556

Cómo simular 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 realizar las siguientes acciones: simular diferentes dispositivos y probar el comportamiento de tus apps en situaciones de baja disponibilidad de disco.

Ve a Application > Almacenamiento, habilita la casilla de verificación Simular cuota de almacenamiento personalizada. ingresar cualquier número válido para simular la cuota de almacenamiento.

Problemas de Chromium: 945786, 1146985

Nuevo carril en las Métricas web 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.

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

Visita web.dev/vitals para obtener más información sobre cómo optimizar la experiencia del usuario en la Web. Métricas de Android vitals.

Problema en Chromium: N/A

Informa errores de CORS en el panel Network

Herramientas para desarrolladores ahora muestra 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 status muestra "CORS “error”. Coloca el cursor sobre el error; la información ahora muestra el código de error. Anteriormente, solo Herramientas para desarrolladores mostró el estado genérico de "(con errores)" para los errores de CORS.

Esto sienta las bases para nuestras próximas mejoras, que ofrecen descripciones más detalladas del ¡Problemas de CORS!

Problema de Chromium: 1141824

Actualizaciones de la vista de detalles del marco

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

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

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

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

Problema de Chromium: 1139899

Nueva información de los trabajadores web en la vista de detalles del marco

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

En el panel Aplicación, expande un marco con trabajadores web y, luego, selecciona un trabajador en la sección Árbol de Workers para ver los detalles del trabajador web.

Problemas de Chromium: 1122507, 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 debajo del árbol Frames para ver los detalles de la ventana. Haz clic en el botón Abrir Marco para mostrar el botón de apertura en el panel Elementos.

Problema de Chromium: 1107766

Abrir el panel Network desde el panel Service Workers

Visualiza toda la información de enrutamiento de solicitudes de service worker (SW) con el nuevo vínculo Solicitudes de red. De esta manera, se proporciona contexto adicional a los desarrolladores cuando se depura el SW.

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

Problema en Chromium: N/A

Nuevas opciones de copia en el panel Red

Copiar el valor de la propiedad

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

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: Parámetros de cadena de consulta de datos de formulario de la carga útil de la solicitud (JSON) Encabezados de solicitud Encabezados de respuesta

Luego, puedes seleccionar Copiar valor (Copy value) para copiar el valor de la propiedad en tu 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 tu portapapeles.

Problema de Chromium: 1139615

Actualizaciones de depuración de Wasm

Obtener una vista previa del valor de la variable Wasm al desplazar el mouse sobre un anuncio

Cuando te colocas sobre una variable en el desensamblaje de WebAssembly (Wasm) mientras se pausa en un punto de interrupción, Herramientas para desarrolladores 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 un elemento variable para ver el 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 estás pausado 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 mostrará el valor actual de la variable, que en este caso es 4.

Problema de Chromium: 1127914

Unidades de medida coherentes para los tamaños de archivo/memoria

Las Herramientas para desarrolladores ahora usan kB de manera coherente para mostrar los tamaños de archivo o memoria. Anteriormente, KB combinados de Herramientas para desarrolladores (1,000 bytes) y KiB (1,024 bytes). Por ejemplo, el panel Network antes usaba “kB” pero ejecutamos cálculos utilizando KiB, lo que causaba una confusión innecesaria.

Problema de Chromium: 1035309

Destacar pseudoelementos en el panel Elements

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

Problema de Chromium: 1143833

Funciones experimentales

Herramientas de depuración de CSS Flexbox

¡Ya vienen las herramientas de depuración de Flexbox!

Para empezar, Herramientas para desarrolladores ahora muestra una insignia flex en el panel Elementos para elementos con Se aplicó display: flex.

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

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

Pruébala y danos tu opinión.

Problemas de Chromium: 1144090, 1139945

Personalizar combinaciones de teclas de acordes

Desde la última versión, las Herramientas para desarrolladores agregaron compatibilidad experimental para personalizar combinaciones de teclas.

Ahora puedes crear cuerdas (también conocidas como combinaciones de teclas para acceso directo) en el editor de accesos directos.

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 la combinación de teclas de acordes.

Problema de Chromium: 174309

Descarga los canales de vista previa

Considera usar Chrome Canary, Dev o Beta como navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.

Comunicarse con el equipo de Herramientas para desarrolladores de Chrome

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

• Para enviarnos sugerencias o comentarios, accede a crbug.com.
• Informa un problema en Herramientas para desarrolladores con Más opciones   > Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Twittea a @ChromeDevTools.
• Deja comentarios en nuestros videos de YouTube de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.

Novedades de Herramientas para desarrolladores

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