Ejemplo: Herramienta DevTools personalizada

La "herramienta Custom DevTools" de ejemplo es una extensión de Microsoft Edge que agrega una herramienta Personalizada en Microsoft Edge DevTools, que tiene su propia pestaña en la barra de actividad.

Introducción

La herramienta Custom DevTools agrega una pestaña y un panel de herramientas personalizados en DevTools dentro de Microsoft Edge:

La herramienta Personalizada muestra información de memoria y envía mensajes entre la página web inspeccionada y el panel de DevTools.

La herramienta Custom DevTools llama a la API DevTools para mostrar información de memoria.

La página web que se está inspeccionando y la herramienta Custom DevTools, se envían mensajes entre sí.

Use este artículo para descargar, instalar y ejecutar el ejemplo. Para obtener más información sobre el código de este ejemplo, vea Agregar una herramienta personalizada en Microsoft Edge DevTools.

Paso 1: Descargar el ejemplo

Si aún no lo ha hecho, descargue la rama "principal" del repositorio Demos o clone (o bifurca y clone) el repositorio. La descarga del repositorio es más sencilla y se describe a continuación.

Descargue la rama "principal" del repositorio Demos, como se indica a continuación:

1. En Microsoft Edge, vaya al repositorio MicrosoftEdge/Demos .

2. Haga clic en la flecha abajo en el botón Código y, a continuación, seleccione Descargar ZIP.

3. En Microsoft Edge, el cuadro de diálogo Descargas muestra Demos-main.zip. Se agrega "-main", lo que significa una instantánea estática de la rama "principal" del repositorio.

4. Mantenga el puntero a la derecha de Demos-main.zipy, a continuación, haga clic en el botón Mostrar en la carpeta .

   Explorador de archivos se abre y muestra la carpeta Descargas.

5. Haga clic con el botón derecho en Demos-main.zipy, a continuación, seleccione Extraer todo.

   Se abre el cuadro de diálogo Extraer carpetas comprimidas (comprimidas).

6. Haga clic en el botón Extraer .

   Se abre el cuadro de diálogo % completo y, a continuación, finaliza.

7. Mueva la Demos-main carpeta a una ubicación de repositorios de GitHub, como C:\Users\localAccount\GitHub.

Paso 2: Instalar la extensión para agregar la herramienta en DevTools

1. En Microsoft Edge, abra una nueva ventana o pestaña.

