Novedades de Herramientas para desarrolladores (Chrome 90)

Nuevas herramientas de depuración de Flexbox de CSS

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 y 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 Show Rendering y, luego, habilita la casilla de verificación Core Web Vitals.

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 comienza a cargarse la página.
• 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

Formatea 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 realizar un 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 búsqueda 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í.

Problemas de Chromium: 1146450, 1169689, 965802

Nueva columna Remote Address Space en el panel de red

Usa la nueva columna Remote Address Space en el panel Red para ver el espacio de direcciones IP de red de cada recurso de red.

Problema de Chromium: 1128885

Mejoras en el rendimiento

Se mejoró el rendimiento de la carga de páginas con Herramientas para desarrolladores abiertas. En algunos casos extremos, observamos mejoras en el rendimiento de 10 veces.

Las Herramientas para desarrolladores recopilan seguimientos de pila y los adjuntan a los mensajes de la consola o a las tareas asíncronas para que el desarrollador los use más adelante en caso de que surja un problema. Dado que esta recopilación debe realizarse de forma síncrona en el motor del navegador, la recopilación lenta del registro de seguimiento puede ralentizar significativamente la página con las Herramientas para desarrolladores abiertas. Logramos reducir significativamente la sobrecarga de la recopilación de seguimientos de pila.

Pronto publicaremos una entrada de blog de ingeniería más detallada sobre la implementación.

Problemas de Chromium: 1069425, 1077657

Se muestran las funciones permitidas o no permitidas en la vista Detalles del fotograma

En la vista de detalles del iframe, ahora se muestra una lista de las funciones del navegador permitidas y no permitidas que controla la política de permisos.

La política de permisos es una API de plataforma web que le brinda a un sitio web la capacidad de permitir o bloquear el uso de funciones del navegador en su propio marco o en los elementos iframe que incorpora.

Error de Chromium: 1158827

Nueva columna SameParty en el panel Cookies

El panel Cookies del panel Application ahora muestra el atributo SameParty de las cookies. El atributo SameParty es un atributo booleano nuevo que indica si se debe incluir una cookie en las solicitudes a orígenes de los mismos conjuntos de sitios propios.

Error de Chromium: 1161427

Compatibilidad con fn.displayName no estándar y obsoleta

Se dejó de admitir el parámetro fn.displayName no estándar. Usa fn.name en su lugar.

Tradicionalmente, Chrome admitió la propiedad no estándar fn.displayName como una forma para que los desarrolladores controlen los nombres de depuración de las funciones que aparecen en error.stack y en los seguimientos de pila de las Herramientas para desarrolladores. En el ejemplo anterior, la pila de llamadas mostraría noLongerSupport.

Reemplaza fn.displayName por el fn.name estándar, que se hizo configurable (a través de Object.defineProperty) en ECMAScript 2015 para reemplazar la propiedad fn.displayName no estándar.

La compatibilidad con fn.displayName no ha sido confiable ni coherente en los diferentes motores de navegadores. Ralentiza la recopilación de seguimientos de pila, un costo que los desarrolladores siempre pagan, independientemente de si usan fn.displayName o no.

Problema de Chromium: 1177685

Baja de Don't show Chrome Data Saver warning en el menú de configuración

Se quitó el parámetro de configuración Don't show Chrome Data Saver warning porque se dejó de usar el Ahorro de datos de Chrome.

Error de Chromium: 1056922

Funciones experimentales

Informes automáticos de problemas de contraste bajo en la pestaña Issues

Se agregó compatibilidad experimental con la generación automática de informes sobre problemas de contraste en la pestaña Issues de Herramientas para desarrolladores.

El texto con contraste bajo es el problema de accesibilidad más común que se puede detectar automáticamente en la Web. Mostrar estos problemas en la pestaña Problemas ayuda a los desarrolladores a descubrirlos con mayor facilidad.

Abre una página con problemas de contraste bajo (p.ej., esta demostración). Luego, haz clic en el botón Recuento de problemas en la barra de estado de Console para abrir las pestañas Issues y ver los problemas.

Problema de Chromium: 1155460

Vista completa del árbol de accesibilidad en el panel de elementos

Ahora puedes alternar para ver la vista del árbol de accesibilidad completo mejorada de una página.

El panel de accesibilidad actual proporciona una visualización limitada de sus nodos, ya que solo muestra la cadena de ancestros directos desde el nodo raíz hasta el nodo inspeccionado. La nueva vista de árbol de accesibilidad tiene como objetivo mejorar eso y hacer que el árbol de accesibilidad sea más exploratorio, útil y fácil de usar para los desarrolladores.

Después de habilitar el experimento, aparecerá un botón nuevo en el panel Elements. Haz clic en él para cambiar entre el árbol DOM existente y el árbol de accesibilidad completo.

Ten en cuenta que este es un experimento en etapa inicial. Planeamos mejorar y expandir la funcionalidad con el tiempo.

Error de Chromium: 887173

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 analizar las nuevas funciones, las actualizaciones o cualquier otro tema relacionado con las 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 DevTools de YouTube o en los videos de Sugerencias de DevTools de YouTube.

Novedades de Herramientas para desarrolladores

Una lista de todo lo que se abordó en la serie Novedades de las Herramientas para desarrolladores