Novedades de Herramientas para desarrolladores (Chrome 86)

Panel de New Media

Las Herramientas para desarrolladores ahora muestran información de los reproductores multimedia en el panel de Media.

Antes del nuevo panel de medios en Herramientas para desarrolladores, la información de registro y depuración sobre los reproductores de video se podía encontrar en chrome://media-internals.

El nuevo panel Media proporciona una forma más sencilla de ver eventos, registros, propiedades y una línea de tiempo de decodificaciones de fotogramas en la misma pestaña del navegador que el reproductor de video. Puedes ver en vivo e inspeccionar posibles problemas más rápido (p.ej., por qué se producen pérdidas de fotogramas, por qué JavaScript interactúa con el reproductor de una manera inesperada).

Error de Chromium: 1018414

Cómo tomar capturas de pantalla de nodos a través del menú contextual del panel Elements

Ahora puedes capturar capturas de pantalla de nodos a través del menú contextual en el panel Elements.

Por ejemplo, puedes tomar una captura de pantalla del índice haciendo clic con el botón derecho en el elemento y seleccionando Capture node screenshot.

Problema de Chromium: 1100253

Actualizaciones de la pestaña Problemas

La barra de advertencias de problemas del panel de la consola ahora se reemplazó por un mensaje normal.

Los problemas relacionados con las cookies de terceros ahora están ocultos de forma predeterminada en la pestaña Problemas. Habilita la nueva casilla de verificación Incluir los problemas de las cookies de terceros para verlos.

Problemas de Chromium: 1096481, 1068116, 1080589

Cómo emular fuentes locales faltantes

Abre la pestaña Rendering y usa la nueva función Disable local fonts para emular las fuentes local() faltantes en las reglas @font-face.

Por ejemplo, cuando la fuente "Rubik" está instalada en tu dispositivo y la regla @font-face src la usa como una fuente local(), Chrome usa el archivo de fuente local de tu dispositivo.

Cuando se habilita Inhabilitar las fuentes locales, las Herramientas para desarrolladores ignoran las fuentes local() y las recuperan de la red.

A menudo, los desarrolladores y diseñadores usan dos copias diferentes de la misma fuente durante el desarrollo:

• Una fuente local para tus herramientas de diseño
• Una fuente web para tu código

Inhabilitar las fuentes locales te permite hacer lo siguiente con mayor facilidad:

• Depura y mide el rendimiento y la optimización de la carga de fuentes web
• Verifica la corrección de tus reglas de CSS @font-face
• Descubre las diferencias entre las fuentes web y sus versiones locales

Problema de Chromium: 384968

Cómo emular a los usuarios inactivos

La API de Idle Detection permite a los desarrolladores detectar usuarios inactivos y reaccionar ante los cambios en el estado de inactividad. Ahora puedes usar Herramientas para desarrolladores para emular los cambios de estado de inactividad en la pestaña Sensores tanto para el estado del usuario como para el estado de la pantalla, en lugar de esperar a que cambie el estado de inactividad real. Puedes abrir la pestaña Sensores desde el Panel lateral.

Error de Chromium: 1090802

Emular prefers-reduced-data

La consulta de medios prefers-reduced-data detecta si el usuario prefiere que se le muestre contenido alternativo que use menos datos para renderizar la página.

Ahora puedes usar las Herramientas para desarrolladores para emular la consulta de medios prefers-reduced-data.

Error de Chromium: 1096068

Compatibilidad con nuevas funciones de JavaScript

Ahora, las Herramientas para desarrolladores brindan una mejor asistencia para algunas de las funciones del lenguaje JavaScript más recientes:

• Operadores de asignación lógica: Las Herramientas para desarrolladores ahora admiten la asignación lógica con los nuevos operadores &&=, ||= y ??= en los paneles de Console y Sources.
• Impresión legible de separadores numéricos: Ahora, Herramientas para desarrolladores imprime de forma legible los separadores numéricos en el panel Sources.

Problemas de Chromium: 1086817, 1080569

Lighthouse 6.2 en el panel de Lighthouse

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

Nuevas auditorías en Lighthouse 6.2:

• Evita tareas largas en el subproceso principal. Informa las tareas más largas en el subproceso principal, lo que resulta útil para identificar los mayores contribuyentes al retraso de entrada.
• Los vínculos son rastreables. Comprueba si el atributo href de los elementos de anclaje está vinculado a un destino adecuado para que se puedan descubrir los vínculos.
• Elementos de imagen sin tamaño: Verifica si se establecen width y height explícitos en los elementos de imagen. El tamaño explícito de la imagen puede reducir los cambios de diseño y mejorar la métrica del CLS.
• Evita las animaciones no compuestas. Informa sobre las animaciones no compuestas que se ven entrecortadas y reducen el CLS.
• Escucha los eventos de unload. Informa el evento unload. En su lugar, considera usar los eventos pagehide o visibilitychange, ya que el evento unload no se activa de forma confiable.

