Novedades de DevTools (Microsoft Edge 87)

• 01/26/2021
• Tiempo de lectura: 10 minutos
• • M

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.

Mejora de la localización de DevTools

Para satisfacer sus necesidades de traducción, el equipo de DevTools de Microsoft Edge se centra en mejorar la calidad de la traducción. A partir de la versión 87 de Microsoft Edge, varias cadenas y términos están bloqueados y no cambian incluso cuando el resto de Las DevTools se muestran en otros idiomas. La lista de cadenas y términos afectados incluye lo siguiente.

• Las cadenas de la herramienta Deseste.
• El término service worker .
• Algunos de los filtros de la herramienta Red, como , URL y XHR JS CSS .
• La API de utilidades de consola de $0.

$0 ahora está disponible en la consola para los usuarios en versiones localizadas de DevTools. Gracias a la comunidad de desarrolladores global por ayudar a mejorar la localización de Microsoft Edge DevTools. Continúa envíando comentarios sobre la calidad de localización para mejorar la compatibilidad con DevTools en todas las configuraciones regionales. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya al problema #1136655.

Mover herramientas entre paneles superior e inferior

DevTools ahora admite mover herramientas entre los paneles superior e inferior. Personaliza tus DevTools y mejora la productividad viendo cualquier combinación de dos herramientas al mismo tiempo. Por ejemplo, vea las **** herramientas Elementos y Orígenes al mismo tiempo (moviendo la herramienta Orígenes a la parte inferior). Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya a Problema #1075732.

Guardar y exportar con la consola de red

La herramienta Consola de red ha mejorado la compatibilidad con los esquemas Postman v2.1 y OpenAPI v2. Para habilitar el experimento, ve a Activar características experimentales y elige la casilla situada junto a Habilitar consola de red. Para obtener más información acerca de la Consola de red, vaya a Habilitar la característica Experimental de consola de red. Este experimento ahora admite las siguientes acciones.

• Guardar y exportar colecciones y entornos.
• Editar y exportar conjuntos de variables de entorno dentro de la herramienta consola de red.

Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya al problema #1093687.

Herramientas de cuadrícula CSS mejoradas

Las DevTools de Microsoft Edge ahora admiten las siguientes características para inspeccionar, ver y depurar las cuadrículas CSS.

• Muestra una superposición de cuadrícula simplificada con la herramienta Inspeccionar u obtén información más detallada con superposiciones persistentes.
• Para habilitar las superposiciones de cuadrícula persistentes, elige el icono de cuadrícula junto a un elemento contenedor de cuadrícula en la herramienta Elementos o elige la cuadrícula en la herramienta Diseño.
• Puedes habilitar las superposiciones persistentes para varias cuadrículas.
• La nueva herramienta de diseño te permite alternar fácilmente las superposiciones de cuadrícula y configurar la apariencia y el contenido de cada una.

Las características están activadas de forma predeterminada. Para obtener más información acerca de las características, vaya a cuadrículas CSS. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya a Problema #1047356. Además, el equipo de Microsoft Edge DevTools colabora con el equipo de Chrome DevTools y la comunidad de Chromium para agregar nuevas características de herramientas de flexbox a DevTools. Para obtener actualizaciones sobre las herramientas de flexbox en el proyecto de código abierto chromium, vaya al problema #1136394.

Personalizar los métodos abreviados de teclado en Configuración

Ahora puedes personalizar el método abreviado de teclado para cualquier acción en DevTools. Desde la versión 84 de Microsoft Edge, puedes elegir entre Visual Studio Code y DevTools (predeterminado) preestablecidos para los métodos abreviados de teclado. A partir de la versión 87 de Microsoft Edge, puedes activar el experimento Habilitar editor de métodos abreviados de teclado para personalizar aún más los métodos abreviados de teclado.

Para habilitar el experimento, ve a Activar características experimentales y elige la casilla junto a Habilitar editor de métodos abreviados de teclado. Para obtener más información sobre la personalización y la edición de accesos directos, vaya a Habilitar la característica experimental del editor de método abreviado de teclado. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya al problema #174309.

Presentación de las herramientas de Microsoft Edge para la Visual Studio de código

Los elementos para Visual Studio code y network for Visual Studio Code extensions ahora se combinan en las nuevas herramientas de desarrollo de Microsoft Edge para Visual Studio de código. Usa las DevTools de Microsoft Edge para las siguientes actividades sin salir Visual Studio código.

• Depurar el DOM
• Editar CSS
• Inspeccionar el tráfico de red

Con la extensión, inicie Microsoft Edge, conéctese a una instancia existente del explorador o use un explorador sin cabeza directamente desde el editor. Para empezar a colaborar y archivar problemas con sus comentarios sobre esta extensión, vaya a Microsoft Edge Developer Tools for Visual Studio Code repo en GitHub.

