Código de ejemplo para DevTools

Use el repositorio Demos para aprender a usar Microsoft Edge para desarrollar páginas web y aplicaciones web. Hay varias maneras de ver, descargar y modificar estas páginas web de demostración, entre las que se incluyen:

• DevTools en Microsoft Edge.
• Visual Studio Code, con DevTools opcional.
• Visual Studio, con DevTools opcional.

Para ver el código fuente de una página web de demostración representada en DevTools en Microsoft Edge:

1. En una página Léame, haga clic en el vínculo Demostración . La página activa se abre en Microsoft Edge.

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

Lista de ejemplos de DevTools

En las demostraciones siguientes se muestran las características de DevTools.

Nombre de demostración	Descripción	Directorio del repositorio	Página de demostración en directo
Mapas fuente de creación de reflejo de CSS	Se usa para actualizar .css archivos desde la pestaña Estilos (edición de reflejo CSS) para la extensión DevTools para Visual Studio Code.	/css-mirroring-sourcemaps-demo/	No aplicable
Aplicación TODO	Aplicación de tareas sencillas con JavaScript de vainilla. Se usa para capturas de pantalla en la documentación de Microsoft Edge DevTools y para Abrir DevTools y el explorador DevTools para la extensión DevTools para Visual Studio Code.	/demo-to-do/	Mis tareas
Elementos desasociados	Demostración similar al chat. Se usa para depurar pérdidas de memoria DOM ("Elementos desasociados" tipo de generación de perfiles).	/detached-elements/	Simulación del tráfico
Vista 3D	Se usa para Navegar por capas de páginas web, índice z y DOM mediante la herramienta Vista 3D.	/devtools-3d/	Demostración de la herramienta Vista 3D de Microsoft Edge DevTools
Pruebas de accesibilidad	Se usa para las características de pruebas de accesibilidad.	/devtools-a11y-testing/	Refugio de animales
Problema de DevTools: animación de una propiedad CSS que requiere diseño	Muestra la advertencia De problemas y herramientas de elementos cuando se animan las propiedades CSS que requieren diseño.	/devtools-animated-property-issue/	Demostración de propiedades CSS animadas
Páginas de demostración del panel de consola	Se usa para información general de la consola, Mensajes de registro en la herramienta Consola y Corrección de errores de JavaScript que se notifican en la consola.	/devtools-console/	Páginas de demostración del panel de consola de DevTools
Interacción dom desde la página de demostración de la consola	Se usa para Interactuar con el DOM mediante la consola.	/devtools-console-dom-interactions/	Demostración de interacciones DOM de la herramienta de consola de DevTools
Corrección de errores de contraste	Se usa para mejorar el contraste en Microsoft Edge DevTools: un caso práctico de corrección de errores.	/devtools-contrast-bugfix/	Prueba de todos los distintivos en DevTools para problemas de contraste
Ejemplos de CSS	Se usa para empezar a ver y cambiar CSS.	/devtools-css-get-started/	Ejemplos de CSS
Ejemplos de DOM	Se usa para empezar a ver y cambiar el DOM.	/devtools-dom-get-started/	Ejemplos de DOM
Explicar errores y advertencias de la consola en Copilot en Edge	Genera errores en la consola que, a continuación, se pueden explicar mediante Copilot en Edge.	/devtools-explain-error/	Explicación de la demostración de errores de consola
Herramienta de inspección	Se usa para analizar páginas mediante la herramienta Inspeccionar.	/devtools-inspect/	Inspeccionar demostración
Depuración de JavaScript que agrega dos números	Se usa para empezar a depurar JavaScript.	/devtools-js-get-started/	Demostración: Depuración de JavaScript con Microsoft Edge DevTools
Instantánea del montón de memoria	Se usa para grabar instantáneas de montón mediante la herramienta Memoria ("Tipo de generación de perfiles instantánea del montón").	/devtools-memory-heap-snapshot/	No aplicable
Pestañas de actividad de rendimiento	Se usa para ver las actividades de una tabla, sobre las pestañas Abajo arriba, Árbol de llamadas y Registro de eventos de la herramienta Rendimiento.	/devtools-performance-activitytabs/	Demostración de pestañas de actividad
Animación lenta	Se usa para analizar el rendimiento en tiempo de ejecución (tutorial).	/devtools-performance-get-started/	Animación lenta
Eventos de seguimiento postMessage	Prueba los postMessage eventos de seguimiento en la herramienta Rendimiento . Se usa para ver mensajes entre ventanas, iframes y trabajos dedicados en referencia de características de rendimiento.	/devtools-postmessage-perf-timeline/	Demostración de eventos de seguimiento de postMessage
CSS :target pseudoclase	Se usa para el soporte técnico que fuerza el estado CSS de destino.	/devtools-target-pseudo/	CSS :target pseudoclase demo
Exploración del universo	Página web que se usa para probar la sección Métricas de Monitor Core Web Vitals en el artículo Performance tool: Analyze your website's performance (Herramienta de rendimiento: Analizar el rendimiento del sitio web ).	/exploring-the-universe/	Exploración de la página web del universo
Visualizador de instantáneas de montón	Código fuente para la extensión del visualizador de instantáneas del montón para DevTools.	/heap-snapshot-visualizer/	No aplicable
Datos ficticios JSON	Archivos JSON simples. Se usa para ver una respuesta de servidor o archivo JSON con formato.	/json-dummy-data/	Datos ficticios JSON
Inspeccionar la actividad de red	Se usa para inspeccionar la actividad de red.	/network-tutorial/	Inspección de la demostración de actividad de red
Galería	Se usa para La verdad sobre el rendimiento del selector CSS.	/photo-gallery/	Galería
Calendario lento	Aplicación de demostración de calendario simple para probar varias características de DevTools, como la herramienta rendimiento y la compatibilidad con mapas de origen.	/slow-calendar/	Calendario lento
Áreas de trabajo	Se usa para editar y guardar archivos en un área de trabajo (pestaña Área de trabajo de la herramienta Orígenes), en la herramienta Orígenes .	/workspaces/	Demostración de áreas de trabajo de DevTools

