Novedades de DevTools (Microsoft Edge 89)

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.

What's New is now Welcome

La herramienta Novedades de Microsoft Edge DevTools ahora tiene una nueva apariencia y un nuevo nombre: Bienvenido. La herramienta de bienvenida aún muestra las últimas noticias y actualizaciones de DevTools. Ahora también incluye vínculos a la documentación de Microsoft Edge DevTools, formas de enviar comentarios y mucho más. Para mostrar la herramienta de bienvenida después de cada actualización a Microsoft Edge, seleccione la casilla situada junto a la pestaña Abrir después de cada actualización bajo el título. Para cerrar la herramienta de bienvenida, elija la X en el lado derecho del título de la pestaña. Si prefieres la herramienta Novedades original, ve a Experimentos de configuración y quita la casilla junto a > **** Habilitar pestaña de bienvenida.

La herramienta de bienvenida está resaltada

Editor de fuentes visuales en el panel Estilos

Cuando trabaje con fuentes en CSS, use el nuevo Editor de fuentes visual. Puedes definir fuentes de reserva y usar controles deslizantes para definir el grosor, el tamaño, el alto de línea y el espaciado de la fuente. El Editor de fuentes le ayuda a completar las siguientes acciones.

  • Cambiar entre unidades para distintas propiedades de fuente
  • Cambiar entre palabras clave para distintas propiedades de fuente
  • Convertir unidades
  • Generar código CSS preciso

Para activar este experimento, ve a Experimentos de configuración y elige la casilla junto a Habilitar nuevas herramientas del Editor de fuentes > **** en el panel Estilos. Para obtener más información, vaya a Editar estilos y configuraciones de fuente CSS en el panel Estilos de DevTools. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1093229.

El editor de fuentes visuales se resalta en el panel Estilos

Herramientas de depuración de CSS Flexbox

Las características de depuración de Flexbox están en desarrollo activo. Para activar el experimento para las dos características siguientes, ve a Experimentos de configuración y elige la casilla junto a Habilitar nuevas características > **** de depuración de CSS Flexbox. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya a los problemas 1136394 y 1139949.

El nuevo icono de Flexbox (flex) ayuda a identificar y mostrar contenedores flex

En la herramienta Elementos, el nuevo icono de Flexbox (flex) te ayuda a identificar contenedores de Flexbox en el código. Elige el icono de Flexbox (flex) para activar o desactivar el efecto de superposición que describe un contenedor de Flexbox. Puede personalizar el color de la superposición en el panel Diseño, que se encuentra junto a Estilos y Calculado.

Para activar y desactivar el efecto de superposición que describe el contenedor de Flexbox, elija el icono Flexbox ( flex ).

Puede personalizar el color de la superposición en el panel Diseño junto a Estilos y Calculado.

Mostrar iconos de alineación y líneas de cuadrícula cuando los diseños de Flexbox cambian mediante propiedades CSS

Al editar CSS para el diseño de Flexbox, CSS se autocompleta en el panel Estilos ahora muestra iconos útiles junto a las propiedades pertinentes de Flexbox. **** Para probar esta nueva característica, abra la herramienta Elementos y seleccione un contenedor flexible. A continuación, agregue o cambie una propiedad en ese contenedor en el panel Estilos.

El menú Autocompletar ahora muestra iconos que indican el efecto de propiedades de alineación como align-content y align-items .

Además, DevTools ahora muestra una línea de guidación para ayudarte a revisar mejor la align-items propiedad CSS. También gap se admite la propiedad CSS. En la figura siguiente, la propiedad CSS se establece en y se muestra el patrón de trama gap gap: 12px; de cada intervalo.

Agregar herramientas rápidamente con el nuevo botón Más herramientas

Ahora tienes una nueva forma de abrir más herramientas en Microsoft Edge DevTools. Después de activar este **** experimento, el icono Más herramientas se muestra como un signo más ( ) a la derecha + del panel principal. Para mostrar una lista de otras herramientas para agregar al panel principal, elija el icono Más herramientas ( + ). Para activar este experimento, ve a Experimentos de configuración y, a continuación, selecciona la casilla junto a Habilitar + menús de pestaña de botón > **** para abrir más herramientas.

Más herramientas resaltadas en DevTools

Las tecnologías de asistencia ahora anuncian la posición y el recuento de sugerencias css

Cuando edita CSS, obtiene un desplegable de características. Esta característica no estaba disponible para los usuarios de tecnologías de asistencia, ya que se anuncia en la versión 89 de Microsoft Edge. Un usuario de tecnologías de asistencia ahora puede navegar por sugerencias css en el panel Estilos. En La versión 88 de Microsoft Edge y versiones anteriores, la tecnología de asistencia anunciada como un usuario navegaba por la lista de sugerencias al editar CSS en el panel Suggestion Estilos. **** En la versión 89 de Microsoft Edge, un usuario de tecnología de asistencia ahora escucha la posición y el recuento de la sugerencia actual. Cada sugerencia se anuncia a medida que el usuario navega por la lista de sugerencias, como sugerencia 3 de 5. Para obtener más información sobre cómo escribir CSS en DevTools, vaya a Cambiar CSS. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1157329.

