Características experimentales

Las DevTools de Microsoft Edge proporcionan acceso a características experimentales que aún están en desarrollo. Puedes probar y proporcionar comentarios antes de que se lanza cada característica.

Aunque las características experimentales están disponibles en todos los canales de Microsoft Edge, puede obtener las últimas características experimentales con el canal Canary de Microsoft Edge.

Activar características experimentales

Para activar (o desactivar) las características experimentales en Microsoft Edge, sigue estos pasos.

  1. Abra DevTools.

  2. Abra el panel Configuración.

  3. En el lado izquierdo del panel Configuración, elija la sección Experimentos.

    La página Experimentos en Configuración

  4. En la página Experimentos, desplázate por la lista de todas las características experimentales disponibles y elige la casilla junto a cada característica que quieras probar.

  5. Cierre y vuelva a abrir Microsoft Edge DevTools.

Nota

Las características experimentales se actualizan constantemente y pueden causar problemas de rendimiento. Para desactivar una característica experimental, abre la página Experimentos y desactiva la casilla de la característica experimental que quieres desactivar.

Características experimentales resaltadas

En las secciones siguientes se describen las nuevas características experimentales que están disponibles en Microsoft Edge.

Característica experimental Versión de Microsoft Edge
Habilitar webhint 85 o posterior
Habilitar consola de red 85 o posterior
Visor de pedidos de origen 86 o posterior
Habilitar el editor de métodos abreviados de teclado 87 o posterior
Habilitar capas compuestas en la vista 3D 87 o posterior
Habilitar la nueva herramienta Editor de fuentes en el panel Estilos 89 o posterior
Habilitar nuevas características de depuración de CSS Flexbox 89 o posterior
Habilitar los menús de la pestaña + botón para abrir más herramientas 89 o posterior
Habilitar la pestaña de bienvenida 89 o posterior

Habilitar nuevas características de depuración de cuadrícula CSS

Esta característica experimental proporciona una serie de visualizaciones nuevas que te ayudarán a depurar diseños de cuadrícula CSS. Para obtener una vista previa de las características experimentales más recientes, habilita este experimento y vuelve a cargar DevTools. Este experimento está en modo predeterminado en Microsoft Edge versión 87 o posterior.

Visualización de superposiciones de cuadrícula activa con la herramienta Inspeccionar

La herramienta Inspect proporciona una forma rápida de identificar y visualizar diseños de cuadrícula CSS en un sitio web al pasar el puntero sobre ellos con el mouse. Elija el icono Inspeccionar ( Inspeccionar ) en la esquina superior izquierda  de DevTools. A continuación, mantenga el mouse sobre un elemento Grid en el sitio web que está depurando. Los contornos se muestran alrededor de la cuadrícula y el sombreado indica la ubicación de las separaciones de cuadrícula si están presentes.

Visualización de cuadrículas con la herramienta Inspeccionar

Visualización de superposiciones de cuadrícula persistentes

En Microsoft Edge versión 86 o posterior, la característica experimental de cuadrícula CSS también ofrece la opción de habilitar las superposiciones de cuadrícula persistentes. Las superposiciones persistentes proporcionan varias ventajas.

  • Las superposiciones persistentes permanecen visibles en la página mientras se desplaza, mueve el mouse y usa otras características de DevTools.
  • Se pueden habilitar varias superposiciones persistentes al mismo tiempo, lo que te permite revisar varios diseños de cuadrícula a la vez.
  • Las superposiciones persistentes ofrecen muchas opciones de configuración, como ocultar o mostrar nombres en el área de cuadrícula, intervalos de cuadrícula, tamaños de pista, entre otros.

Las dos formas de alternar una superposición de cuadrícula persistente.

Configuración de superposiciones persistentes

En Microsoft Edge versión 86 o posterior, el **** nuevo panel **** Diseño se encuentra en la herramienta Elementos junto con las pestañas Estilos y Calculados. El panel Diseño muestra las opciones de configuración de las superposiciones persistentes.

Característica de depuración de cuadrícula CSS

Habilitar la compatibilidad para mover fichas entre paneles

Normalmente, herramientas como Elementos y Red solo se pueden abrir en el panel principal que se encuentra en la parte superior de Las DevTools. Herramientas como vista 3D y problemas que normalmente solo se abren en el panel de cajón que se encuentra en la parte inferior de DevTools. Después de elegir el experimento, puedes mover herramientas entre los paneles superior e inferior. Para mover una herramienta, mantenga el mouse sobre la pestaña, abra **** el menú contextual (haga clic con el botón secundario) y elija Mover a la parte superior o Mover a la parte inferior. Este experimento te permite personalizar el diseño de DevTools. Para mostrar u ocultar el panel Del cajón, seleccione Escape .