A continuación se muestran algunos de estos ejemplos.

Demostración de tareas pendientes

Esta página web de lista de tareas pendientes se usa para mostrar varias características de DevTools. Tiene un .html archivo, un .js archivo y .css archivos:

• Página representada: aplicación TODO

• Código fuente: demostración a hacer

Página web de demostración con problemas de accesibilidad

Esta página web de demostración de Animal Shelter es útil para explorar varias características de DevTools, incluidas las características de pruebas de accesibilidad.

1. Abra la página web Demostración con problemas de accesibilidad en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en cualquier lugar de la página web representada y, a continuación, seleccione Inspeccionar. DevTools se abre junto a la página web de demostración.

Artículos

Estos artículos le guiarán a través del uso de esta página web de demostración:

• Use la herramienta Inspeccionar para detectar problemas de accesibilidad si mantiene el puntero sobre la página web : uno de los varios artículos breves que se derivan de las secciones del artículo anterior.

• Características de pruebas de accesibilidad : una lista de características de pruebas de accesibilidad de DevTools, con vínculos a varios artículos que usan la página web de demostración con problemas de accesibilidad.

Repositorio de código fuente

Este es el repositorio de código fuente y su directorio que almacena los archivos de esta página web de demostración:

• MicrosoftEdge/Demos > devtools-a11y-testing : contiene archivos que incluyen:

  • index.html - La página web de demostración, incluidas las secciones de página y los formularios de entrada que envían datos al buttons.js archivo JavaScript. Para ver la página web representada, use el vínculo anterior a la página web de demostración.

  • buttons.js - Contiene el código JavaScript que usa la página web de demostración.

  • styles.css, light-theme.cssy dark-theme.css : archivos CSS que controlan la presentación de la página web de demostración.

  • Archivos de imagen que se usan en la página web de demostración.

Página web de demostración: Depuración de JavaScript con DevTools

Esta página web de demostración es útil para explorar la herramienta Orígenes , especialmente el depurador de JavaScript.

1. Abra la página web de demostración Introducción a la depuración de JavaScript con DevTools en una nueva ventana o pestaña.

2. Haga clic con el botón derecho en cualquier lugar de la página web representada y, a continuación, seleccione Inspeccionar. DevTools se abre junto a la página web de demostración.