Para ver un vídeo que muestra y lee en voz alta varias sugerencias con este experimento activado, ve a Voiceover anunciando opciones de devtools en YouTube.

Sugerencia resaltada en el panel Estilos

Emular Surface Duo y El plegado Desaplicación de Samsung

Prueba la apariencia de tu sitio web o aplicación en los siguientes dispositivos de Microsoft Edge.

Active las características de la plataforma web experimental para obtener acceso a la nueva característica de pantalla multimedia CSS y obtener la API de JavaScript de WindowsSegments. Navegue hasta edge://flags y cambie la marca junto a las características de la plataforma web experimental. Para ayudar a mejorar tu sitio web o aplicación para la pantalla doble y los dispositivos plegados, usa las siguientes características al emular el dispositivo.

Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1054281.

Emular la pantalla doble

Microsoft Edge Developer Tools for Visual Studio Code version 1.1.2

Microsoft Edge Developer Tools for Visual Studio Code extension version 1.1.2 for Microsoft Visual Studio Code has the following changes since the previous release. Microsoft Visual Studio Code actualiza las extensiones automáticamente. Para actualizar manualmente a la versión 1.1.2, vaya a Actualizar una extensión manualmente.

You may file issues and contribute to the extension on the vscode-edge-devtools GitHub repo.

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.

Captura de pantalla de nodo más allá de la ventanilla

En La versión 89 de Microsoft Edge, las capturas de pantalla de nodo son más precisas, capturando el nodo completo incluso si el contenido del nodo no está visible en la ventanilla. En la herramienta Elementos, mantenga el mouse sobre un elemento, abra el menú contextual (haga clic con el botón secundario) y elija Captura de pantalla del nodo. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1003629.

Captura de pantalla de nodo resaltada en el menú contextual de la herramienta Elementos

Actualizaciones de herramientas de elementos

Compatibilidad con la fuerza del estado CSS :target

Ahora puedes usar DevTools para forzar la pseudo-clase CSS :target. La pseudo class se desencadena cuando un elemento único (el elemento de destino) tiene un fragmento de :target id la dirección URL. Por ejemplo, la http://www.example.com/index.html#section1 dirección URL desencadena la pseudo class en un elemento HTML con :target id="section1" . Para probar una demostración con la sección 1 resaltada, vaya a CSS :target demo. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1156628.

Usar elementos duplicados para copiar elementos

Usa el nuevo acceso directo de elemento duplicado para clonar un elemento. En la herramienta Elementos, mantenga el mouse sobre un elemento, abra el menú contextual (haga clic con el botón secundario), elija Duplicar elemento. Se crea un nuevo elemento en el elemento seleccionado. Para duplicar el elemento con un método abreviado de teclado, selecciona Shift + Alt + Down Arrow (Windows/Linux) o Shift + Option + Down Arrow (macOS). Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1150797.

El elemento Duplicado se resalta en el menú contextual de un elemento de la herramienta Elementos

Selectores de colores para propiedades CSS personalizadas

El panel Estilos ahora muestra los selectores de color para las propiedades CSS personalizadas. Para recorrer los formatos RGBA, HSLA y Hexadecimal del valor de color, mantenga presionado y Shift elija el selector de color. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1147016.

Selectores de colores para propiedades CSS personalizadas

Copiar clases y propiedades CSS

Ahora puede copiar las propiedades CSS más rápido con algunas opciones nuevas en el menú contextual. En la herramienta Elementos, elija un elemento. Para copiar el valor, en el panel Estilos, mantenga el mouse sobre una clase CSS o una propiedad CSS, abra un menú contextual (haga clic con el botón secundario) y elija la opción de copia. ****

Opciones de copia para una clase CSS.

Opción Detalles
Selector de copia Copie el nombre del selector actual.
Regla de copia Copie la regla del selector actual.
Copiar todas las declaraciones Copie todas las declaraciones en la regla actual, incluidas las propiedades no válidas y con prefijo.

Opciones de copia de una propiedad CSS.

Opción Detalles
Copiar declaración Copie la declaración de la línea actual.
Copy (propiedad) Copie la propiedad de la línea actual.
Valor de copia Copie el valor de la línea actual.

Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1152391.

Actualizaciones de cookies

Nueva opción para mostrar cookies descodificadas por URL

Ahora puede optar por mostrar el valor de cookies descodificadas por URL en el panel Cookies. Para mostrar la cookie descodificada, vaya al panel **** Cookies de aplicación, elija cualquier cookie de la lista y seleccione la casilla situada junto a > **** Mostrar url descodificada. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 997625.

Opción para mostrar cookies descodificadas por URL

Filtrar y borrar las cookies visibles

En Microsoft Edge versión 88 **** o anterior, la herramienta de aplicación solo proporcionaba una forma de borrar todas las cookies con el botón Borrar todas las cookies. En La versión 89 de Microsoft Edge, ahora puede elegir Borrar cookies filtradas para eliminar solo las cookies filtradas. Para filtrar las cookies, vaya a > Cookies deaplicación y escriba el cuadro de texto Filtro. Para eliminar las cookies mostradas, elija el botón Borrar cookies filtradas. Para mostrar todas las demás cookies, borre el texto del filtro. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 978059.

