Novedades de Herramientas para desarrolladores (Chrome 91)

Ventana emergente de información de Web Vitals en el panel Rendimiento

Coloca el cursor sobre un marcador de Métricas web en el panel Rendimiento para comprender de qué se trata el indicador, es decir, si el rendimiento es bueno, necesita mejoras o es malo.

Error de Chromium: 1147872

Visualiza el ajuste de desplazamiento de CSS

Ahora puedes activar o desactivar la insignia scroll-snap en el panel Elements para inspeccionar la alineación de CSS scroll-snap.

Cuando se aplica scroll-snap-type a un elemento HTML de tu página (p.ej., esta página de demostración), puedes ver una insignia scroll-snap junto a él en el panel Elementos. Haz clic en la insignia para activar o desactivar la visualización de una superposición de ajuste de desplazamiento en la página.

En el ejemplo anterior, puedes ver marcas de puntos en los bordes de ajuste. El puerto de desplazamiento tiene un contorno sólido, mientras que los elementos de ajuste tienen contornos discontinuos. El padding de desplazamiento se rellena con color verde, mientras que el margen de desplazamiento se rellena con color naranja.

Problema de Chromium: 862450

Nuevo Inspector de memoria

Usa el nuevo Inspector de memoria para inspeccionar un ArrayBuffer en JavaScript, así como la memoria de Wasm.

Abre esta página de demostración. En el panel Fuentes, abre el archivo demo-js.js y establece un punto de interrupción en la línea 18.

Actualiza la página. Expande la sección Alcance en el panel del depurador de la derecha. Observa el nuevo ícono junto al valor de buffer. Haz clic en él para que aparezca el Inspector de memoria.

Consulta la documentación para obtener más información sobre cómo inspeccionar JavaScript ArrayBuffer y WebAssembly.Memory con este nuevo Inspector de memoria.

Error de Chromium: 1166577

Nuevo panel de configuración de insignias en el panel de elementos

Ahora puedes habilitar o inhabilitar insignias de forma selectiva a través de la Configuración de insignias en el panel Elementos. Usa esta función para personalizar y enfocarte en las insignias importantes mientras inspeccionas páginas web.

En el panel Elements, haz clic con el botón derecho en cualquier elemento. Selecciona Configuración de insignias en el menú contextual. El panel de configuración de insignias aparecerá en la parte superior. Habilita o inhabilita cualquier casilla de verificación para mostrar u ocultar las insignias.

Error de Chromium: 1066772

Vista previa de imagen mejorada con información de la relación de aspecto

Las vistas previas de imágenes en el panel Elements ahora muestran más información sobre la imagen: tamaño renderizado, relación de aspecto renderizada, tamaño intrínseco, relación de aspecto intrínseca y tamaño del archivo.

Esta información te ayuda a comprender mejor tus imágenes y aplicar la optimización si es necesario.

La información sobre la relación de aspecto de la imagen también está disponible en el panel Network cuando haces clic para obtener una vista previa de la imagen.

Problemas de Chromium: 1149832, 1170656

Nuevo botón de condiciones de red con opciones para configurar Content-Encodings

Se agregó un nuevo botón de condiciones de red en el panel Red. Haz clic en ella para abrir la pestaña Condiciones de red.

Se agregó una nueva opción Accepted Content-Encodings a la pestaña Condiciones de red. Configúralo para probar si las respuestas del servidor están codificadas correctamente en los navegadores que no admiten gzip, brotli ni otros Content-Encodings futuros.

Error de Chromium: 1162042

Mejoras en el panel Styles

Nuevo acceso directo para ver el valor calculado en el panel Styles

Ahora puedes hacer clic con el botón derecho en una propiedad de CSS en el panel Estilos y seleccionar Ver valor calculado para ver el valor de CSS calculado.

Error de Chromium: 1076198

Compatibilidad con la palabra clave accent-color

La IU de autocompletado del panel Styles ahora detecta la palabra clave CSS accent-color, que permite a los desarrolladores web especificar el color de énfasis para los controles de la IU (p.ej., casillas de verificación y botones de opción) que genera el elemento.

La propiedad accent-color de CSS es experimental en la actualidad. Habilita chrome://flags/#enable-experimental-web-platform-features para probarlo.

Error de Chromium: 1092093

Categoriza los tipos de problemas con colores e íconos

En la pestaña Problemas, ahora se clasifican los problemas en errores de la página, próximos cambios rotundos y posibles mejoras para indicar mejor la gravedad. Para abrir la pestaña Problemas, haz clic en el botón recuento de problemas en la consola.

• Errores de página (rojo): Problemas que tienen un impacto inmediato en la funcionalidad de la página, como no establecer los encabezados CORS correctos, etcétera
• Próximos cambios rotundos (amarillo) Problemas que informan sobre un próximo cambio incompatible de la plataforma web que puede provocar la pérdida de la funcionalidad de la página (p.ej., advertencia sobre los próximos cambios de CORS RFC 1918).
• Posibles mejoras (azul). Posibles mejoras en la página, pero que actualmente no afectan la funcionalidad básica de la página (p.ej., problemas de accesibilidad)