Artículos

Estos artículos o secciones de artículo le guiarán a través del uso de esta página web de demostración:

• Enfoque básico para usar un depurador en Información general de la herramienta Orígenes. En esta sección de artículo se le guiará brevemente por los pasos para usar el depurador de JavaScript en la herramienta Orígenes , para encontrar el error en la página web de demostración. Para corregir el error, convierta las cadenas de entrada en números antes de agregarlas.

• Introducción a la depuración de JavaScript : tutorial más detallado sobre el uso de la página web de demostración junto con el depurador, la demostración de varias características del depurador y la configuración de diferentes tipos de puntos de interrupción.

Repositorio de código fuente

Este es el repositorio de código fuente y su directorio que almacena los archivos de esta página web de demostración:

• MicrosoftEdge/Demos > devtools-js-get-started : contiene los archivos:

  • README.md - Contiene vínculos a la página web de demostración representada y el artículo de tutorial detallado sobre el uso de la página web de demostración.

  • index.html - Página web con un formulario de entrada que envía datos al archivo JavaScript y que muestra el resultado de JavaScript.

  • get-started.js - El archivo JavaScript que usa el formulario en la página web de demostración.

Clonación del repositorio de demostraciones de Edge en la unidad

El repositorio Microsoft Edge/Demos es útil para seguir la documentación de DevTools. Puede clonar el repositorio, iniciar un servidor web localhost dentro de una carpeta del repositorio clonado y, a continuación, editar los archivos de demostración directamente en DevTools o en un editor como VS Code.

Se recomienda clonar el repositorio sobre la descarga del repositorio, de modo que pueda extraer las actualizaciones del repositorio y participar por completo en el repositorio.

Para clonar el repositorio MicrosoftEdge/Demos en la unidad local:

1. En un símbolo del sistema, escriba git para comprobar si git está instalado.

2. Si aún no lo ha hecho, descargue git e instálelo.

3. Vaya a MicrosoftEdge/Demos en una nueva ventana o pestaña.

4. Haga clic en el botón desplegable Código y, a continuación, haga clic en el botón Copiar dirección URL al Portapapeles .

   La dirección URL se copia en el Portapapeles: https://github.com/MicrosoftEdge/Demos.git

   O bien, si tiene instalado GitHub Desktop, haga clic en Abrir con GitHub Desktop para clonar el repositorio y omita el siguiente paso del símbolo del sistema.

5. Abra un símbolo del sistema, como git bash.

6. Clone el repositorio en la unidad local y escriba la cadena de dirección URL que copió del repositorio de GitHub. Si usa un símbolo del sistema:

   # example location where the repo directory will be added:
   cd ~/GitHub
   cd c:/users/localAccount/GitHub/  # alt format
   git clone https://github.com/MicrosoftEdge/Demos.git
   

Para obtener más información sobre la clonación de un repositorio, consulte:

• Clonación de un repositorio : documentos de GitHub.

Continúe con la sección siguiente.

Clonación del repositorio de demostraciones de Edge en la unidad mediante VS Code

Para clonar el repositorio MicrosoftEdge/Demos en la unidad local:

1. Vaya a MicrosoftEdge/Demos en una nueva ventana o pestaña.

2. Haga clic en el botón desplegable Código y, a continuación, haga clic en Abrir con Visual Studio si aparece. Se ofrece una lista de elementos del selector de controladores , uno por instancia de Visual Studio instalada. Esta opción solo aparece si ha iniciado sesión.

   

3. En Visual Studio Code, en la barra de actividad, haga clic en el botón Control de código fuente () y, a continuación, haga clic en el botón Clonar repositorio.

4. En el cuadro de texto Proporcionar dirección URL del repositorio , pegue la dirección URL https://github.com/MicrosoftEdge/Demos.git copiada y presione Entrar. Se abre un cuadro de diálogo de selección de carpeta.

   

5. Vaya a la ruta de acceso deseada, como C:\Users\localAccount\Documents\GitHub o Users/username/GitHub, y haga clic en el botón Seleccionar ubicación del repositorio .

6. Aparece el mensaje Clonación del repositorio git y, a continuación, se le pedirá que abra el repositorio clonado. Haga clic en el botón Abrir :

   

