Nuevas herramientas de depuración de CSS Flexbox
Ahora las Herramientas para desarrolladores tienen herramientas de depuración de Flexbox de CSS específicas.
Cuando se aplican los códigos display: flex o display: inline-flex a un elemento HTML de tu página, puedes ver una insignia flex junto a él en el panel de Elementos. Haz clic en la insignia para activar o desactivar la visualización de una superposición de Flex en la página.
En el panel Estilos, puedes hacer clic en el ícono nuevo junto a display: flex o display: inline-flex para abrir el editor de Flexbox. El editor de Flexbox proporciona una forma rápida de editar las propiedades de Flexbox. ¡Pruébalo!
Además, el panel Diseño tiene una sección Flexbox que muestra todos los elementos de flexbox en la página. Puedes activar o desactivar la superposición de cada elemento.
Problemas de Chromium: 1166710, 1175699
Nueva superposición de Métricas web esenciales
Visualiza y mide mejor el rendimiento de tu página con la nueva superposición de Core Web Vitals.
Las Métricas web esenciales son una iniciativa de Google que busca ofrecer orientación unificada sobre los indicadores de calidad que son fundamentales para brindar una excelente experiencia del usuario en la Web.
Abre el menú de comandos, ejecuta el comando Mostrar renderización y, luego, habilita la casilla de verificación Métricas web esenciales.
Actualmente, la superposición muestra lo siguiente:
- Largest Contentful Paint (LCP): Mide el rendimiento de carga. Para proporcionar una buena experiencia del usuario, el LCP debe ocurrir en un plazo de 2.5 segundos desde que la página comienza a cargarse.
- Retraso de primera entrada (FID): Mide la interactividad. Para proporcionar una buena experiencia del usuario, las páginas deben tener un FID de menos de 100 milisegundos.
- Cambio de diseño acumulado (CLS): Mide la estabilidad visual. Para proporcionar una buena experiencia del usuario, las páginas deben mantener un CLS de menos de 0.1.
Error de Chromium: 1152089
Actualizaciones de la pestaña Problemas
Se trasladó el recuento de problemas a la barra de estado de la consola
Ahora se agregó un nuevo botón de recuento de problemas en la barra de estado de la consola para mejorar la visibilidad de las advertencias de problemas. Esto reemplazará el mensaje del problema en la consola.
Error de Chromium: 1140516
Informa problemas relacionados con las Trusted Web Activities
En la pestaña Problemas, ahora se informan los problemas de Trusted Web Activity. El objetivo es ayudar a los desarrolladores a comprender y corregir los problemas de las actividades web de confianza de sus sitios, lo que mejora la calidad de sus aplicaciones.
Abre una actividad web de confianza. Luego, haz clic en el botón Recuento de problemas en la barra de estado de Consola para abrir las pestañas Problemas y ver los problemas. Mira esta charla de Andre para obtener más información sobre cómo crear e implementar una Trusted Web Activity.
Error de Chromium: 1147479
Dar formato a cadenas como literales de cadena de JavaScript (válidos) en la consola
Ahora, la consola formatea las cadenas como literales de cadena de JavaScript válidos en la consola. Anteriormente, la consola no escapaba las comillas dobles cuando imprimía cadenas.
Error de Chromium: 1178530
Nuevo panel de Trust Tokens en el panel Application
Las Herramientas para desarrolladores ahora muestran todos los tokens de confianza disponibles en el contexto de navegación actual en el nuevo 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 seguimiento pasivo. Obtén más información para comenzar a usar Trust Tokens.
Error de Chromium: 1126824
Emula la función de medios color-gamut de CSS
La consulta de medios color-gamut te permite probar el rango aproximado de colores que admiten el navegador y el dispositivo de salida. Por ejemplo, si la consulta de medios color-gamut: p3 coincide, significa que el dispositivo del usuario admite el espacio de color Display-P3.
Abre el menú de comandos, ejecuta el comando Show Rendering y, luego, configura el menú desplegable Emulate CSS media feature color-gamut.
Problema de Chromium: 1073887
Mejoras en las herramientas para las apps web progresivas
Las Herramientas para desarrolladores ahora muestran un mensaje de advertencia más detallado sobre la capacidad de instalación de las apps web progresivas (AWP) en la consola, con un vínculo a la documentación.
El panel Manifiesto ahora muestra un mensaje de advertencia si la descripción del manifiesto supera los 324 caracteres.
Además, el panel Manifiesto ahora muestra un mensaje de advertencia si la captura de pantalla de la PWA no cumple con los requisitos. Obtén más información sobre la propiedad capturas de pantalla de la PWA y sus requisitos aquí.
