Características experimentales

Microsoft Edge DevTools proporciona acceso a características experimentales que aún están en desarrollo. En este artículo se enumeran y describen las características experimentales que se encuentran en:

  • La versión más reciente del canal de versión preliminar canary de Microsoft Edge.
  • La versión más reciente de la versión estable de Microsoft Edge.

Todos los canales de Microsoft Edge tienen características experimentales. Puede obtener las características experimentales más recientes mediante el canal Microsoft Edge Canary. Para ver la lista completa disponible en la versión de Microsoft Edge, consulte la páginaExperimentos de configuración > en DevTools.

Estos experimentos podrían ser inestables o poco confiables y pueden requerir que reinicie DevTools.

Experimentos que están activados de forma predeterminada

Las siguientes características experimentales están activadas de forma predeterminada. Puede usar estas características de inmediato, sin cambiar ninguna configuración. Si es necesario, puede desactivar estas características experimentales predeterminadas.

Activado de forma predeterminada en Microsoft Edge Stable v102:

Activado de forma predeterminada en Microsoft Edge Canary v105:

Activar o desactivar un experimento

Las características experimentales se actualizan constantemente y pueden causar problemas de rendimiento. Esta es una de las razones por las que es posible que quiera desactivar un experimento.

Para activar o desactivar un experimento en Microsoft Edge:

  1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Shift+I (Windows, Linux) o Command+Option+I (macOS). Se abre DevTools.

  2. En DevTools, en la barra de herramientas principal, haga clic en el botón Configuración (icono Configuración). O bien, presione Shift+?.

  3. En el lado izquierdo del panel Configuración , seleccione la página Experimentos .

    Página Experimentos en Configuración.

  4. En la página Experimentos , active o desactive la casilla de un experimento. Algunos experimentos están activados (seleccionados) de forma predeterminada.

  5. Haga clic en Cerrar (el icono Cerrar de DevTools > Configuración). En la esquina superior derecha, cierre Configuración de DevTools.

  6. Haga clic en el botón Volver a cargar DevTools .

Restauración de valores predeterminados para los que se seleccionan los experimentos

Para restaurar la configuración predeterminada para la que están activadas las características experimentales:

  1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Shift+I (Windows, Linux) o Command+Option+I (macOS). Se abre DevTools.

  2. En DevTools, en la barra de herramientas principal, haga clic en el botón Configuración (icono Configuración). O bien, presione Shift+?. Se abre el panel Configuración , con la página Preferencias seleccionada.

  3. En la parte inferior de la página Preferencias, haga clic en el botón Restaurar valores predeterminados y actualizar y, a continuación, haga clic en Cerrar (icono Cerrar en DevTools > Configuración).

Filtrado de los experimentos

Puede filtrar las características experimentales por texto incluido en el título.

  1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Shift+I (Windows, Linux) o Command+Option+I (macOS). Se abre DevTools.

  2. En DevTools, en la barra de herramientas principal, haga clic en el botón Configuración (icono Configuración). O bien, presione Shift+?. Se abre el panel Configuración , con la página Preferencias seleccionada.

  3. En el lado izquierdo del panel Configuración , seleccione la página Experimentos .

  4. Haga clic en el cuadro de texto Filtrar y escriba texto, como escala de tiempo. A medida que escribe, solo se muestran las casillas coincidentes en la página Experimentos.

  5. Para finalizar el filtrado, desactive el cuadro de texto Filtrar .

Proporcionar comentarios sobre los experimentos

Estamos deseosos de escuchar sus comentarios sobre las características experimentales. Para compartir comentarios con nosotros, póngase en contacto con el equipo de Microsoft Edge DevTools.

Uno de los experimentos de la interfaz de usuario agrega una nueva manera de proporcionar comentarios: cuando el experimento del modo de enfoque está activado, en la parte inferior de la barra de actividad, seleccione Ayuda (el icono ayuda de la barra de actividad en modo de enfoque). > Comentarios.

Lista de experimentos

La mayoría de los experimentos que aparecen en la versión más reciente del canal de vista previa canary de Microsoft Edge se enumeran a continuación.

Permitir que las extensiones carguen hojas de estilos personalizadas

Algunos complementos de Microsoft Edge pueden definir temas de color personalizados para DevTools. Si instala un complemento con un tema, debe habilitar el experimento Permitir que las extensiones carguen hojas de estilos personalizadas para ver los temas del complemento.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Captura de pilas de creación de nodos

Para capturar seguimientos de pila de JavaScript cuando se agregan nodos DOM al DOM en tiempo de ejecución, habilite este experimento. Los seguimientos de pila capturados se muestran en el panel Seguimiento de pila del panel Elementos .

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Monitor de protocolo