Error de Chromium: 1183241

Borra los tokens de confianza

Ahora puedes borrar tokens de confianza con el nuevo botón de eliminación en el panel Trust tokens, en el panel Application.

Trust Token es una nueva API que ayuda a combatir el fraude y distinguir a los bots de los seres humanos reales, sin realizar un seguimiento pasivo. Obtén más información para comenzar a usar Trust Tokens.

Error de Chromium: 1126824

Consulta los detalles de las funciones bloqueadas en la vista Detalles del fotograma

Ahora puedes ver los detalles de las funciones bloqueadas en la sección Política de permisos de la vista Detalles del marco.

Abre esta página de demostración. Ve al panel Aplicación y selecciona un fotograma. En la sección Permissions Policy, desplázate hasta la propiedad Disabled Features. Haz clic en Mostrar detalles para ver los detalles sobre por qué se bloqueó la función. Haz clic en el ícono junto a cada política para navegar al iframe o a la solicitud de red que bloqueó la función.

La política de permisos es una API de la plataforma web que permite que un sitio web autorice o bloquee el uso de funciones del navegador en su propio marco o en los elementos iframe que incorpora.

Error de Chromium: 1158827

Cómo filtrar experimentos en el parámetro de configuración Experimentos

Encuentra experimentos más rápido con el nuevo filtro de experimentos. Por ejemplo, ve a Configuración > Experimentos y, en el cuadro de texto Filtro, escribe "contraste" para filtrar todos los experimentos que contengan la palabra "contraste".

Nueva columna Vary Header en el panel Cache storage

Usa la nueva columna Vary Header en el panel Cache Storage para ver el encabezado de respuesta HTTP Vary.

Error de Chromium: 1186049

Mejoras en el panel de fuentes

Compatibilidad con nuevas funciones de JavaScript

Las Herramientas para desarrolladores ahora admiten la nueva función de lenguaje JavaScript private brand check, también conocida como #foo in obj.

Esta función de verificación de marcas privadas extiende el operador in para admitir las pruebas de campos de clase privados en cualquier objeto determinado.

Pruébalo en los paneles Console y Sources. También puedes inspeccionar los campos privados en la sección Alcance del panel del depurador.

Error de Chromium: 11374

Compatibilidad mejorada con la depuración de puntos de interrupción

Las Herramientas para desarrolladores ahora establecen correctamente los puntos de interrupción en varios secuencias de comandos. Los agrupadores de JavaScript modernos (p. ej., Webpack, Rollup) admiten la función de división de código. Hay situaciones en las que se puede incluir un componente compartido en varias rutas (divisiones de código).

Anteriormente, las Herramientas para desarrolladores solo podían establecer puntos de interrupción en una ubicación sin procesar. Con esta última mejora, DevTools puede establecer correctamente los puntos de interrupción en todas las ubicaciones pertinentes.

Problemas de Chromium: 1142705, 979000, 1180794

Admite la vista previa al colocar el cursor con la notación []

Las Herramientas para desarrolladores ahora admiten la vista previa al pasar el cursor sobre las expresiones de miembros de JavaScript que usan la notación [] en el panel Fuentes.

Problema de Chromium: 1178305

Se mejoró el esquema de los archivos HTML

Ahora las Herramientas para desarrolladores brindan una mejor asistencia para el esquema de archivos HTML. En el panel Sources, abre un archivo HTML. Puedes activar o desactivar el esquema del código con las combinaciones de teclas Cmd + Mayúsculas + O en Mac o Ctrl + Mayúsculas + O en Windows.

En el siguiente ejemplo, las Herramientas para desarrolladores ahora enumeran correctamente todas las funciones en el esquema. Anteriormente, DevTools solo mostraba algunas de las funciones.

Error de Chromium: 761019, 1191465

Seguimientos de pila de errores adecuados para la depuración de Wasm

Ahora, DevTools resuelve las llamadas a funciones intercaladas y muestra seguimientos de pila de errores adecuados para la depuración de Wasm.

Anteriormente, Herramientas para desarrolladores solo mostraba referencias genéricas de Wasm en los seguimientos de pila de errores.

La versión anterior de Chrome, a la izquierda, no muestra la ubicación de la fuente (p.ej., dsquare) en los registros de seguimiento de errores, mientras que la versión nueva, a la derecha, sí lo hace.

Error de Chromium: 1189161

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 vanguardia de la plataforma web y te ayudan a encontrar problemas en tu sitio antes de que lo hagan tus 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 Herramientas para desarrolladores.

• Envíanos tus comentarios y solicitudes de funciones a crbug.com.
• Informa un problema de Herramientas para desarrolladores con more_vert Más opciones > Ayuda > Informar un problema de Herramientas para desarrolladores en Herramientas para desarrolladores.
• Envía un tuit a @ChromeDevTools.
• Deja comentarios en los videos de Novedades de las Herramientas para desarrolladores de YouTube o en los videos de Sugerencias sobre las Herramientas para desarrolladores de YouTube.

Novedades de Herramientas para desarrolladores

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