Compartir a través de


Adición de una interfaz de usuario personalizada a DevTools mediante extensiones

Además de las herramientas disponibles en Microsoft Edge DevTools, puede agregar nuevas herramientas instalando extensiones de Microsoft Edge o creando sus propias extensiones para sus casos de uso específicos. Una extensión de Microsoft Edge a menudo amplía la interfaz de usuario de Microsoft Edge con nuevos botones y paneles, pero también puede ampliar DevTools dentro de Microsoft Edge, agregando una nueva pestaña de herramientas en la barra de actividad.

Buscar una extensión que extienda DevTools

La categoría Herramientas de desarrollo de los complementos de Microsoft Edge contiene extensiones que normalmente extienden DevTools.

No hay ninguna manera de saber si una extensión extiende la barra de actividad de DevTools, sin ejecutarla o mirar su código fuente, pero la categoría Herramientas de desarrollo en los complementos de Microsoft Edge es un buen lugar para buscar.

Instalación de una extensión en DevTools

Para instalar una extensión de Microsoft Edge que extienda DevTools:

  1. Vaya a Complementos de Microsoft Edge, como la categoría Herramientas de desarrollo, y vaya a la extensión que desea instalar.

    Por ejemplo, vaya a la extensión React Developer Tools, que es el ejemplo que se usa para los pasos siguientes:

    Página herramientas de desarrollo de React en complementos de Microsoft Edge

  2. Haga clic en el botón Obtener . Se abre un cuadro de diálogo de instalación, ¿Agregar <nombre> de extensión a Microsoft Edge?

  3. Haga clic en el botón Agregar extensión . Un cuadro de diálogo indica que la extensión se ha instalado y el botón Extensiones (icono Extensiones) muestra ahora la extensión.

  4. Abra una nueva pestaña o ventana y, a continuación, vaya a una página que contenga contenido relevante para la extensión DevTools. Por ejemplo, use la página de ejemplo TodoMVC React o vaya a una página de repositorio de Microsoft Edge Demos activa, como demostración a hacer.

  5. Abra DevTools, como presionando F12. En el caso de esta extensión de React, se abren dos nuevas pestañas en la barra de actividad: Componentes y Generador de perfiles:

    DevTools, que muestra las dos nuevas pestañas de la herramienta de extensión de React

  6. Si las nuevas pestañas no se muestran en la barra de actividad, haga que DevTools sea más ancho o haga clic en el botón Más herramientas (icono Más herramientas) y, a continuación, seleccione la herramienta:

    Botón Más herramientas en DevTools para agregar herramienta a la barra de actividad

Creación de una extensión DevTools

Puede crear su propia extensión DevTools para agregar nuevas pestañas en la barra de actividad de DevTools e interactuar con la página inspeccionada.

Consulte Creación de una extensión de DevTools.