Novedades de Herramientas para desarrolladores (Chrome 86)

Panel Nuevo contenido multimedia

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

Panel Nuevo contenido multimedia

Antes del nuevo panel multimedia 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 Contenido multimedia proporciona una forma más fácil de ver eventos, registros, propiedades y un cronograma de decodificación 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 los fotogramas descartados o por qué JavaScript interactúa con el reproductor de forma inesperada).

Problema de Chromium: 1018414

Toma capturas de pantalla de nodos a través del menú contextual del panel de elementos

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

Por ejemplo, puedes tomar una captura de pantalla de la tabla de contenido si haces clic con el botón derecho en el elemento y seleccionas Capture node screenshot.

Toma capturas de pantalla de los nodos

Problema de Chromium: 1100253

Actualizaciones de la pestaña Problemas

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

Mensaje de problemas en la consola

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

casilla de verificación de problemas de cookies de terceros

Problemas de Chromium: 1096481, 1068116, 1080589

Emular las fuentes locales que faltan

Abre la pestaña Renderización y usa la nueva función Inhabilitar fuentes locales 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 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 que faltan

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, y
  • Una fuente web para el código

Si inhabilitas las fuentes locales, podrás realizar las siguientes acciones con mayor facilidad:

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

Problema de Chromium: 384968

Emular usuarios inactivos

La API de Idle Detection permite a los desarrolladores detectar usuarios inactivos y reaccionar ante los cambios de estado inactivo. Ahora puedes usar Herramientas para desarrolladores a fin de emular los cambios de estado de inactividad en la pestaña Sensors 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 Sensors desde el panel lateral.

Emular 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 alternativo que use menos datos para que se renderice la página.

Ahora puedes usar las 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ógica: Herramientas para desarrolladores ahora admite la asignación lógica con los nuevos operadores &&=, ||= y ??= en los paneles Console y Sources.
  • Separadores numéricos con impresión con formato: Las Herramientas para desarrolladores ahora imprimen con formato de manera correcta los separadores numéricos en el panel Sources.

Problemas de Chromium: 1086817 y 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.

Quitar 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, lo que es útil para identificar los peores factores que contribuyen a la demora de entrada.
  • Los vínculos se pueden rastrear. Verifica si el atributo href de los elementos de anclaje está vinculado a un destino adecuado, de modo que se puedan descubrir los vínculos.
  • Elementos de imagen sin tamaño: Verifica si se configuraron 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 el CLS.
  • Evita las animaciones no compuestas. Informa animaciones no compuestas que aparecen con bloqueos y reducen el CLS.
  • Escucha los eventos de unload. Informa el evento unload. Considera usar los eventos pagehide o visibilitychange, ya que el evento unload no se activa de manera 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 fuentes de JavaScript de acceso público.

Problema de Chromium: 772558

Baja de la ficha "other origins" en el panel Service Workers

Las Herramientas para desarrolladores ahora proporcionan 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 Aplicación > panel Trabajadores de servicio.

Vincular a otros orígenes

Problema de Chromium: 807440

Mostrar resumen de cobertura de los elementos filtrados

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

En el siguiente ejemplo, observa cómo el resumen inicialmente dice 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 cobertura para los elementos filtrados

Problema de Chromium: 1061385

Nueva vista de detalles del marco en el panel Aplicación

Las Herramientas para desarrolladores ahora muestran una vista detallada de cada marco. Para acceder, haz clic en un marco debajo del menú Frames en el panel Application.

Nueva vista de detalles del marco en el panel Aplicación

Problema de Chromium: 1093247

Detalles del marco de las ventanas abiertas

Ahora Herramientas para desarrolladores 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 la ventana abierta

Problema de Chromium: 1107766

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

Las Herramientas para desarrolladores ahora muestran contexto seguro, Política de incorporaciones de origen cruzado (COEP) y Política de abridor de origen cruzado (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 de Elements y Network

Sugerencia de color accesible en el panel Estilos

Las Herramientas para desarrolladores ahora proporcionan sugerencias de colores para texto con bajo contraste de color.

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

Problema de Chromium: 1093227

Restablece el panel Propiedades en el panel Elementos.

Regresó el panel Propiedades. Se dio de baja en Chrome 84. En una versión futura de Herramientas para desarrolladores, mejoraremos el flujo de trabajo para inspeccionar propiedades de elementos.

Panel de propiedades en el panel Elementos

Problema de Chromium: 1105205, 1116085

Valores del encabezado X-Client-Data legibles en el panel de red

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

El encabezado HTTP X-Client-Data contiene una lista de IDs de experimentos y marcas de Chrome habilitados en el navegador. Los valores del encabezado sin procesar parecen strings opacas, ya que son búferes de protocolo serializados y codificados en base64. A fin de que el contenido sea más transparente para los desarrolladores, Herramientas para desarrolladores ahora muestra los valores decodificados.

Valores de encabezado "X-Client-Data" legibles

Problema de Chromium: 1103854

Autocompletar fuentes personalizadas en el panel Estilos

Los rostros de fuentes importados 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 lo era.

Autocompletar fuentes personalizadas

Problema de Chromium: 1106221

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

Ahora las Herramientas para desarrolladores muestran de manera coherente el mismo tipo de recurso que la solicitud de red original y agregan / Redirect al valor de la columna Tipo cuando se produce el redireccionamiento (estado 302).

Anteriormente, Herramientas para desarrolladores cambiaban el tipo a Other a veces.

Muestra el tipo de recurso de redireccionamiento

Problema de Chromium: 997694

Botones para borrar en los paneles Elements y Network

Los cuadros de texto de filtro del panel Estilos y el panel Red, al igual que el cuadro de texto de búsqueda de DOM en el panel Elementos, ahora tienen botones Borrar. Si haces clic en Clear, se quitará cualquier texto que ingreses.

Botones para borrar en los paneles Elements y Network

Problema de Chromium: 1067184

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).

Novedades de Herramientas para desarrolladores

Una lista de todos los temas abordados en la serie Novedades de Herramientas para desarrolladores.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Se canceló Chrome 82.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59