7. Si se le pide ¿Confía..., haga clic en el botón Sí . O bien, haga clic en el botón No y continúe con la mayoría de las partes de este tutorial.

   En el árbol explorador se enumeran muchas demostraciones, incluida la demostración de tareas pendientes.

Vea también:

• Clonación de un repositorio : documentos de GitHub.
• Clone el repositorio WebView2Samples en Configurar el entorno de desarrollo para WebView2.

Herramientas que admiten la clonación de un repositorio y operaciones de confirmación, extracción e inserción de Git

La clonación de un repositorio permite actualizar la copia local cuando se actualiza el repositorio. Muchas herramientas admiten la clonación y sincronización con un repositorio de GitHub, como:

• Comandos de git en un símbolo del sistema como el shell "git bash". Esta es la forma principal que se documenta aquí.

• Escritorio de GitHub. Se integra bien con repositorios de GitHub y solicitudes de incorporación de cambios, y con VS Code.

• Visual Studio Code. En la barra de actividad de la izquierda, haga clic en Control de código fuente.

• Pestaña Cambios de Git de Visual Studio > junto a la pestaña Explorador de soluciones de la esquina inferior derecha.

• La versión de "clave de punto" de VS Code en el explorador Perimetral. En Github.com, al ver una rama o una solicitud de incorporación de cambios (PR), presione la tecla de punto (.). En la barra de actividad de la izquierda, haga clic en:

  • Control de código fuente
  • Solicitudes de incorporación de cambios de GitHub
  • Solicitud de incorporación de cambios de GitHub

Descarga del repositorio de demostraciones

Se recomienda clonar el repositorio sobre la descarga del repositorio, de modo que pueda extraer las actualizaciones del repositorio y participar por completo en el repositorio.

Si desea descargar el repositorio de Demostraciones en lugar de clonarlo:

1. En una nueva ventana o pestaña, vaya al repositorio MicrosoftEdge/Demos .

2. Haga clic en el botón desplegable Código y, a continuación, haga clic en Descargar ZIP.

   El .zip archivo se coloca en el directorio de descarga. Descomprima estos archivos de origen de la página web en una ubicación adecuada.

Para descargar un único directorio del repositorio de Demos:

1. Vaya a https://download-directory.github.io/ y pegue la dirección URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do.

   El .zip archivo se coloca en el directorio de descarga. Descomprima estos archivos de origen de la página web en una ubicación adecuada.

Vea también:

• Descargue el repositorio WebView2Samples en Configurar el entorno de desarrollo para WebView2.

Abra una carpeta de demostración desde la pestaña Área de trabajo en la herramienta Orígenes.

Para usar esta sección, primero clone el repositorio de demostraciones de Edge en la unidad anterior.

Vea también:

• Tutorial del área de trabajo (pestaña Área de trabajo de la herramienta Orígenes)
• Enfoques comparados en la extensión Microsoft Edge DevTools para Visual Studio Code. Resume y compara varias opciones para editar archivos de página web.

Después de clonar (o descargar) el repositorio de Demostraciones de Edge:

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

2. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

3. En DevTools, en la barra de herramientas principal, seleccione la pestaña Orígenes . Si esa pestaña no está visible, haga clic en el botón Más pestañas ().

4. En la pestaña Orígenes , a la izquierda, seleccione la pestaña Área de trabajo , que se agrupa con la pestaña Página . Si no se muestra la pestaña Área de trabajo , haga clic en el botón Más pestañas ().

5. Haga clic en + Agregar carpeta al área de trabajo. Se abre un cuadro de diálogo de selección de carpeta.

6. Seleccione una carpeta específica, como demo-to-do, o seleccione la carpeta raíz Demos :

   

7. Por encima de DevTools, se le pedirá "DevTools solicita acceso completo a (directorio)". Haga clic en el botón Permitir :

   

Inicio del servidor localhost

Si inicia el servidor localhost desde una carpeta de demostración específica, como \Demos\demo-to-do, y luego va a localhost:8080 (o simplemente abre el archivo local, como C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html en Microsoft Edge), la demostración específica se muestra inmediatamente en el explorador. A continuación, puede agregar solo el directorio de demostración específico, como C:\Users\localAccount\GitHub\Demos\demo-to-do\, a la pestaña Área de trabajo de la herramienta Orígenes . A continuación, tiene funcionalidad completa para usar DevTools como IDE, para esa demostración específica.

