Funciones experimentales

Microsoft Edge DevTools proporcionan acceso a características experimentales que aún están en desarrollo. En este artículo se enumeran y describen la mayoría de las características experimentales que se encuentran en la versión más reciente del canal de vista previa de Canary 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ágina Configuración > experimentos en DevTools.

Estos experimentos pueden 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. Puedes desactivar estas características experimentales predeterminadas, si es necesario.

• Visor de pedidos de origen.
• Habilitar la compatibilidad con la depuración de caché de reenvío.
• Emulation: Support dual screen mode.
• Habilitar el menú problemas de ocultación experimental.
• Enable webhint.
• Mostrar problemas en Elementos.
• Enable Composited Layers in 3D View.
• Información sobre herramientas de DevTools.
• VS Code temas para DevTools.
• Archivos de código abierto en Visual Studio Code.
• Habilitar el editor de métodos abreviados de teclado : Edit keyboard shortcuts for any action in DevTools .
• Habilite el contenido de bienvenida dinámico, desactivado de forma predeterminada ahora, pero de forma predeterminada en Microsoft Edge versión 97.

Activar o desactivar un experimento

Las características experimentales se actualizan constantemente y pueden causar problemas de rendimiento. Esta es una razón por la que es posible que quieras desactivar un experimento.

Para activar o desactivar un experimento en Microsoft Edge:

1. Abra DevTools. Por ejemplo, presione Ctrl + Shift + I (en Windows/Linux) Command + Option + I o (en macOS).

2. Haga clic en Configuración (engranaje) para abrir el panel Configuración de DevTools.

3. En el lado izquierdo del panel Configuración, haga clic en la sección Experimentos.

   

4. En la página Experimentos, active o desactive la casilla para 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 parte superior derecha para DevTools Configuración.

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

Restauración de los 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. Abra DevTools. Por ejemplo, presione Ctrl + Shift + I (en Windows/Linux) Command + Option + I o (en macOS).

2. Seleccione Configuración ( ) > Preferencias.

3. Haga clic en el botón Restaurar valores predeterminados y actualizar y, a continuación, haga clic en Cerrar ( El icono Cerrar de **** ).

Filtrado de los experimentos

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

1. Abra DevTools. Por ejemplo, presione Ctrl + Shift + I (en Windows/Linux) Command + Option + I o (en macOS).

2. Seleccione Configuración ( ) > Experiments.

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

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

Proporcionar comentarios sobre los experimentos

Estamos deseando escuchar sus comentarios sobre las características experimentales.

• Envíenos sus comentarios tuiteando @EdgeDevTools.

• Póngase en contacto Microsoft Edge equipo de DevTools.

• Con el experimento modo de enfoque activado, en la parte inferior de la barra de actividades, seleccione Ayuda ( el icono ayuda de la barra de actividades en modo de foco ) > Comentarios , para mostrar la ventana Enviar comentarios. ****

Lista de experimentos

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

Permitir que las extensiones carguen hojas de estilos personalizadas

Algunos Microsoft Edge complementos 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.

Capturar 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.

Imprimir automáticamente en el Panel orígenes

Cuando se activa este experimento, cuando se muestra un archivo minificado en el panel Orígenes, el archivo se abre en una sola pestaña del panel Orígenes, con una impresión bastante impresa.

Cuando este experimento está desactivado, un mensaje de interfaz de usuario con un botón le pregunta si desea imprimir el archivo de forma más sencilla. 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.
• En cambio, la impresión más bonita presenta el contenido de un archivo en un formato con sangría y más legible para el ser humano.

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. Abra DevTools. Por ejemplo, presione Ctrl + Shift + I (en Windows/Linux) Command + Option + I o (en macOS).

2. En DevTools, seleccione Configuración > Experiments.

