Novedades de DevTools (Microsoft Edge 86)

Anuncios del equipo de Microsoft Edge DevTools

En las secciones siguientes se enumeran los anuncios del equipo Microsoft Edge DevTools. Para probar las nuevas características de DevTools, las extensiones de código de Visual Studio y mucho más, revise los anuncios. Para mantenerte al día con las características más recientes de las herramientas para desarrolladores, descarga los canales de Microsoft Edge Preview y sigue el equipo de Microsoft Edge DevTools en Twitter.

Hacer coincidir los métodos abreviados de teclado en DevTools a Visual Studio Code

En Microsoft Edge 86, puedes hacer coincidir los métodos abreviados de teclado del DevTools con tus accesos directos en Visual Studio Code.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Para activar esta característica, vaya a personalizar los métodos abreviados de teclado en el DevTools de Microsoft Edge.

Por ejemplo, el método abreviado de teclado para pausar o seguir ejecutando un script en Visual Studio Code es F5 . Con el valor preestablecido DevTools (predeterminado) , ese mismo método abreviado de DevTools es F8 , pero cuando eliges el ajuste preestablecido de Visual Studio , ahora también está el método abreviado F5 .

#174309 de problemas de cromo

Emula Surface Duo y Samsung Galaxy Fold

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Característica experimental

Ahora puede probar el aspecto de su sitio web o aplicación en dos nuevos dispositivos: Surface Duo y Samsung Galaxy Foldr en Microsoft Edge.

Para ayudar a mejorar el sitio web o la aplicación para los dispositivos de plegable y pantalla doble, usa las siguientes características al emular el dispositivo.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Para activar esta característica experimental, navegue para activar las características experimentales y seleccione la casilla situada junto a emulación: modo de pantalla doble de soporte.

Para obtener más información sobre este experimento, vaya a emulación: compatibilidad con el modo de pantalla doble.