Anuncios del proyecto de Chromium

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.

Nueva herramienta WebAuthn

En versiones anteriores de Microsoft Edge, no había compatibilidad nativa de depuración de WebAuthn. Necesitaba autenticadores físicos para probar la aplicación web con la API de autenticación web. Con la nueva herramienta WebAuthn, puede realizar las siguientes acciones sin el uso de autenticadores físicos.

• Emular autenticadores
• Personalizar atributos de autenticadores
• Inspeccionar los estados de autenticadores

Para obtener más información acerca de la característica WebAuthn, vaya a Emular autenticadores y depurar WebAuthn en Microsoft Edge DevTools.

Puede emular autenticadores y depurar la API de autenticación web con la nueva herramienta WebAuthn. Para abrir la herramienta WebAuthn, elija el icono Personalizar y controlar DevTools ( ) > ... Más herramientas > WebAuthn. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya al problema #1034663.

Actualizaciones de herramientas de elementos

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

Alterna el panel Calculado en el panel Estilos. El panel Calculado del panel Estilos está contraído de forma predeterminada. Para alternar, elija el botón. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya al problema #1073899.

Agrupación de propiedades CSS en el panel Calculado

Para ver el CSS aplicado con menos desplazamiento, agrupa las propiedades CSS por categorías en el panel Calculado. También puede centrarse selectivamente en un conjunto de propiedades relacionadas mientras inspecciona su CSS. En la herramienta Elementos, elija un elemento. Para agrupar (o desagrupar) las propiedades CSS, activa o desactiva la casilla grupo. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya a Problemas #1096230, #1084673y #1106251.

Pie 6.4 en la herramienta Desalmón

Ahora, la herramienta Deseste está ejecutando la versión 6.4. Para obtener una lista completa de los cambios, vaya a las notas de la versión Desenlaz. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya a Problema #772558.

eventos performance.mark() en la sección Intervalos

La sección Intervalos de una grabación de la herramienta Rendimiento marca ahora performance.mark() los eventos. Para probar esta característica y medir el rendimiento del código JavaScript, agregue performance.mark() eventos al código. Por ejemplo, el siguiente fragmento de código agrega marcadores antes y después de un bucle que itera de 0 a for 1000 con incrementos de 7.

performance.mark('start');
for (var i = 0; i < 1000; i+=7;){
  console.log(i);
}
performance.mark('end');

A continuación, abra la herramienta Rendimiento y vaya a la sección Intervalos para registrar el código JavaScript. Los performance.mark() eventos que agregó ahora se muestran en la grabación.

Nuevos filtros de tipo de recurso y url en la herramienta Red

Use las palabras resource-type clave y las nuevas de la herramienta url Red para filtrar las solicitudes de red. Por ejemplo, se resource-type:image usa para centrarse en las solicitudes de red que son imágenes.

Para detectar palabras clave más especiales, como resource-type y , navegue a las solicitudes de filtro por url propiedades. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya a Problemas #1121141 y #1104188.

Actualización de la vista de detalles del marco

Mostrar informes COEP y COEXIST en el punto de conexión

Consulta el extremo directiva de incrustación entre orígenes (COEP) y la directiva de apertura entre orígenes (COEXIST) en la sección Seguridad reporting to & aislamiento. La API de informes define un nuevo encabezado HTTP que le permite especificar los puntos de conexión del servidor para que el explorador envíe Report-To advertencias y errores. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya a Problema #1051466.

Mostrar el modo coep y de solo informe DESO

DevTools ahora muestra la report-only etiqueta de COEP y DEER que están establecidas en report-only modo. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya al problema #1051466.

Ver y corregir problemas de contraste de color en la herramienta de información general de CSS

La herramienta De información general de CSS ahora muestra una lista de elementos en la página que tienen problemas de contraste de color. En la siguiente página de demostración se muestra un ejemplo de un problema de contraste de color.

Demostración de colores accesibles de información general de CSS

Para habilitar este experimento, en Experimentos > de configuración, selecciona la casilla De información general de CSS. Para ver una lista de elementos que tienen un problema de contraste de color, en Problemas de contraste, elija Texto. Para abrir el elemento en la herramienta Elementos, elija un elemento de la lista. Para ayudar a solucionar problemas de contraste, las DevTools de Microsoft Edge proporcionan automáticamente sugerencias de color. Para revisar las actualizaciones en tiempo real de esta característica en el proyecto de código abierto chromium, vaya a Problema #1120316.

Descargar los canales de vista previa de Microsoft Edge

Si está en Windows o macOS, considere la posibilidad de usar los canales de vista previa de Microsoft Edge como explorador de desarrollo predeterminado. Los canales de vista previa 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 .

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