DevTools se comunica con la página inspeccionada mediante el protocolo DevTools.

Para supervisar los mensajes enviados y recibidos por DevTools para depurar la página inspeccionada:

  1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Shift+I (Windows, Linux) o Command+Option+I (macOS). Se abre DevTools.

  2. En DevTools, en la barra de herramientas principal, haga clic en el botón Configuración (icono Configuración). O bien, presione Shift+?. Se abre el panel Configuración , con la página Preferencias seleccionada.

  3. En el lado izquierdo del panel Configuración , seleccione la página Experimentos .

  4. Seleccione la casilla Monitor de protocolo y, a continuación, haga clic en Cerrar (el icono Cerrar en DevTools > Configuración). Para cerrar Configuración.

  5. Abra el menú Comando (Ctrl++Shift``P) y escriba protocolo en el cuadro de texto.

  6. Seleccione Mostrar monitor de protocolo. Aparece el mensaje: "Una o varias configuraciones han cambiado, lo que requiere que una recarga surta efecto".

  7. Haga clic en el botón Volver a cargar DevTools que aparece junto al mensaje.

  8. La herramienta de supervisión de protocolo se muestra en el cajón de la parte inferior de DevTools.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Mostrar vista de infracciones de CSP

Agrega la herramienta Infracciones de CSP , que muestra las infracciones de directiva de seguridad de contenido (CSP) que se detectan en la página web inspeccionada.

La herramienta Infracciones de CSP.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Registro de la cobertura durante el seguimiento del rendimiento

Registra la cobertura durante el seguimiento del rendimiento.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Mostrar opción para tomar una instantánea del montón donde los globales se tratan como raíz

Muestra la opción para tomar una instantánea de montón donde los globales se tratan como raíz.

Consulta también:

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla no está presente en Microsoft Edge Canary v105.

Mostrar motivos de bloqueo de caché hacia atrás o hacia delante en la vista de estructura del árbol de marcos

Indica si se deben mostrar las razones de bloqueo de caché hacia atrás o hacia delante en la vista de estructura del árbol de marcos.

Consulta también:

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla no está presente en Microsoft Edge Canary v105.

Mostrar opción para exponer elementos internos en instantáneas de montón

Si se va a mostrar una casilla para exponer elementos internos en instantáneas de montón en la herramienta Memoria .

Consulta también:

Estado:

  • Esta casilla no está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Visor de pedidos de origen

Esta casilla se está quitando. El Visor de pedidos de origen ya no es un experimento. Si la casilla está activada o desactivada no hace ninguna diferencia; La característica Visor de pedidos de origen aparece en DevTools de cualquier manera.

Consulta también:

Estado:

  • Esta casilla no está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Escala de tiempo: iniciadores de eventos

Si se deben incluir iniciadores de eventos en la escala de tiempo.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Escala de tiempo: gráfico de llamas basado en WebGL

Si se va a usar un gráfico de llamas basado en WebGL en la escala de tiempo.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Depuración de WebAssembly: habilitar la compatibilidad con DWARF

Habilita la compatibilidad de DWARF con la depuración de WebAssembly. Consulte Depuración de WebAssembly mejorada en Novedades de DevTools (Microsoft Edge 80).

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Consola: resolución de nombres de variables en expresiones mediante mapas de origen

Usa asignaciones de origen para asignar automáticamente nombres de variables originales a nombres de variables minificados al evaluar expresiones en la consola.

Consulte Asignación del código procesado al código fuente original para la depuración.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilitación del nuevo algoritmo de contraste perceptual avanzado (APCA) que reemplace la relación de contraste anterior y las directrices de AA/AAA

El Algoritmo de contraste perceptual avanzado (APCA) reemplaza la relación de contraste de las directrices AA/AAA en el Selector de colores. El Selector de colores se usa en la pestaña Estilos de la herramienta Elementos.

APCA es la nueva forma de calcular el contraste. Se basa en las investigaciones modernas sobre la percepción del color. En comparación con las directrices AA/AAA, APCA depende más del contexto. El contraste se calcula de acuerdo con las siguientes propiedades espaciales de texto, color y 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 el texto y el fondo.
  • Propiedades espaciales del contexto que incluyen luz ambiental, alrededores y un propósito previsto.

Consulta también:

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilitación de la vista de árbol de accesibilidad completa en el panel Elementos

Agrega un botón en la herramienta Elementos que alterna entre el árbol DOM y el árbol de accesibilidad.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilitación de la herramienta Editor de fuentes en el panel Estilos

Puede usar el Editor de fuentes visual para editar fuentes. Úselo para definir fuentes y características de fuente. El Editor de fuentes visual le ayuda a hacer lo siguiente:

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