Problema de cromo: [#1054281][CR1054281]

Mejoras de superposición de cuadrícula CSS y nuevas características de cuadrícula experimental

Agradecemos tus comentarios positivos sobre las superposiciones de cuadrícula CSS mejoradas. Las superposiciones de cuadrícula CSS ahora están habilitadas de forma predeterminada y no requieren que se active un experimento.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Nota

Para obtener más información sobre las superposiciones de cuadrícula, vaya a características de depuración de cuadrícula de CSS.

El equipo de Microsoft Edge DevTools y el equipo de DevTools de Chrome colaboran en características adicionales. Las nuevas características incluyen varias superposiciones que son persistentes y se pueden configurar desde un nuevo panel de diseño en el panel elementos .

Para activar esta característica experimental, vaya a Activar características experimentales y seleccione la casilla situada junto a Habilitar nuevas características de depuración de cuadrícula CSS (opciones de configuración disponibles en el panel de la barra lateral de diseño en elementos después de reiniciar).

Para obtener más información sobre este experimento, navegue para Habilitar nuevas características de depuración de cuadrícula CSS.

Problema de cromo: [#1047356][CR1047356]

La tabla copiada de la consola conserva el formato

En Microsoft Edge 85 o versiones anteriores, se perdió el formato de una copiada console.table . Si ha copiado el resultado de la API de consola de tabla y lo ha pegado, solo se conservará el texto de la tabla.

En Microsoft Edge 86 o posterior, al copiar una tabla desde la consola, se conserva el formato.

Error de cromo: [#1115011] [CR1115011]

Visor de pedidos de origen para realizar pruebas de accesibilidad más sencillas

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Característica experimental

La nueva aplicación auxiliar de accesibilidad muestra el orden de los elementos en el origen.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Esta característica hace que sea más fácil comprobar la forma en que los usuarios del teclado y el lector de pantalla experimentan su sitio web o aplicación. Los lectores de pantalla y la navegación mediante teclado dependen del contenido que se coloca en un orden determinado en el código fuente de su sitio web o aplicación, de modo que coincida con la página representada. El visor del pedido de origen muestra posibles diferencias en el orden entre la página representada y el código fuente.

Para activar esta característica experimental, navegue para activar las características experimentales y seleccione la casilla que se encuentra junto a Habilitar el visor de orden de origen.

Para obtener más información sobre este experimento, vaya a Habilitar el visor de orden de origen.

Problema de cromo: [#1094406][CR1094406]

Resaltar todos los resultados de búsqueda en la herramienta elementos

En Microsoft Edge 84 y 85, el primer resultado de búsqueda en el panel elementos no resaltado. El resto de los resultados de la búsqueda estaban resaltados correctamente.

Gracias por enviar tus comentarios y de mejorar el cromo. Su comentario no cubierto [#1103316][CR1103316] problema en el proyecto de cromo de código abierto.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Ahora el problema se ha corregido en todas las versiones de Microsoft Edge.

Problema de cromo: [#1103316][CR1103316]

Anuncios del proyecto de cromo

En las siguientes secciones se anuncian características adicionales disponibles en Microsoft Edge que se han contribuido al proyecto de cromo de código abierto.

Nuevo panel multimedia

DevTools ahora muestra la información de los reproductores multimedia en el panel multimedia .

Para abrir el nuevo panel multimedia , complete el paso siguiente.

  1. Elija personalizar y controlar DevTools \ ( ... ) > más > mediosde herramientas.

    Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Antes del nuevo panel multimedia de DevTools, la información de registro y depuración de los reproductores de vídeo se encontró en la configuración de reproductores recientes . Para abrir la configuración de reproductores recientes , vaya a edge://media-internals la ficha reproductores y elija.

Ver contenido en vivo e inspeccionar problemas potenciales más rápidamente, incluidos los siguientes ejemplos.

  • ¿Por qué se eliminan los marcos?
  • ¿Por qué JavaScript interactúa con el reproductor de forma inesperada?

Captura de capturas de nodo con el menú contextual del panel de elementos

Ahora puede capturar capturas de pantalla de nodo usando el menú contextual en el panel elementos .

Por ejemplo, para tomar una captura de pantalla de la tabla de contenido, mantenga el puntero sobre el elemento, abra el menú contextual \ (haga clic con el botón derecho ) y seleccione capturar nodo captura de pantalla.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problema de cromo: [#1100253][CR1100253]

Actualizaciones de la herramienta problemas

La barra de advertencias de problemas del panel de la consola se reemplaza por un mensaje normal.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Los problemas de cookies de terceros ahora están ocultos de forma predeterminada en la herramienta problemas . Active la casilla incluir problemas de cookie de terceros para ver los problemas.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problemas de cromo: [1096481][CR1096481], [1068116][CR1068116], [1080589][CR1080589]

Emular las fuentes locales que faltan

Abra la herramienta de representación y use la nueva característica deshabilitar fuentes locales para emular los orígenes que faltan local() en @font-face las reglas.

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

Cuando deshabilitar fuentes locales está habilitado, DevTools ignora las local() fuentes y las recupera desde la red.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Si usa dos copias diferentes de la misma fuente durante el desarrollo, como los siguientes ejemplos.

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

Use deshabilitar fuentes locales para que le resulte más fácil completar las siguientes tareas.

  • Depure y mida el rendimiento de carga y la optimización de fuentes web.
  • Verifica la precisión de las @font-face reglas de CSS.
  • Descubra las diferencias entre las versiones locales instaladas en el dispositivo y una fuente web.

Problema de cromo: #384968

Emular usuarios inactivos

La [API de detección de inactividad][WebDevIdleDetection] permite a los programadores detectar usuarios inactivos y reaccionar según los cambios de estado de inactividad. Ahora puede usar DevTools para emular los cambios de estado de inactividad en la herramienta sensores para el estado del usuario y el estado de la pantalla en lugar de esperar a que cambie el estado real de inactividad. Puede abrir la herramienta de sensores desde el cajón.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problema de cromo: [#1090802][CR1090802]

Emular preferidos: datos reducidos

Nota

En Microsoft Edge 86, para habilitar esta característica, vaya a edge://flags#enable-experimental-web-platform-features la bandera experimental características de plataforma web y enciéndala. La opción de emulación solo se muestra si la marca está habilitada.

La consulta de medios de datos preferidos-datos detecta las preferencias de contenido de usuario para reducir los datos. Si se selecciona, el usuario recibe contenido de página alternativo que usa menos datos.

Ahora puede usar DevTools para emular la prefers-reduced-data consulta multimedia.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problema de cromo: [#1096068][CR1096068]

Compatibilidad con las nuevas características de JavaScript

DevTools ahora admite las siguientes características del lenguaje JavaScript.

Característica del lenguaje JavaScript Detalles
Operadores de asignación lógica DevTools ahora admite la asignación lógica con los &&= operadores New, ||= y ??= en los paneles Console (consola ) y Sources (orígenes ).
Separadores numéricos muy imprimibles DevTools ahora correctamente: imprime los separadores numéricos en el panel fuentes .

Problemas de cromo: [1086817][CR1086817], [1080569][CR1080569]

Lighthouse 6,2 en el panel de Lighthouse

El panel de Lighthouse ahora se ejecuta Lighthouse 6,2. Para obtener una lista completa de los cambios, vaya a las notas de la versión de Lighthouse.

Problema de cromo: #772558

Desuso de otras listas de orígenes en el panel de trabajo de servicios

DevTools ahora proporciona un vínculo desde el panel de trabajo de servicios \ (panel deaplicaciones > panel de trabajo de servicios ) para ver la lista completa de trabajadores de servicios de otros orígenes. Para acceder a la lista sin abrir la DevTools, vaya a edge://service-worker-internals/?devtools .

Anteriormente, DevTools mostrado una lista anidada en el panel de aplicaciones > panel de trabajo de servicios .

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problema de cromo: #807440

Mostrar Resumen de cobertura para elementos filtrados

DevTools ahora recalcular y mostrar un resumen de la información de cobertura de forma dinámica. La pantalla dinámica se desencadena cuando se aplican filtros en la herramienta de cobertura . Antes de que la herramienta de cobertura siempre muestre un resumen de toda la información de cobertura.

En la primera de las siguientes figuras, el resumen se muestra inicialmente 344 kB of 1.7 MB (20%) used so far. 1.4 MB unused. y en el segundo de las siguientes figuras, el Resumen 26.8 kB of 408 kB (7%) used so far. 381 kB unused. se muestra después de aplicar el filtrado CSS.

Problema de cromo: [#1061385][CR1090802]

Vista de detalles del nuevo marco en el panel de aplicación

DevTools ahora mostrar una vista detallada de cada marco. Para acceder a ella, elija un marco en el menú Marcos en el panel aplicación .

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problema de cromo: [#1093247][CR1093247]

Detalles de trama para las ventanas abiertas

Las ventanas abiertas y las ventanas emergentes se muestran ahora también en el árbol de Marcos. La vista detallada de las ventanas abiertas incluye información de seguridad adicional.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Error de cromo: [#1107766] [CR1107766]

Información de seguridad y aislamiento

En los detalles de la trama, ahora se muestra el contexto seguro, la [Directiva de origen cruzado-Embedder (COEP)][WebDevCoopCoep]y las [directivas de apertura cruzada entre orígenes (COOP)][WebDevCoopCoep] .

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

En el futuro, el equipo de Microsoft Edge DevTools y el equipo de Chrome DevTools planean agregar más información de seguridad a los detalles del marco.

Problema de cromo: [#1051466][CR1051466]

Elementos y actualizaciones del panel de red

Sugerencia de color accesible en el panel estilos

DevTools ahora ofrece sugerencias de color para el texto de contraste de color bajo.

En el ejemplo siguiente, h1 hay texto de bajo contraste. Para corregirlo, abra el selector de color de la color propiedad en el panel estilos . Después de expandir la sección relación de contraste , DevTools ofrece sugerencias de color AA y AAA. Seleccione el color sugerido para aplicar el color.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problema de cromo: [#1093227][CR1093227]

Panel de propiedades de restablecer en el panel elementos

El panel propiedades está atrás. Quedó obsoleto en Microsoft Edge 84. El equipo de Microsoft Edge DevTools y el equipo de Chrome DevTools están planeando las mejoras para inspeccionar las propiedades de los elementos.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problema de cromo: [#1116085] [CR1116085]

Autocompletar fuentes personalizadas en el panel estilos

Las caras de las fuentes importadas se agregan ahora a la lista de autocompletar CSS al editar la font-family propiedad en el panel estilos .

Por ejemplo, si monospace es una fuente personalizada instalada en la máquina local, se muestra en la lista de finalización de CSS. En versiones anteriores de Microsoft Edge, no se mostraba la fuente.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Error de cromo: [#1106221] CR1106221

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

DevTools ahora muestra el mismo tipo de recurso que la solicitud de red original y anexa / Redirect al valor de la columna Type cuando el redireccionamiento ha transformado \ (código de estado http 302 ).

Anteriormente DevTools cambiado el tipo a Other veces.

Hacer coincidir los métodos abreviados de teclado en el código de DevTools a Visual Studio

Problema de cromo: [#997694][CR997694]

Botones borrar en los paneles elementos y red

Los siguientes cuadros de texto ahora tienen botones claros .

  • Los cuadros de texto de filtro en el panel estilos y en el panel red .
  • Cuadro de texto de búsqueda de DOM en el panel elementos .

Haga clic en el botón Borrar para quitar el texto de la imagen.

Problema de cromo: [#1067184][CR1067184]

Descargar los canales de Microsoft Edge Preview

Si está en Windows o macOS, considere la posibilidad de usar los canales de Microsoft Edge Preview como su explorador de desarrollo predeterminado. Los canales de previsualización proporcionan acceso a las características más recientes de DevTools.

Ponerse en contacto con el equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono para Enviar comentarios en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

[CR997694]: https://crbug.com/997694 "Las solicitudes de XHR con el estado 302 no se muestran en el filtro \ "XHR " en el panel red | Errores de cromo"
[CR1047356]: https://crbug.com/1047356 "Herramientas CSS/Flexbox/tables de CSS | Errores de cromo"
[CR1051466]: https://crbug.com/1051466 "Compatibilidad con COOP/depuración COEP en DevTools | Errores de cromo"
[CR1054281]: https://crbug.com/1054281 "Solicitud de característica: DevTools debe emular plegable y dispositivos de pantalla dual | Errores de cromo"
[CR1067184]: https://crbug.com/1067184 "Solicitud de característica: botón Borrar filtro en los elementos del & de red: entradas del filtro de estilo de > | Errores de cromo"
[CR1068116]: https://crbug.com/1068116 "Panel de problemas de envío de ☂ | Errores de cromo"
[CR1080569]: https://crbug.com/1080569 "ACORN no admite operadores de asignación lógica | Errores de cromo"
[CR1080589]: https://crbug.com/1080589 "Clasificar problemas por terceros o por terceros | Errores de cromo"
[CR1086817]: https://crbug.com/1086817 "ACORN no admite separadores numéricos | Errores de cromo"
[CR1090802]: https://crbug.com/1090802 "Simular cambios de estado de inactividad de API de detección de inactividad | Errores de cromo"
[CR1093227]: https://crbug.com/1093227 "DevTools: sugerir color más accesible | Errores de cromo"
[CR1093247]: https://crbug.com/1093247 "Mostrar información sobre marcos en el panel aplicación | Errores de cromo"
[CR1094406]: https://crbug.com/1094406 "Los desarrolladores desean un visor de pedidos de origen para al https://webwewant.fyi/wants/64/"
[CR1096068]: https://crbug.com/1096068 "DevTools: compatibilidad emulando la característica de medios de datos preferidos, menos-datos | Errores de cromo"
[CR1096481]: https://crbug.com/1096481 "Ubicación del banner de problemas | Errores de cromo"
[CR1100253]: https://crbug.com/1100253 "Agregar acceso directo al nodo de captura en el menú contextual del elemento | Errores de cromo"
[CR1103316]: https://crbug.com/1103316 "La búsqueda de elementos no resolveNode (resaltar texto, etc.) en el primer resultado de búsqueda | Errores de cromo"
[CR1103854]: https://crbug.com/1103854 "Desproteger los valores de datos de X-Client en herramientas para desarrolladores | Errores de cromo"

[CR1107766]: https://crbug.com/1107766 "Mostrar información sobre fotogramas generados por" Window. Open () "en árbol de marcos | Errores de cromo "
[CR1115011]: https://crbug.com/1115011 "al copiar una tabla desde la consola, no se conserva la estructura de la tabla | Errores de cromo "
[CR1116085]: https://crbug.com/1116085 "vuelve al inspector de propiedades de DevTools | Errores de cromo "

[WebDevCoopCoep]: https://web.dev/coop-coep "Cómo convertir tu sitio web \ "aislamiento de origen cruzado " usando COOP y COEP | Web. dev"
[WebDevIdleDetection]: https://web.dev/idle-detection "Detectar usuarios inactivos con la API de detección de inactividad | Web. dev"
[WebDevNonCompositedAnimations]: https://web.dev/non-composited-animations "Evitar animaciones no compuestas | Web. dev"

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según las condiciones descritas en la licencia internacional de Creative Commons Atribution 4,0.
La página original se encuentra aquí y está creada por Jecelyn Yeen \ (defensor para desarrolladores, Chrome DevTools ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.