Borrar solo las cookies visibles

Nueva opción para borrar cookies de terceros en el panel almacenamiento

DevTools ahora borra solo las cookies de origen de forma predeterminada. Para borrar solo los datos del sitio **** web y las cookies de origen, vaya a Almacenamiento de aplicaciones y, a continuación, > **** elija Borrar datos del sitio.

Para borrar los datos del sitio web y todas las cookies, vaya a Almacenamiento de > aplicaciones. Seleccione la casilla situada junto a la inclusión de cookies deterceros y, a continuación, elija Borrar datos del sitio.

Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1012337.

Opción para borrar cookies de terceros

Actualizaciones de herramientas de red

Configuración de registro de red de registro de registro persistente

En Microsoft Edge versión 88 o anterior, DevTools restablece la configuración de registro de red de registro cuando se actualiza una página web. En La versión 89 de Microsoft Edge, DevTools ahora conserva la configuración de registro de red de registro. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1122580.

Registro de registro de red

La opción en línea ahora no es ninguna opción de limitación

La opción de emulación de red Online ahora se ha cambiado a Sin limitación. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1028078.

Sin opción de limitación

Nuevas opciones de copia en la herramienta Consola, la herramienta Orígenes y el panel Estilos

Copiar objeto en la herramienta Consola y orígenes

Ahora puede copiar los valores de objeto en las herramientas Consola y Orígenes. La capacidad de copiar valores de objeto es útil cuando se trabaja con objetos grandes. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya a los problemas 1148353 y 1149859.

En la herramienta Consola, mantenga el mouse sobre un objeto, abra el menú contextual (haga clic con el botón secundario) y, a continuación, elija Copiar objeto.

En **** la herramienta Orígenes, en un punto de **** interrupción, mantenga el mouse sobre un objeto, en la ventana emergente Objeto, resalte un objeto, abra el menú contextual (haga clic con el botón secundario) y, a continuación, elija Copiar objeto.

Copiar el nombre de archivo en la herramienta Orígenes y en el panel Estilos

Ahora puede copiar un nombre de archivo mediante el menú contextual. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya a Problemas 1155120.

En la herramienta Orígenes, mantenga el mouse sobre un nombre de archivo, abra el menú contextual (haga clic con el botón secundario) y, a continuación, elija Copiar nombre de archivo.

En la herramienta Elementos > panel Estilos, mantenga el mouse sobre un nombre de archivo, abra el menú contextual (right-click) y, a continuación, elija Copiar nombre de archivo.

Actualizaciones de detalles de Frame

Información de los trabajadores de servicio en los detalles de Frame

DevTools ahora muestra un trabajador de servicio dedicado en el marco primario. En la figura siguiente, se muestran los detalles del trabajador del servicio. Para mostrar los detalles del trabajador del servicio, vaya a Trabajadores deservicio de marcos de > **** > top > **** aplicación y, a continuación, elija un trabajador de servicio. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1122507.

Información de los trabajadores de servicio en los detalles de marcos

Medir la información de memoria en detalles del marco

El performance.measureMemory() estado de la API ahora se muestra en la sección de disponibilidad de la API. La nueva performance.measureMemory() API calcula el uso de memoria de toda la página web. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1139899.

Medir memoria

Fotogramas descartados en la herramienta Rendimiento

Al analizar el rendimiento de carga en la herramienta Rendimiento,la sección Marcos marca ahora los marcos descartados como rojo. Para mostrar la velocidad de fotogramas, mantenga el puntero sobre un fotograma descartado. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1075865.

Fotogramas descartados

Nuevo cálculo de contraste de color: algoritmo de contraste perceptivo avanzado (APCA)

El algoritmo de contraste perceptual avanzado (APCA) reemplaza la relación de contraste de las directrices / AA AAA en el selector de colores. APCA es una nueva forma de calcular el contraste. Se basa en la investigación moderna sobre la percepción del color. En comparación con las directrices AA/AAA, APCA depende más del contexto. El contraste se calcula en función de las siguientes propiedades espaciales del texto, el color y el contexto.

  • Propiedades espaciales del texto que incluyen el grosor y el tamaño de la fuente.
  • Propiedades espaciales de color que incluyen contraste percibido entre texto y fondo.
  • Propiedades espaciales de contexto que incluyen luz ambiental, entorno y propósito previsto.

Para activar este experimento, ve a Experimentos de configuración y elige la casilla junto a Habilitar el nuevo algoritmo de contraste perceptual avanzado (APCA) que reemplaza la relación de contraste anterior y las directrices > **** AA/AAA. Para revisar el historial de esta característica en el proyecto de código abierto chromium, vaya al problema 1121900.

APCA en el selector de colores

Descargar los canales de vista previa de Microsoft Edge

Si está en Windows, Linux 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 .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está creada por Jecelyn Yeen (Promotor de desarrollo, Chrome DevTools).

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