Iniciar el servidor desde dentro de un directorio de demostración específico:

$ cd ~/GitHub/Demos/demo-to-do
$ npx http-server

Directorio de ejemplo que se va a agregar a la pestaña Área de trabajo de la herramienta Orígenes : C:\Users\localAccount\GitHub\Demos\demo-to-do

Resultado de ir a localhost:8080:

Inicio del servidor localhost desde el directorio Demos

Si inicia el servidor localhost desde dentro de toda \Demos\ la carpeta y, a continuación, va a localhost:8080, puede navegar a cada demostración desde dentro del explorador. Puede agregar toda la carpeta clonada /Demos/ a la pestaña Área de trabajo de la herramienta Orígenes . A continuación, tiene toda la funcionalidad para usar DevTools como IDE.

Iniciar el servidor desde todo \Demos\ el directorio:

$ cd ~/GitHub/Demos
$ cd "C:\Users\localAccount\GitHub\Demos"  # alt syntax
$ npx http-server

Directorio de ejemplo que se va a agregar a la pestaña Área de trabajo de la herramienta Orígenes : C:\Users\localAccount\GitHub\Demos

Resultado de ir a localhost:8080:

Abrir un archivo HTML local desde Explorador de archivos y editarlo en DevTools

Para editar archivos en la herramienta Orígenes , antes de realizar los pasos de esta sección, es posible que tenga que hacer clic en el botón Permitir para conceder acceso de lectura y escritura siguiendo los pasos descritos en Abrir una carpeta de demostración desde la pestaña Área de trabajo de la herramienta Orígenes, anteriormente.

1. En Explorador de archivos en Windows o Finder en macOS, seleccione un archivo HTML en la copia local del repositorio Demos, como C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html.

   El .html archivo se abre y representa en Microsoft Edge.

   Se muestra la barra de direcciones: Archivo | C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

   Al seleccionar la dirección URL en la barra de direcciones se muestra el formato de dirección URL: file:///C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

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

   Se abre DevTools.

3. Seleccione la herramienta Orígenes y, a continuación, seleccione la pestaña Página o área de trabajo .

Vea también:

• Editar y guardar archivos en un área de trabajo (pestaña Área de trabajo de la herramienta Orígenes): para abrir una carpeta local en la herramienta Orígenes de DevTools en el explorador.

Abrir un archivo HTML local desde el cuadro de diálogo Abrir archivo del explorador y editarlo en DevTools

Para abrir un .html archivo y editarlo:

1. En Microsoft Edge, abra una nueva pestaña y, a continuación, presione Ctrl+O (Windows/Linux) o Comando+O (macOS). Se abre un cuadro de diálogo de selección de archivos.

2. Seleccione un archivo HTML en la copia local del repositorio Demos , como C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html. El .html archivo se abre y representa en Microsoft Edge.

3. Haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

4. En DevTools, en la barra de herramientas principal, seleccione la pestaña Orígenes . Si esa pestaña no está visible, haga clic en el botón Más pestañas ().

5. En DevTools, a la izquierda, seleccione la pestaña Página y, a continuación, seleccione el archivo HTML, como index.html o (índice).

6. Presione Esc para abrir el panel Vista rápida en la parte inferior de DevTools.

7. En la barra de herramientas Vista rápida , haga clic en el botón Más herramientas () y, a continuación, seleccione la herramienta Cambios .

8. En el panel central del editor de la herramienta Orígenes , edite el .html archivo. Por ejemplo, en demo-to-do/index.html la carpeta, en la línea de <h1> encabezado, cambie Mis tareas a Mis tareas modificadas:

   <h1>📋 My modified tasks</h1>
   

   Si la edición no está habilitada, haga clic en el botón Permitir para conceder acceso de lectura y escritura a la carpeta realizando los pasos descritos en Abrir una carpeta de demostración desde la pestaña Área de trabajo de la herramienta Orígenes anterior.

   El cambio se muestra en la herramienta Cambios del panel Vista rápida y se agrega un asterisco al nombre de archivo en la pestaña index.html de la herramienta Orígenes :

   