Para usar el Editor de fuentes visual:

  1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Shift+I (Windows, Linux) o Command+Option+I (macOS). Se abre DevTools.

  2. En DevTools, en la barra de herramientas principal, seleccione la pestaña Elementos. Si la pestaña Elementos no está visible, haga clic en el botón Más pestañas (icono Más pestañas). De lo contrario, haga clic en el botón Más herramientas (más herramientas).

  3. En la pestaña Estilos , seleccione el icono Editor de fuentes .

    El panel Editor de fuentes visual está resaltado.

Para obtener más información sobre el Editor de fuentes visuales, vea Editar estilos y configuraciones de fuentes CSS en el panel Estilos.

Para obtener más información, vea Editar estilos y configuraciones de fuentes CSS en el panel Estilos.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilitación de informes de problemas de contraste automático mediante el Panel de problemas

Habilita la generación automática de informes de problemas de contraste en la herramienta Problemas .

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilita las características experimentales de las cookies.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilitación del panel De la API de informes en el panel Aplicación

Use reporting API para detectar ciertos errores, como infracciones de seguridad o llamadas API en desuso. Estos errores se producen cuando los usuarios visitan el sitio y se envían a un punto de conexión de servidor. Habilite este experimento para agregar la sección Reporting API en el panel Aplicación , que enumera todos los informes enviados al punto de conexión.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Mostrar cambios más precisos en la pestaña Cambios

Consulte Cambios más precisos en la pestaña Cambios.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Sincronización de cambios css en el panel Estilos

Si se van a sincronizar los cambios css en la pestaña Estilos de la herramienta Elementos .

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Invalidaciones locales para encabezados de respuesta

Si se deben usar invalidaciones locales para encabezados de respuesta.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilite sugerencias de creación de CSS para reglas inactivas, propiedades en desuso, etc.

Si desea habilitar sugerencias de creación css en el panel Estilos de la herramienta Elementos para mostrar información sobre herramientas junto a propiedades inactivas o en desuso.

En Canary v105, esta casilla no tiene ningún efecto. Cuando se implementa esta característica, esta característica proporcionará ayuda al escribir o inspeccionar CSS en el panel Estilos . Aparecerán iconos de información pequeños junto a las propiedades CSS que están inactivas (o en desuso).

Estado:

  • Esta casilla no está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Uso del panel Lighthouse con los modos de intervalo de tiempo y instantánea

Agrega un selector a la herramienta Lighthouse para cambiar entre diferentes modos de informes. Por el momento, se admiten los modos navegación e instantánea.

Consulta también:

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Herramientas para capas CSS en el panel Estilos

Agrega mayor compatibilidad con la @layer regla CSS en el panel Estilos . Las reglas CSS del panel Estilos se agrupan por las capas a las que pertenecen. Se muestra un widget de información general de capa, que muestra el árbol de capas del elemento inspeccionado actualmente.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilitar la selección de colores fuera de la ventana del explorador

Permite mover el cursor del mouse cuando se trata de una herramienta de cuentagotas, en cualquier lugar de la pantalla, no solo dentro de la ventana de Microsoft Edge.

En la herramienta Elementos , en la pestaña Estilos , haga clic en cualquier vista previa de color. Se abre el selector de colores. Haga clic en el botón Alternar selector de color (botón icono cuentagotas). El cursor del mouse se convierte en un cuentagotas. Haga clic en cualquier lugar del monitor para seleccionar un color.

Consulta también:

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Agrupar orígenes en árboles creados e implementados

Controla si se agrupan orígenes en árboles creados e implementados en las pestañas Página, Sistema de archivos e Invalidaciones de la herramienta Orígenes . Esta característica de la herramienta Orígenes le permite agrupar archivos de origen en dos carpetas en función de si son:

  • Archivos de origen originales (creados, es decir, archivos con las ediciones locales).
  • Archivos de producción (archivos implementados que están en el servidor web después de compilar y agrupar los archivos de origen).

Estado:

  • Esta casilla no está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Excepciones no detectadas de Log DevTools en la consola

Controla si se registran las excepciones no detectadas de DevTools en la herramienta consola .

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Enable webhint

webhint es una herramienta de código abierto que proporciona comentarios en tiempo real para sitios web y páginas web locales. El tipo de comentarios proporcionados por webhint incluye:

  • Accesibilidad
  • Compatibilidad entre exploradores
  • Seguridad
  • Rendimiento
  • Web Apps progresiva (PPA)
  • Otros problemas comunes de desarrollo web

