Novedades de Herramientas para desarrolladores (Chrome 86)

Nuevo panel multimedia

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

Nuevo panel multimedia

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

El nuevo panel Contenido multimedia ofrece una manera más fácil de ver eventos, registros, propiedades y una línea de tiempo de fotogramas se decodifica en la misma pestaña del navegador que el reproductor de video. Puedes inspeccionar y ver en vivo en posibles problemas más rápido (p.ej., por qué se producen disminuciones de fotogramas, por qué JavaScript interactúa con con el jugador de forma inesperada).

Problema de Chromium: 1018414

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

Ahora puedes realizar 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 Selecciona Tomar captura de pantalla del nodo.

Cómo tomar capturas de pantalla de los nodos

Problema de Chromium: 1100253

Actualizaciones de la pestaña Problemas

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

Problemas en el mensaje de la consola

Los problemas relacionados con las cookies de terceros ahora están ocultos de forma predeterminada en la pestaña Problemas. Habilita el nuevo Include de terceros para verlos.

casilla de verificación de problemas con cookies de terceros

Problemas de Chromium: 1096481, 1068116, 1080589

Emular las fuentes locales faltantes

Abre la pestaña Renderización y usa la nueva función Inhabilitar fuentes locales para emular lo que falta. Fuentes de local() en @font-face reglas.

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

Cuando la opción Inhabilitar fuentes locales está habilitada, Herramientas para desarrolladores ignora las fuentes local() y las recupera de la red.

Emular las fuentes locales faltantes

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

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

Si inhabilitas las fuentes locales, podrás hacer lo siguiente más fácilmente:

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

Problema de Chromium: 384968

Emula usuarios inactivos

La API de Idle Detection permite que los desarrolladores detecten usuarios inactivos y reaccionen ante el estado inactivo. cambios. Ahora puedes usar las Herramientas para desarrolladores para emular los cambios de estado de inactividad en la pestaña Sensores de ambos del usuario y de la pantalla, en lugar de esperar a que cambie el estado de inactividad real. Puedes abrir la pestaña Sensores del panel lateral.

Emula usuarios inactivos

Problema de Chromium: 1090802

Emular prefers-reduced-data

La consulta de medios prefers-reduced-data detecta si el usuario prefiere que se le entregue contenido de manera alternativa. que usa menos datos para que se renderice la página.

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

Emular prefers-reduced-data

Problema de Chromium: 1096068

Compatibilidad con funciones nuevas de JavaScript

Las Herramientas para desarrolladores ahora ofrecen mejor compatibilidad con algunas de las funciones más recientes del lenguaje JavaScript:

  • Operadores de asignación lógicos: Herramientas para desarrolladores ahora admite la asignación lógica con el nuevo los operadores &&=, ||= y ??= en los paneles Console y Sources.
  • Usa separadores numéricos con formato estilístico: Las Herramientas para desarrolladores ahora imprimen correctamente 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 de cambios.

Modificar el tamaño de la imagen

Nuevas auditorías en Lighthouse 6.2:

  • Evita tareas largas en el subproceso principal. Informa las tareas más largas en el subproceso principal, útil para e identificar los peores factores de la demora en las entradas.
  • Los vínculos se pueden rastrear. Verifica si el atributo href de los elementos de anclaje se vincula a un elemento destino, para que los vínculos se puedan descubrir.
  • Elementos de imagen sin tamaño: Verifica si se configuraron width y height explícitos en los elementos de imagen. El tamaño de imagen explícito puede reducir los cambios de diseño y mejorar la métrica CLS.
  • Evita las animaciones no compuestas. Informa sobre animaciones no compuestas que aparecen con bloqueos y reducir el CLS.
  • Escucha los eventos unload. Informa el evento unload. Considera usar pagehide o visibilitychange en su lugar, ya que el evento unload no se activa de manera confiable.

Auditorías actualizadas en Lighthouse 6.2:

  • Quita el código JavaScript que no se usa. Lighthouse ahora mejorará la auditoría si una página tiene mapas de fuentes JavaScript de acceso público.

Problema de Chromium: 772558

Baja de "otros orígenes" lista en el panel Service Workers