9. Presione Ctrl+S (Windows, Linux) o Comando+S (macOS) para guardar el cambio. El asterisco se quita de la pestaña index.html de la herramienta Orígenes .

10. Actualice la página. El cambio se muestra en la página web representada; por ejemplo, la palabra modificada se agrega al título:

    

Abra una carpeta de demostración en Visual Studio Code

Después de clonar (o descargar) el repositorio de Demostraciones de Edge:

1. En Visual Studio Code, en la barra de actividad, haga clic en el botón Explorador (). Se abre el panel Explorador .

2. En el panel Explorador , haga clic en el botón Abrir carpeta . Se abre el cuadro de diálogo Abrir carpeta . Vaya a la demo-to-do carpeta del repositorio de demostración que ha clonado, seleccione la carpeta o vaya a ella y, a continuación, haga clic en el botón Seleccionar carpeta :

   

   Anteriormente se muestra un ejemplo de una ubicación del repositorio donde se ha clonado el repositorio Demos . La demo-to-do carpeta del repositorio de Demostraciones clonado se abre en el Explorador de Visual Studio Code:

   

O bien, puede abrir la carpeta raíz del repositorio Demos para explorar todas las carpetas de demostración en el panel Explorador .

Vea también:

• Extensión Microsoft Edge DevTools para Visual Studio Code: para abrir una carpeta local en Visual Studio Code y usar DevTools en Visual Studio Code.

Patrones de dirección URL para páginas web de demostración representadas y código fuente

La mayoría de los archivos Léame del repositorio Demos tienen un vínculo que abre el archivo representado .html desde el servidor GitHub.io. A veces tiene una dirección URL para un archivo de origen HTML en GitHub.com, pero en su lugar debe derivar la dirección URL del servidor github.io para mostrar el archivo representado, en lugar de mostrar la lista de código del .html código fuente en el directorio de GitHub.

Para convertir desde la dirección URL del directorio de código fuente en GitHub.com a la dirección URL de una página web de demostración representada en GitHub.io, el patrón es el siguiente.

Supongamos que la dirección URL del código fuente de la página web en GitHub.com es:

• https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/

Los componentes clave de esa dirección URL de GitHub.com son:

• https://github.com/[org]/[repo]/tree/main/[path]

Por el contrario, el patrón de dirección URL de GitHub.io deseado es:

• https://[org].github.io/[repo]/[path]

Para rellenar ese patrón de dirección URL de GitHub.io, en este ejemplo:

• [org] es MicrosoftEdge.
• [repo] es Demos.
• [path] es demo-to-do.

Por lo tanto, la dirección URL del servidor GitHub.io resultante para la página web de demostración representada es:

• https://MicrosoftEdge.github.io/Demos/demo-to-do/

Estas direcciones URL no distinguen mayúsculas de minúsculas.

Al ejecutar un servidor localhost e iniciarlo dentro de una carpeta de repositorio clonada, como C:\Users\localAccount\GitHub\Demos\workspaces, normalmente se ve localhost:8080 en la barra de direcciones del explorador.

Vea también

Apertura y edición de archivos:

• Editar y guardar archivos en un área de trabajo (pestaña Área de trabajo de la herramienta Orígenes): use DevTools como entorno de desarrollo integrado (IDE) en el explorador.
• Agregue una carpeta local al área de trabajo para usar DevTools para editar archivos y guardar los cambios en el disco en Información general de la herramienta Orígenes.
• Enfoques comparados en la extensión Microsoft Edge DevTools para Visual Studio Code. Resume y compara varias opciones para editar archivos de página web.
• Integración del IDE de Microsoft Edge: desarrollo de aplicaciones web mediante Visual Studio Code o Visual Studio, incluido Microsoft Edge DevTools.

Descarga y clonación:

• Paso 5: Clone el repositorio Demos en Instalación de la extensión DevTools para Visual Studio Code.
• Clonación de un repositorio : documentos de GitHub.

Ejecución de un servidor web local:

• Paso 6: Configurar un servidor localhost en Instalación de la extensión DevTools para Visual Studio Code.