Mover fichas entre paneles

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

  • accesibilidad
  • compatibilidad entre exploradores
  • seguridad
  • rendimiento
  • Aplicaciones web progresivas (PDA)
  • otros problemas comunes de desarrollo web

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

comentarios de webhint en el panel Problemas

Habilitar consola de red

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

Después de activar el experimento, asegúrate de reiniciar DevTools. Para usar la Consola de red, siga estos pasos.

  1. Abra el panel Red.
  2. Busque la solicitud de red que desea cambiar y volver a enviar.
  3. Abra el menú contextual (right-click) y elija Editar y reproducir.
  4. Cuando se abra la consola de red, edite la información de solicitud de red.
  5. Elija Enviar.

Consola de red en el cajón de la consola

Visor de pedidos de origen

El Visor de orden de origen 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 a los usuarios de lector de pantalla y teclado. Usa el experimento Visor de pedidos de origen para encontrar las diferencias entre el orden de visualización en pantalla y el orden del origen.

Después de activar el experimento, asegúrate de reiniciar DevTools. Para usar el Visor de pedidos de origen, siga estos pasos.

  1. Abra la herramienta Elementos.
  2. Abra el panel Accesibilidad en el panel del cajón (inferior).
  3. En la sección Visor de pedidos de origen, seleccione la casilla Mostrar pedido de origen.
  4. Resalte cualquier elemento HTML para mostrar una superposición según el orden en el origen de la página web.

Visor de pedidos de origen en el panel Accesibilidad

Habilitar el editor de métodos abreviados de teclado

Con el experimento Habilitar el editor de métodos abreviados de teclado activado, puedes personalizar los métodos abreviados de teclado para cualquier acción en DevTools. Para personalizar el método abreviado de teclado para una acción específica, siga estos pasos.

  1. Abra DevTools.

  2. Abra Configuración.

    • Seleccione Shift + ? .
  3. Vaya a la página Accesos directos.

  4. Elija la acción que desea personalizar.

  5. Elija el icono Editar (  EditKeyboardShortcut ).

    Elija la acción que desea personalizar en la página Accesos directos en Configuración

  6. En el teclado, selecciona las teclas para enlazar a la acción.

    Seleccionar las claves para asignar a la acción

  7. Para guardar el nuevo método abreviado de teclado, elija la marca de verificación (CheckmarkKeyboardShortcutIcono ).

    Elija el icono de marca de verificación para guardar el nuevo método abreviado de teclado

  8. Selecciona el nuevo método abreviado de teclado para desencadenar la acción en DevTools.

En la página Accesos directos, el icono de método abreviado de teclado personalizado (  CustomKeyboardShortcut ) muestra los métodos abreviados de teclado personalizados. Para restablecer todos los accesos directos, elija Restaurar accesos directos predeterminados.

Para descartar los cambios mientras edita los métodos abreviados de teclado para una acción, elija el icono X (  XKeyboardShortcut ). Para quitar accesos directos de una acción específica, elija el icono Eliminar acceso directo (  DeleteKeyboardShortcut ). Para agregar varios accesos directos para una acción, elija Agregar un acceso directo.

Nota

Si un método abreviado de teclado está asignado actualmente a otra acción, es posible que no lo guarde para una nueva acción. Primero debe eliminar el método abreviado de teclado de la acción anterior y, a continuación, agregarlo a la nueva acción.

Habilitar capas compuestas en la vista 3D

Ahora puede visualizar capas junto a índices z y el modelo de objetos de documento (DOM). Esta característica le ayuda a depurar sin cambiar de contexto con tanta frecuencia. Identificaste que la reducción del cambio de contexto era un punto difícil. No siempre está claro cómo afecta el código que escribe a la aplicación web. Para obtener una experiencia de depuración visual completa, ahora se combinan la vista 3D y las Capas compuestas.

Después de activar el experimento, asegúrate de reiniciar DevTools. Para usar capas compuestas, siga estos pasos.

  1. En el cajón, elija la herramienta Vista 3D.
  2. Abra el panel Capas compuestas.
  3. Se muestran todas las capas pintadas de la aplicación. Pruebe esta característica con sus propias aplicaciones web.

Panel Capas compuestas

Habilitar la nueva herramienta Editor de fuentes en el panel Estilos

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