El experimento webhint muestra los comentarios de webhint en el panel Problemas . Seleccione un problema para mostrar documentación sobre la solución y una lista de los recursos afectados en su sitio web. Seleccione un vínculo de recurso para abrir el panel Red, Orígenes o Elementos correspondiente en DevTools.

comentarios de webhint en el panel Problemas.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Mostrar problemas en elementos

Habilite este experimento para ver los errores de sintaxis en HTML en la vista DOM de la herramienta Elementos . Para obtener más información, vea Subrayados ondulados que resaltan problemas de código y mejoras en la herramienta Elements.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Modo de enfoque

El modo de enfoque es una nueva interfaz de usuario para DevTools. El modo de enfoque está diseñado para simplificar y simplificar la interfaz de usuario de DevTools, sin poner en peligro su conjunto de características.

El modo de enfoque reemplaza la fila principal de pestañas por una barra de actividad, que es una barra de herramientas compacta con iconos distintivos. La barra de actividad permite anclar, reorganizar y abrir sus herramientas favoritas para un acceso rápido. La barra de actividad también proporciona acceso a la configuración del usuario, la ayuda y otras características.

El modo de enfoque también proporciona una lista vista rápida para abrir una segunda herramienta junto con la herramienta que ya está seleccionada en la barra de actividad.

Consulte Reducción de la complejidad de DevTools con el modo de enfoque.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Abrir archivos de origen en Visual Studio Code

Los archivos de código abierto de Visual Studio Code experimento reemplazan el editor de código de la herramienta Orígenes por Visual Studio Code, para editar archivos locales. Al activar este experimento, Herramientas de desarrollo detecta cuándo edita un archivo local y le pide que seleccione una carpeta para usarla como área de trabajo.

Al seleccionar una carpeta para usarla como área de trabajo, al seleccionar cualquier vínculo a un archivo en DevTools se abre el archivo en Visual Studio Code. En versiones anteriores de Microsoft Edge, esta acción abrió el archivo en el editor de código de la herramienta Orígenes en DevTools.

Al seleccionar un vínculo de archivo en la herramienta Estilos, se abre el archivo en Visual Studio Code.

Las modificaciones que realice en DevTools ahora cambian el archivo en el disco duro y se sincronizan en directo con Visual Studio Code. Puede leer sobre cómo configurar el área de trabajo en Apertura de archivos de origen en Visual Studio Code.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Impresión automática bonita en el panel Orígenes de Microsoft Edge

Cuando este experimento está activado, cuando se muestra un archivo minificado en el panel Orígenes, el archivo se abre en una sola pestaña del panel Orígenes, bastante impreso.

Cuando este experimento está desactivado, un mensaje de interfaz de usuario con un botón le pregunta si desea imprimir el archivo de forma bonita. El archivo se abre en una pestaña adicional que tiene un sufijo anexado de :formatted.

  • Un archivo minificado se concatena en una sola línea larga.
  • Por el contrario, la impresión bonita presenta el contenido de un archivo en un formato con sangría, más legible.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Omitir lista de fotogramas de JavaScript en la escala de tiempo

Si se debe incluir la lista Omitir para fotogramas de JavaScript en la escala de tiempo.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Introducción a los eventos de entrada en la escala de tiempo

Controla si se deben incluir eventos de entrada en la introducción a la escala de tiempo.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Perfil de montón dinámico

Controla si se va a actualizar en vivo el perfil del montón.

Consulta también:

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Escala de tiempo del generador de perfiles de montón de muestreo

Controla si se va a mostrar la escala de tiempo del generador de perfiles de montón de muestreo.

Consulta también:

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilitación del editor de métodos abreviados de teclado

Si se va a habilitar la edición de métodos abreviados de teclado.

Consulta también:

Estado:

  • Esta casilla no está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Escala de tiempo: seguimiento de invalidación

Controla si se va a mostrar el seguimiento de invalidación en la escala de tiempo.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Escala de tiempo: mostrar todos los eventos

Controla si se muestran todos los eventos en la escala de tiempo.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Escala de tiempo: Estadísticas de llamadas en tiempo de ejecución V8 en la escala de tiempo

Controla si se muestran las estadísticas de llamadas en tiempo de ejecución v8 en la escala de tiempo.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Escala de tiempo: Reproducir eventos de entrada

Controla si se reproducen eventos de entrada en la escala de tiempo.

Estado:

  • Esta casilla está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.

Habilitación de puntos de interrupción de instrumentación

Si se detiene en los puntos de interrupción de prueba. Este experimento hace que los puntos de interrupción sea más confiables.

Consulta también:

Estado:

  • Esta casilla no está presente en Microsoft Edge Stable v102.
  • Esta casilla está presente en Microsoft Edge Canary v105.