Herramientas para desarrolladores 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, Herramientas para desarrolladores mostraba una lista anidada en el panel Application > Service workers del panel de control.

Vínculo a otros orígenes

Problema de Chromium: 807440

Mostrar el resumen de cobertura de los elementos filtrados

Herramientas para desarrolladores ahora vuelve a calcular y muestra un resumen de la información de cobertura de forma dinámica cuando se filtran los filtros se aplican en la pestaña Cobertura. Anteriormente, la pestaña Cobertura siempre mostraba un un resumen de toda la información de cobertura.

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

Resumen de la cobertura de los elementos filtrados

Problema de Chromium: 1061385

Nueva vista de detalles del marco en el panel Application

Las Herramientas para desarrolladores ahora muestran una vista detallada de cada marco. Para acceder a él, haz clic en un marco debajo de Frames. en el panel Aplicación.

Nueva vista de detalles del marco en el panel Application

Problema de Chromium: 1093247

Detalles del marco de las ventanas abiertas

Herramientas para desarrolladores ahora también muestra ventanas o ventanas emergentes abiertas debajo del árbol de marcos. La vista de detalles del marco de las ventanas abiertas incluye información de seguridad adicional.

Detalles del marco de ventana abierto

Problema de Chromium: 1107766

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

Las Herramientas para desarrolladores ahora muestran un contexto seguro, la política de incorporaciones de origen cruzado (COEP) y Cross-Origin-Opener-Policy (COOP) en los detalles del fotograma

Información de seguridad y aislamiento

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

Problema de Chromium: 1051466

Actualizaciones del panel Elements and Network

Sugerencia de color accesible en el panel Estilos

Las Herramientas para desarrolladores ahora ofrecen sugerencias de colores para texto con poco contraste.

En el siguiente ejemplo, h1 tiene un texto de bajo contraste. Para solucionarlo, abre el selector de color de color. propiedad en el panel Estilos. Después de expandir la sección Relación de contraste, Herramientas para desarrolladores proporciona AA y sugerencias de colores AAA. Haz clic en el color sugerido para aplicar el color.

Problema de Chromium: 1093227

Restablecer el panel Propiedades en el panel Elementos

El panel Propiedades volvió a estar obsoleto en Chrome 84. En una versión futura de Herramientas para desarrolladores, mejoraremos el flujo de trabajo para inspeccionar las propiedades de los elementos.

Panel Properties en el panel Elements

Problema de Chromium: 1105205, 1116085

Valores de encabezado X-Client-Data legibles por humanos en el panel Red

Cuando se inspecciona un recurso de red en el panel Network, ahora Herramientas para desarrolladores formatea cualquier X-Client-Data. valores de encabezado en el panel Encabezados como código.

El encabezado HTTP X-Client-Data contiene una lista de los IDs de experimento y las marcas de Chrome que están habilitadas en el navegador. Los valores de encabezado sin procesar parecen cadenas opacas, ya que están codificados en base 64. búferes de protocolo serializados. Para que el contenido sea más transparente para los desarrolladores, se usa Herramientas para desarrolladores ahora se muestran los valores decodificados.

Valores de encabezado "X-Client-Data" legibles por humanos

Problema 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 font-family. propiedad del panel Estilos.

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. Antes, no lo era.

Autocompletar fuentes personalizadas

Problema de Chromium: 1106221

Muestra el tipo de recurso de manera coherente en el panel de red.

Herramientas para desarrolladores ahora muestra de manera coherente el mismo tipo de recurso que la solicitud de red original y Agrega / Redirect al valor de la columna Tipo cuando se produce un redireccionamiento (estado 302).

Anteriormente, Herramientas para desarrolladores cambiaba el tipo a Other de vez en cuando.

Tipo de recurso de redireccionamiento de visualización

Problema de Chromium: 997694

Borrar botones en los paneles Elements y Network

Los cuadros de texto de filtro en el panel Styles y el panel Network, así como el texto de búsqueda del DOM del panel Elementos, ahora tiene los botones Borrar. Si haces clic en Clear, se quitará el texto que que tienes entrada.

Borrar botones en los paneles Elements y Network

Problema de Chromium: 1067184

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   Más > 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.