Después de activar el experimento, asegúrate de reiniciar DevTools. Para usar el nuevo Editor de fuentes visual, siga estos pasos.

  1. Abra la herramienta Elementos.
  2. Abra el panel Estilos.
  3. Elija el icono del Editor de fuentes.

Para obtener más información acerca del nuevo Editorde fuentes visual, vaya a Editar estilos y configuraciones de fuente CSS en el panel Estilos de DevTools.

El panel Editor de fuentes visual está resaltado

Habilitar nuevas características de depuración de CSS Flexbox

Esta característica experimental proporciona muchas visualizaciones nuevas que le ayudarán a depurar diseños CSS Flexbox. Para obtener una vista previa de las características experimentales más recientes, activa este experimento y vuelve a cargar DevTools.

Mostrar superposiciones persistentes en diseños de Flexbox con la herramienta Inspeccionar

La herramienta Inspect proporciona una forma rápida de identificar y visualizar diseños CSS Flexbox en un sitio web al mantener el puntero sobre ellos con el mouse. Elija el icono Inspeccionar ( Inspeccionar ) en la esquina superior izquierda  de DevTools. A continuación, al depurar el sitio web, mantenga el puntero sobre un contenedor flexible para mostrar esquemas alrededor del contenedor flex.

Mostrar contenedores de Flexbox con la herramienta Inspeccionar

Mostrar superposiciones persistentes en diseños de Flexbox

En Microsoft Edge versión 89 o posterior, la característica experimental CSS Flexbox también ofrece la opción de activar superposiciones persistentes en diseños de Flexbox. Las superposiciones persistentes proporcionan las siguientes ventajas.

  • Las superposiciones persistentes permanecen visibles en la página web mientras se desplaza, mueve el mouse y usa otras características de DevTools.
  • Se pueden usar varias superposiciones persistentes al mismo tiempo, para permitirle revisar varios diseños de Flexbox a la vez.
  • Las superposiciones persistentes ofrecen opciones de configuración de color.

Para alternar las superposiciones persistentes en el diseño de Flexbox, usa una de las siguientes acciones.

  • Elija el icono del óvalo de Flexbox junto a cualquier contenedor de Flexbox que se muestra en el árbol DOM de la herramienta Elementos.
  • Abre el nuevo panel diseño que se encuentra en la herramienta Elementos y elige la casilla junto a cada contenedor de Flexbox que quieras resaltar.

Iconos flexibles y panel diseño en DevTools

Configurar superposiciones persistentes

Para configurar las opciones de las superposiciones persistentes para cuadrículas CSS o diseños de Flexbox, usa el panel Diseño. El panel Diseño se encuentra en la herramienta Elementos junto a los paneles Estilos y Calculados.

Panel de diseño

Habilitar los menús de la pestaña + botón para abrir más herramientas

Ahora puede abrir más herramientas con el nuevo icono Más herramientas ( + ). Después de activar los menús de la pestaña Habilitar + botón para abrir más herramientas y volver a cargar DevTools, se muestra un signo más ( ) a la derecha del grupo de pestañas en la parte superior de + DevTools. Para mostrar una lista de otras herramientas que puede agregar a la barra de pestañas, elija el nuevo icono Más herramientas ( + ).

Más herramientas en el panel superior

Habilitar herramienta de bienvenida

Este experimento reemplaza la herramienta Novedades por la nueva herramienta de bienvenida. Muestra un diseño actualizado para el siguiente contenido.

  • Vínculos a documentos para desarrolladores
  • las características más recientes
  • notas de la versión
  • Opción para ponerse en contacto con el equipo de DevTools de Microsoft Edge

La herramienta de bienvenida se abre automáticamente después de cada actualización de Microsoft Edge. Para evitar que se muestre la herramienta de bienvenida después de cada actualización, desactive la casilla situada junto a la pestaña Abrir después de cada actualización bajo el título de la herramienta de bienvenida.

Si prefieres la herramienta Novedades original, ve a Experimentos de configuración y quita la casilla junto a > **** Habilitar pestaña de bienvenida.

Herramienta de bienvenida

Características experimentales anteriores

Proporcionar comentarios sobre las características experimentales

Para proporcionar comentarios sobre los experimentos de Microsoft Edge DevTools o cualquier otra cosa relacionada con DevTools.

  • Envía tus comentarios mediante el icono Enviar comentarios en DevTools
  • Tweet en @EdgeDevTools

El icono Enviar comentarios en Microsoft Edge DevTools