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

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

Á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)), se muestra el í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

Emula tipos de imágenes 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 emulaciones nuevas permiten que los desarrolladores prueben con mayor facilidad 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.

Emular tipos de imágenes

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 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 un número válido para simular la cuota de almacenamiento.

Cómo simular el tamaño de 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 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 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 Web Vitals.

Carril de Métricas web

Problema en Chromium: N/A

Informa errores de CORS en el panel Network

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 “Error de CORS”. Coloca el cursor sobre el error; la información ahora muestra 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 de nuestras próximas mejoras para proporcionar descripciones más detalladas 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 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 las SharedArrayBuffer (SAB) y si se pueden compartir mediante postMessage().

Se mostrará una advertencia de baja si la ESA y postMessage() están disponibles en ese momento, pero el contexto no está aislado en orígenes cruzados. 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.

Información de orígenes cruzados

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 Application, expande un marco con trabajadores web y, luego, selecciona un trabajador debajo del árbol Workers para ver sus detalles.

Información de los trabajadores 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 vínculo Opener Framework para revelar el abridor en el panel Elements.

Detalles del marco del abridor

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 y haz clic en Network requests de un SW. El panel Network se abre 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 Service Workers

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" en el menú contextual te permite copiar el valor de propiedad de una solicitud de red.

Copiar el valor de la 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: Solicitud de carga útil (JSON) Parámetros de cadena de consulta de datos de formulario Encabezados de la 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 el portapapeles.

Copiar seguimiento de pila

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 se coloca el cursor 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 una variable para ver el valor.

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

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

Destacar pseudoelementos en el panel Elements

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

Destacar pseudoelementos

Problema de Chromium: 1143833

Funciones experimentales

Herramientas de depuración de CSS Flexbox

¡Ya vienen 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 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.

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

Pruébala y danos tu opinión.

Problemas de Chromium: 1144090, 1139945

Personalizar combinaciones de teclas para 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 > 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.

Combinación de teclas para acceso directo de los 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 plataforma 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.
  • Para informar un problema de Herramientas para desarrolladores, use Más opciones   Más   > Ayuda > Informar 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome Primeros pasos

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59