3. Active la casilla Monitor de protocolo y, a continuación, haga clic en Cerrar ( El icono Cerrar de **** cerrar Configuración.

4. Abra el menú comando ( Control + Shift + P ), y escriba el protocolo en el cuadro de texto.

5. Seleccione Mostrar monitor de protocolo. El mensaje aparece: "Una o más configuraciones han cambiado, lo que requiere una recarga para que su efecto sea efectivo".

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

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

Visor de pedidos de origen

Source Order Viewer es un experimento que muestra el orden de los elementos en el origen de la página web. El orden de visualización en pantalla puede diferir del orden del origen, lo que confunde al lector de pantalla y a los usuarios de teclado. Use el experimento para encontrar las diferencias entre el orden de visualización en pantalla Source Order Viewer y el orden del origen.

Para usar Source Order Viewer :

1. Abra DevTools. Por ejemplo, presione Ctrl + Shift + I (en Windows/Linux) Command + Option + I o (en macOS).

2. Abra la herramienta Elementos.

3. A la derecha de la pestaña Estilos, haga clic en la pestaña Accesibilidad.

4. En la Source Order Viewer sección, active la casilla Mostrar orden de origen.

5. Resalte cualquier elemento HTML para mostrar una superposición del orden en el origen de la página web.

Este experimento está activado de forma predeterminada.

Para obtener más información, vea Test keyboard support using the Source Order Viewer

Habilitar la compatibilidad con la depuración de caché de reenvío

Caché reenviada o bfcache. Hace que navegar por el historial de exploración sea más rápido guardando instantáneas de páginas web visitadas en la memoria.

Ciertas páginas web no se pueden almacenar en caché. Habilite este experimento para agregar la sección Back-forward Cache al panel Aplicación. Al habilitar la depuración de caché reenviada, se proporciona información sobre las páginas web que no se pueden almacenar en bfcache .

Emulation: Support dual screen mode

Para obtener más información, vea Emulation: Support dual screen mode .

Enable new Font Editor tool within the Styles pane

Ahora puede usar el nuevo 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 nuevo Editor de fuentes visual:

1. Abra DevTools. Por ejemplo, presione Ctrl + Shift + I (en Windows/Linux) Command + Option + I o (en macOS).

2. Abra la herramienta Elementos.

3. Abra el panel Estilos.

4. Seleccione el icono Editor de fuentes.

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

Para obtener más información, vea Edit CSS font styles and settings in the Styles pane in DevTools.

Habilitar el panel API de informes en el panel Aplicación

Use la API de informes 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 extremo de servidor. Habilite este experimento para agregar la sección API de informes en el panel Aplicación, que enumera todos los informes enviados al extremo.

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
• Aplicaciones web progresivas (PWA)
• 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 Network, Sourceso Elements relevante en DevTools.

Este experimento está activado de forma predeterminada.

Mostrar problemas en elementos

Habilite este experimento para ver errores de sintaxis en HTML en la vista DOM de la herramienta Elementos. Para obtener más información, vea Wavy underlines highlight code issues and improvements in Elements tool.

Enable Composited Layers in 3D View

Puede visualizar capas junto con índices z y el modelo de objetos de documento (DOM). Para una experiencia de depuración visual completa, ahora se combinan las capas 3D View compuestas y las capas compuestas.

Esta característica le ayuda a depurar sin cambiar de contexto con tanta frecuencia. Reducir el cambio de contexto resuelve un problema importante para los desarrolladores. Esta característica deja claro cómo el código que escribe afecta a la aplicación web.

Para usar capas compuestas:

1. Abra DevTools. Por ejemplo, presione Ctrl + Shift + I (en Windows/Linux) Command + Option + I o (en macOS).

2. Presione Esc para mostrar el cajón.

3. En el cajón, seleccione la 3D View herramienta.

4. Abra el panel Capas compuestas.

5. Se muestran todas las capas pintadas de la aplicación. Pruebe esta característica con sus propias aplicaciones web.

Este experimento está activado de forma predeterminada.

Enable Network Console

Consola de red es el título de trabajo de un experimento para realizar solicitudes de red sintéticas a través de HTTP. Puede usar el experimento consola de red para enviar solicitudes de API web.

Para usar la consola de red:

1. Abra DevTools. Por ejemplo, presione Ctrl + Shift + I (en Windows/Linux) Command + Option + I o (en macOS).

2. Abra el panel Red.

3. Haga clic con el botón secundario en la solicitud de red que desea cambiar y reenviar y, a continuación, seleccione Editar y reproducir.

4. En la Consola de red, edite la información de solicitud de red.

5. Haz clic en Enviar.

Modo de enfoque

El experimento modo de enfoque proporciona una barrade actividad, que es una barra de herramientas horizontal o vertical compacta que mantiene la interfaz de usuario de DevTools limpia y funciona bien con una ventana más pequeña. Anclar las herramientas principales actuales a la barra de actividades.

Consulta también DevTools: Focus Mode UI en el MSEdgeExplainers repositorio.

Información sobre herramientas de DevTools

Habilite este experimento para ver información sobre herramientas para todas las diferentes herramientas y paneles en DevTools. Para obtener más información, vea Learn about DevTools with information tooltips.

Elementos desasociados

Las pérdidas de memoria en aplicaciones web pueden ser difíciles de localizar y reparar.

El nuevo panel Elementos desasociados de Microsoft Edge DevTools ayuda a investigar y resolver una fuente común de pérdidas de memoria.

Las pérdidas de memoria se producen cuando el código JavaScript de la aplicación retiene un número creciente de objetos en la memoria. El código JavaScript debe liberar estos objetos para que el explorador pueda reutilizar el espacio de memoria.

Para obtener más información, vea Depurar pérdidas de memoria DOM con la herramienta Elementos desasociados

VS Code temas para DevTools

Para usar Visual Studio en DevTools, habilite los VS Code para el experimento DevTools. Para obtener más información, vea Apply color themes to DevTools.

Abrir archivos de origen en Visual Studio Code

El experimento Abrir archivos de código Visual Studio Code reemplaza al editor de código de la herramienta Orígenes por Visual Studio Code, para editar archivos locales. Al activar este experimento, Developer Tools detecta al editar un archivo local y le pide que seleccione una carpeta para usarla como área de trabajo.

Al seleccionar una carpeta que se va a usar 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.

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