Novedades de Herramientas para desarrolladores (Chrome 87)

Nuevas herramientas de depuración de cuadrícula de CSS

Las Herramientas para desarrolladores ahora ofrecen una mejor compatibilidad con la depuración de cuadrícula de CSS.

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

El nuevo panel de Diseño tiene una sección Cuadrícula que ofrece varias opciones para ver la cuadrículas.

Consulta la documentación para obtener más información.

Problema de Chromium: 1047356

Nueva pestaña de WebAuthn

Ahora puedes emular autenticadores y depurar la API de Web Authentication con el nuevo WebAuthn .

Selecciona Más opciones > Más herramientas > WebAuthn para abrir la pestaña de WebAuthn.

Antes de la nueva pestaña WebAuthn, no había compatibilidad nativa con la depuración de WebAuthn en Chrome. Los desarrolladores necesitaban autenticadores físicos para probar su aplicación web con la API de Web Authentication.

Con la nueva pestaña WebAuthn, los desarrolladores web ahora pueden emular estos autenticadores, personalizar sus capacidades e inspeccionar sus estados, sin necesidad de autenticadores físicos. Esto hace que la experiencia de depuración.

Consulta nuestra documentación para obtener más información sobre la función WebAuthn.

Problema de Chromium: 1034663

Mover las herramientas entre el panel inferior y superior

Las Herramientas para desarrolladores ahora admiten el movimiento de herramientas en Herramientas para desarrolladores entre el panel inferior y superior. De esta manera, puedes ver dos herramientas a la vez.

Por ejemplo, si quieres ver los paneles Elementos y Fuentes al mismo tiempo, puedes haz clic en el panel Fuentes y selecciona Mover al final para moverlo a la parte inferior.

Del mismo modo, puedes mover cualquier pestaña de la parte inferior a la parte superior al hacer clic con el botón derecho en la pestaña y seleccionar Mover a arriba.

Problema de Chromium: 1075732

Actualizaciones del panel de elementos

Visualiza el panel de la barra lateral calculada en el panel Estilos

Ahora puedes activar o desactivar el panel Barra lateral calculada en el panel Estilos.

El panel Barra lateral calculada en el panel Estilos está contraído de forma predeterminada. Haz clic en el botón activarla o desactivarla.

Problema de Chromium: 1073899

Agrupa propiedades de CSS en el panel Computed

Ahora puedes agrupar las propiedades de CSS por categorías en el panel Calculado.

Con esta nueva función de agrupación, será más fácil navegar por el panel Calculado (menos desplazamiento) y se enfoque selectivamente en un conjunto de propiedades relacionadas para la inspección de CSS.

En el panel Elementos, selecciona un elemento. Activa o desactiva la casilla de verificación Group para agrupar o desagrupar el CSS. propiedades.

Problemas de Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 en el panel de Lighthouse

El panel de Lighthouse ahora ejecuta Lighthouse 6.4. Consulta las notas de la versión para obtener una lista de cambios.

Nuevas auditorías en Lighthouse 6.4:

• Precargar fuentes: Valida si se precargaron todas las fuentes que usan font-display: optional.
• Mapas de orígenes válidos. Realiza una auditoría si una página tiene mapas de fuentes válidos para JavaScript propio de gran tamaño.
• [Experimental] Biblioteca de JavaScript grande. Las bibliotecas de JavaScript grandes pueden rendimiento. Esta auditoría sugiere alternativas más económicas a las bibliotecas de JavaScript comunes y grandes, como moment.js

Problema de Chromium: 772558

Eventos de performance.mark() en la sección Tiempos

En la sección Tiempos de las grabaciones de Performance, ahora se marcan los eventos performance.mark().

Nuevos filtros resource-type y url en el panel Red

Usa las nuevas palabras clave resource-type y url en el panel Red para filtrar las solicitudes de red.

Por ejemplo, usa resource-type:image para enfocarte en las solicitudes de red que son imágenes.

Consulta cómo filtrar solicitudes por propiedades para descubrir más palabras clave especiales, como resource-type. y url.

Problemas de Chromium: 1121141, 1104188

Actualizaciones de la vista de detalles del marco

Muestra el extremo reporting to de COEP y COOP.

Ahora puedes ver la Política de incorporaciones de origen cruzado (COEP) y la Política de abridor de origen cruzado (COOP)reporting to en la sección Seguridad y Isolation.

La API de Reporting define un nuevo encabezado HTTP, Report-To, que ofrece a los desarrolladores web una forma de especificar extremos del servidor a los que el navegador debe enviarles advertencias y errores.

Lee este artículo para obtener más información sobre cómo habilitar el COEP y el COOP, y crear tu sitio web. “aislado de origen cruzado”.

Problema de Chromium: 1051466

Muestra el modo COEP y COOP report-only

Las Herramientas para desarrolladores ahora muestran la etiqueta report-only para COEP y COOP que están configuradas en modo report-only.

Mira este video para aprender a prevenir filtraciones de información y habilitar COOP y COEP en tu sitio web.

Problema de Chromium: 1051466

Baja de Settings en el menú Más herramientas

Se dio de baja Settings en el menú Más herramientas. Abre la Configuración en el panel principal. en su lugar.

Problema de Chromium: 1121312

Funciones experimentales

Ver y corregir problemas de contraste de color en el panel Resumen de CSS

El panel Resumen de CSS ahora muestra una lista de textos de tu página que tienen poco contraste de color.

En este ejemplo, la página de demostración tiene un problema de contraste de color bajo. Haz clic en el problema para ver una lista de los elementos que tienen el problema.

Haz clic en un elemento de la lista para abrirlo en el panel Elementos. Herramientas para desarrolladores proporciona la sugerencia de colores para ayudarte a corregir el texto de bajo contraste.

Problema de Chromium: 1120316

Cómo personalizar las combinaciones de teclas en Herramientas para desarrolladores

Ahora puedes personalizar las combinaciones de teclas para tus comandos favoritos en Herramientas para desarrolladores.

Ve a Configuración > Combinaciones de teclas, coloca el cursor sobre un comando y haz clic en el botón Editar (ícono de lápiz). para personalizar la combinación de teclas.

Para restablecer todos los accesos directos, haz clic en Restablecer atajos predeterminados.

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