Novedades de Herramientas para desarrolladores (Chrome 90)

Nuevas herramientas de depuración de CSS Flexbox

Herramientas para desarrolladores ahora tiene herramientas dedicadas de depuración de flexbox de CSS.

Cuando se aplica display: flex o display: inline-flex a un elemento HTML de tu página, verás la insignia flex junto a ella en el panel Elementos. Haz clic en la insignia para activar o desactivar la visualización de un la superposición flexible en la página.

En el panel Estilos, puedes hacer clic en el ícono nuevo junto a display: flex. display: inline-flex para abrir el editor de Flexbox. El editor de Flexbox ofrece una forma rápida de editar las propiedades Flexbox. ¡Pruébalo!

Además, el panel de Diseño tiene una sección Flexbox. Muestra todos los elementos de flexbox en la . 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 Métricas web esenciales.

Las Métricas web esenciales son una iniciativa de Google para brindar una guía unificada sobre los indicadores de calidad que son esenciales para brindar una excelente experiencia del usuario en la web.

Abre el menú de comandos, ejecuta el comando Show Rendering y, luego, habilita Core Web. Vitals.

Actualmente, la superposición muestra lo siguiente:

• Largest Contentful Paint (LCP): Mide el rendimiento de carga. Para proporcionar un buen usuario el LCP debería ocurrir en un plazo de 2.5 segundos a partir del momento en 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 debe tener un FID de menos de 100 milisegundos.
• Cambio de diseño acumulado (CLS): Mide la estabilidad visual. Para proporcionar un buen usuario experiencia, las páginas deben mantener un CLS inferior a 0.1.

Problema de Chromium: 1152089

Actualizaciones de la pestaña Problemas

Se movió el recuento de problemas a la barra de estado de Console.

Se agregó un nuevo botón de recuento de problemas en la barra de estado de la consola para mejorar la visibilidad de advertencias sobre problemas. Esto reemplazará el mensaje del problema en Console.

Problema de Chromium: 1140516

Cómo informar problemas relacionados con la Actividad web de confianza

La pestaña Problemas ahora informa problemas relacionados con la Actividad web de confianza. Su objetivo es ayudar a los desarrolladores comprender y solucionar los problemas de Actividad web de confianza de sus sitios, lo que mejora la calidad de su aplicaciones.

Abre una Actividad web de confianza. Luego, haz clic en Cantidad de problemas para abrir las pestañas Problemas. en la barra de estado de Console para ver los problemas. Mire esta charla de Andre para obtener más información más información para crear e implementar Trusted Web Activity.

Problema de Chromium: 1147479

Dales formato a las cadenas como literales de cadena de JavaScript (válidos) en la consola

Ahora, Console formatea cadenas como literales de cadena de JavaScript válidos en la consola. Anteriormente, Console no escaparía las comillas dobles al imprimir strings.

Problema de Chromium: 1178530

Nuevo panel Tokens de confianza en el panel Aplicación

Herramientas para desarrolladores ahora muestra todos los tokens de confianza disponibles en el contexto de navegación actual en la nueva pestaña Confianza Tokens, en el panel Aplicación.

Trust Token es una API nueva que ayuda a combatir el fraude y distinguir entre bots y seres humanos reales, sin reglas pasivas. el seguimiento de conversiones. Obtén más información para comenzar a usar tokens de confianza.

Problema de Chromium: 1126824

Emula la función de medios de la gama de colores de CSS

La consulta de medios color-gamut te permite probar el rango aproximado de colores compatibles. 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 Emulate CSS Menú desplegable de la gama de colores de la función de medios.

Problema de Chromium: 1073887

Herramientas mejoradas de apps web progresivas

Las Herramientas para desarrolladores ahora muestran un mensaje de advertencia de instalación de apps web progresivas (AWP) más detallado. en la consola, con un vínculo a la documentación.

El panel Manifest ahora muestra un mensaje de advertencia si la description del manifiesto supera 324 caracteres.

Además, el panel Manifest ahora muestra un mensaje de advertencia si la captura de pantalla de la AWP no muestra cumplan con los requisitos. Obtén más información sobre la propiedad capturas de pantalla de la AWP y sus requisitos. aquí.

Problema de Chromium: 1146450, 1169689, 965802

Nueva columna Remote Address Space en el panel Network

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

Problema de Chromium: 1128885

Mejoras en el rendimiento

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

Herramientas para desarrolladores recopila seguimientos de pila y los adjunta a mensajes de la consola o tareas asíncronas para más adelante consumo por parte del desarrollador en caso de un problema. Dado que la recopilación debe realizarse de forma síncrona, en el motor del navegador, la recopilación lenta de seguimiento de pila puede ralentizar considerablemente la página con Se abrirán las Herramientas para desarrolladores. Hemos logrado reducir significativamente la sobrecarga de recopilar el seguimiento de pila.

No te pierdas la entrada de blog sobre ingeniería más detallada que se explica sobre la implementación.

Problemas de Chromium: 1069425, 1077657

Mostrar las funciones permitidas o no permitidas en la vista Detalles del marco

La vista Detalles del marco ahora muestra una lista de las funciones del navegador permitidas y no permitidas que controla el Política de Permisos.

La política de permisos es una API de plataforma web que permite que los sitios web permitan o bloqueen el uso de funciones del navegador en su propio marco o en iframes que incorpora.

Problema de Chromium: 1158827

Nueva columna SameParty en el panel Cookies

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

Problema de Chromium: 1161427

Se dio de baja la compatibilidad no estándar de fn.displayName

La compatibilidad con el fn.displayName no estándar dejó de estar disponible. Usa fn.name en su lugar.

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

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

La compatibilidad con fn.displayName no era confiable ni uniforme en todos los motores de navegador. Ralentiza la recopilación de seguimiento de pila por abajo, un costo que los desarrolladores siempre pagan, sin importar si realmente usan fn.displayName o no.

Problema de Chromium: 1177685

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

Se eliminó el parámetro Don't show Chrome Data Saver warning porque se inhabilitó el Ahorro de datos de Chrome obsoleta.

Problema de Chromium: 1056922

Funciones experimentales

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

Herramientas para desarrolladores agregó compatibilidad experimental para informar problemas de contraste en la pestaña Problemas automáticamente.

El texto de contraste bajo es el problema de accesibilidad más común en la Web y que se detecta automáticamente. 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, abre las pestañas Problemas Haz clic en el botón Recuento de problemas en la barra de estado de la Consola para ver los problemas.

Problema de Chromium: 1155460

Vista de árbol de accesibilidad completa en el panel Elements

Ahora puedes activar o desactivar la vista de árbol de accesibilidad completa y nueva de una página.

El panel de accesibilidad actual ofrece una visualización limitada de los nodos y solo muestra la o una cadena principal directa desde el nodo raíz hasta el nodo inspeccionado. El objetivo de la nueva vista de árbol de accesibilidad mejorar eso y hacer que el árbol de accesibilidad sea más explorable, útil y fácil para los desarrolladores usar.

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

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

Problema de Chromium: 887173

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