Se actualizaron las auditorías en Lighthouse 6.2:

• Quita el código JavaScript sin usar. Lighthouse ahora mejorará la auditoría si una página tiene mapas de origen de JavaScript accesibles de forma pública.

Error de Chromium: 772558

Se dejó de mostrar la lista de "otros orígenes" en el panel Service Workers

DevTools ahora proporciona un vínculo para ver la lista completa de service workers de otros orígenes en una nueva pestaña del navegador: chrome://serviceworker-internals/?devtools.

Anteriormente, DevTools mostraba una lista anidada en el panel Application > panel Service workers.

Problema de Chromium: 807440

Mostrar el resumen de cobertura para los elementos filtrados

Ahora, DevTools vuelve a calcular y muestra un resumen de la información de cobertura de forma dinámica cuando se aplican filtros en la pestaña Coverage. Anteriormente, la pestaña Cobertura siempre mostraba un resumen de toda la información de cobertura.

En el siguiente ejemplo, observa cómo el resumen dice 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. al principio y, luego, 57 kB of 604 kB (10%) used so far. 546 kB unused. después de que se aplica el filtrado de CSS.

Error de Chromium: 1061385

Nueva vista de detalles de fotogramas en el panel Application

Las Herramientas para desarrolladores ahora muestran una vista detallada de cada fotograma. Para acceder a él, haz clic en un fotograma en el menú Fotogramas del panel Aplicación.

Error de Chromium: 1093247

Detalles de los marcos de las ventanas abiertas

Las Herramientas para desarrolladores ahora también muestran las ventanas o ventanas emergentes abiertas en el árbol de marcos. La vista de detalles del fotograma de las ventanas abiertas incluye información de seguridad adicional.

Error de Chromium: 1107766

Información de seguridad y aislamiento (COEP / COOP)

Las Herramientas para desarrolladores ahora muestran el contexto seguro, Cross-Origin-Embedder-Policy (COEP) y Cross-Origin-Opener-Policy (COOP) en los detalles del iframe.

Pronto se agregará más información de seguridad a la vista de detalles del fotograma.

Error de Chromium: 1051466

Actualizaciones de los paneles Elements y Network

Sugerencia de color accesible en el panel Estilos

Las Herramientas para desarrolladores ahora ofrecen sugerencias de colores para textos con contraste de color bajo.

En el siguiente ejemplo, h1 tiene texto con contraste bajo. Para corregirlo, abre el selector de color de la propiedad color en el panel Styles. Después de expandir la sección Relación de contraste, las Herramientas para desarrolladores proporcionan sugerencias de colores AA y AAA. Haz clic en el color sugerido para aplicarlo.

Error de Chromium: 1093227

Cómo restablecer el panel Propiedades en el panel Elementos

Volvió el panel Propiedades, que había quedado obsoleto en Chrome 84. En una versión futura de DevTools, mejoraremos el flujo de trabajo para inspeccionar las propiedades de los elementos.

Problema de Chromium: 1105205, 1116085

Valores de encabezado X-Client-Data legibles en el panel de Network

Cuando inspeccionas un recurso de red en el panel de red, Herramientas para desarrolladores ahora da formato a todos los valores de encabezado X-Client-Data en el panel Encabezados como código.

El encabezado HTTP X-Client-Data contiene una lista de IDs de experimentos y marcas de Chrome que están habilitados en tu navegador. Los valores sin procesar del encabezado se ven como cadenas opacas, ya que están codificados en base64 y serializados como buffers de protocolo. Para que el contenido sea más transparente para los desarrolladores, ahora DevTools muestra los valores decodificados.

Error de Chromium: 1103854

Autocompletar fuentes personalizadas en el panel Estilos

Las caras de fuentes importadas ahora se agregan a la lista de autocompletado de CSS cuando se edita la propiedad font-family en el panel Styles.

En este ejemplo, 'Noto Sans' es una fuente personalizada instalada en la máquina local. Se muestra en la lista de finalización de CSS. Anteriormente, no era así.

Error de Chromium: 1106221

Mostrar el tipo de recurso de forma coherente en el panel de red

Las Herramientas para desarrolladores ahora muestran de forma coherente el mismo tipo de recurso que la solicitud de red original y agregan / Redirect al valor de la columna Type cuando se produce un redireccionamiento (estado 302).

Anteriormente, en ocasiones, las Herramientas para desarrolladores cambiaban el tipo a Other.

Error de Chromium: 997694

Botones de borrado en los paneles de elementos y de red

Los cuadros de texto de filtro en el panel Styles y el panel Network, así como el cuadro de texto de búsqueda del DOM en el panel Elements, ahora tienen botones Clear. Si haces clic en Borrar, se quitará todo el texto que hayas ingresado.

Error de Chromium: 1067184

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