2. Seleccione Configuración y mucho más (), mantenga el puntero sobre Extensiones y, a continuación, seleccione Administrar extensiones.

   Se abre la pestaña Extensiones y la página (edge://extensions).

3. Active el botón de alternancia Modo de desarrollador .

4. Haga clic en Cargar desempaquetado.

   Se abre el cuadro de diálogo Seleccionar el directorio de extensión .

5. Vaya a la /Demos-main/devtools-extension carpeta, como C:\Users\localAccount\GitHub\Demos-main\devtools-extension\, y haga clic en el botón Seleccionar carpeta .

   Se muestra la tarjeta DevTools Tool personalizada :

   

Paso 3: Seleccionar la herramienta Personalizada en DevTools

1. En Microsoft Edge, vaya a una página web, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

   La herramienta Custom DevTools requiere una página web, no una pestaña vacía.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. En la barra de actividad de DevTools, haga clic en la pestaña de la herramienta Personalizado ().

   Se muestran la pestaña y el panel Herramienta personalizada :

   

   Si la pestaña de la herramienta Personalizado () no está visible, haga lo siguiente:

   • Haga clic en el botón Más herramientas () y, a continuación, seleccione personalizado Personalizado.

   • Haga que DevTools sea más ancho y, a continuación, haga clic en la pestaña de la herramienta Personalizado ().

   La página DevTools personalizada tiene varias secciones:

   • Información de visualización de memoria.

   • Botón para enviar un mensaje de DevTools a la página web inspeccionada, para que la página muestre un cuadro de diálogo de JavaScript alert .

   • Área para mostrar Coordenadas , para enviar un mensaje desde la página web inspeccionada a la consola de DevTools y a las herramientas personalizadas .

Paso 4: Visualización de la información de memoria mediante una llamada api de extensión

• En la herramienta Personalizada , junto a Capacidad de memoria disponible, observe la actualización una vez por segundo del valor:

  

Paso 5: Enviar mensaje desde DevTools a la página inspeccionada

1. En la herramienta Personalizada , haga clic en el botón Decir hola .

   Se abre un cuadro de diálogo de JavaScript alert que muestra el mensaje: "¡Hola desde la extensión DevTools!"

   

   DevTools envía un mensaje a la página web inspeccionada, lo que hace que JavaScript muestre una alerta.

2. Haga clic en el botón Aceptar .

   Se cierra el cuadro de diálogo.

Paso 6: Enviar mensaje desde la página inspeccionada a DevTools

1. En la página web inspeccionada, haga clic en varios puntos.

   En la herramienta Personalizado , junto a Coordenadas, se muestran y actualizan las coordenadas mientras hace clic en:

   

2. En DevTools, en la barra de actividad, seleccione la herramienta Consola ().

3. En la página web inspeccionada, haga clic en varios puntos.

   Las coordenadas en las que se ha hecho clic se muestran en la consola:

   

Paso 7: Modificar la herramienta personalizada

1. Si aún no lo ha hecho, instale Visual Studio Code.

2. Abrir Visual Studio Code.

3. Haga clic en el menú Archivo y, a continuación, haga clic en Abrir carpeta.

   Se abre el cuadro de diálogo Abrir carpeta .

4. Vaya a la /Demos-main/devtools-extension/ carpeta, como C:\Users\localAccount\GitHub\Demos-main\devtools-extension\, y haga clic en el botón Seleccionar carpeta .

   En el panel Explorador , se muestra la /devtools-extension/ carpeta .

5. Haga clic en panel.html.

   panel.html se abre para editar:

   

6. Agregue "My" al <h2> encabezado; cambie de:

   <h2>Custom DevTools Tool</h2>
   

   a:

   <h2>My Custom DevTools Tool</h2>
   

7. Guarde panel.html.

8. En el panel Explorador , haga clic en manifest.json.

   manifest.json se abre para su edición.

9. Agregue "My" a ; namecambie de:

   "name": "Custom DevTools Tool",
   

   a:

   "name": "My Custom DevTools Tool",
   

10. Guarde manifest.json.

Paso 8: Volver a cargar la herramienta personalizada modificada

1. En Microsoft Edge, seleccione Configuración y mucho más (), mantenga el puntero sobre Extensiones y, a continuación, seleccione Administrar extensiones.

   Se abre la pestaña Extensiones y la página (edge://extensions).

2. En la tarjeta Herramienta DevTools personalizada , haga clic en el vínculo Volver a cargar .

   La tarjeta ahora muestra My Custom DevTools Tool como nombre de la extensión:

   

Paso 9: Uso de la herramienta personalizada modificada

1. Vaya a una página web, como la aplicación Tareas pendientes, en una nueva ventana o pestaña.

   La herramienta Custom DevTools requiere una página web, no una pestaña vacía.

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar.

   Se abre DevTools.

3. En la barra de actividad de DevTools, haga clic en la pestaña de la herramienta Personalizado ().

   Se muestra la herramienta Personalizada , con la palabra Mi agregada al encabezado en el panel:

   

   Si el título sigue diciendo Custom DevTools Tool en lugar de My Custom DevTools Tool, cierre y vuelva a abrir DevTools.

   Si la pestaña de la herramienta Personalizado () no está visible, haga lo siguiente:

   • Haga clic en el botón Más herramientas () y, a continuación, seleccione personalizado Personalizado.

   • Haga que DevTools sea más ancho y, a continuación, haga clic en la pestaña de la herramienta Personalizado ().

Este es el final de los pasos para usar y modificar el ejemplo de extensión DevTools.

Solución de problemas

Si la pestaña Personalizado no está visible en DevTools, o está obsoleta y no muestra los cambios de código más recientes:

• Haga que DevTools sea ancho, para mostrar muchas herramientas en la barra de actividad.

• Cierre y vuelva a abrir DevTools.

• Actualice o actualice de forma rígida la página inspeccionada.

• En Microsoft Edge, en la página Extensiones , haga clic en Volver a cargar para la extensión.

• Si no se proporciona ningún icono en dicha extensión, la pestaña cuando no está seleccionada es estrecha y gris, en el lado derecho de la barra de actividad. Haga clic en la pestaña gris estrecha.

• Vaya a una página web, no a una pestaña vacía. El código de la "herramienta Custom DevTools" de ejemplo requiere una página web.

Cuando la barra de actividad es estrecha, la herramienta Custom Devtools se agrega al menú Más herramientas de la barra de actividad.

La pestaña Personalizado no tiene un comando Quitar de la barra de actividad en el menú contextual.

Consulte también