Código de ejemplo para DevTools

Use el repositorio de demostraciones para obtener información sobre cómo 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 opcionales.
  • Visual Studio, con DevTools opcionales.

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 en tiempo real se abrirá en Microsoft Edge.

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

Lista de ejemplos de DevTools

Ve:

A continuación se muestran algunos de los ejemplos.

Demostración de To Do

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

Demostración de To Do y DevTools con la herramienta Orígenes seleccionada

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 prueba de accesibilidad.

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

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

La

Artículos

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

Repositorio de código fuente

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

  • MicrosoftEdge / demostraciones > devtools-a11y-testing : contiene archivos entre los que se incluyen:

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

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

    • styles.css, light-theme.css, y dark-theme.css - 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. Abrir 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. Haz clic con el botón derecho en cualquier lugar de la página web representada y, a continuación, selecciona Inspeccionar. DevTools se abre junto a la página web de demostración.

Página web de demostración

Artículos

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

  • Introducción al enfoque básico para usar un depurador en la herramienta Orígenes. Esta sección de artículo le guiará brevemente a través de 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, convierte las cadenas de entrada en números antes de agregarlos.

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

Repositorio de código fuente

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

  • MicrosoftEdge / demostraciones > devtools-js-get-started - Contiene los archivos:

    • README.md - Contiene enlaces a la página web de demostración renderizada y el artículo tutorial en profundidad sobre el uso de la página web de demostración.

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

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

Clonar el repositorio "MicrosoftEdge / Demos" en la unidad

El repositorio de Microsoft Edge / Demos es útil para seguir las diversas documentaciones 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 en lugar de descargarlo, para que pueda extraer las actualizaciones del repositorio y participar plenamente en el repositorio.

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

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

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

  3. Vaya al repositorio de 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 URL en el 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 paso del símbolo del sistema siguiente.

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

  6. Clone el repositorio en la unidad local e introduzca la cadena de 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 cómo clonar un repositorio, consulte:

Continúa con la sección siguiente.

Clone the "MicrosoftEdge / Demos" repo to your drive by using VS Code

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

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

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

    Clonar el repositorio de MicrosoftEdge/Demos

  3. En Visual Studio Code, en la barra de actividades, haga clic en el botón Control de código fuente (icono de 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 copiada: y, a continuación, https://github.com/MicrosoftEdge/Demos.git presione Entrar. Aparecerá un cuadro de diálogo de selección de carpetas.

    Botón Clonar repositorio en Visual Studio Code

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

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

    Se le solicita que abra el repositorio clonado

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

    El árbol del Explorador enumera muchas demostraciones, incluida demo-to-do.

Consulta también:

Herramientas que admiten la clonación de un repositorio y las operaciones de confirmación/extracción/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í.

  • GitHub Desktop. Se integra bien con el repositorio y las solicitudes de incorporación de cambios de GitHub, y con VS Code.

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

  • Visual Studio >Git cambia junto a la pestaña del Explorador de soluciones en la parte inferior derecha.

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

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

Descargar el repositorio de demostraciones

Se recomienda clonar el repositorio en lugar de descargarlo, para que pueda extraer las actualizaciones del repositorio y participar plenamente en el repositorio.

Si solo desea descargar el repositorio de demostraciones en lugar de clonarlo:

  1. En una nueva ventana o pestaña, vaya al repositorio de MicrosoftEdge o demostraciones .

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

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

Para descargar un único directorio del repositorio de demostraciones:

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

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

Consulta también:

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

Para usar esta sección, primero siga los pasos de Clonar el repositorio "MicrosoftEdge / Demos" en la unidad anterior.

Consulta también:

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

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

  2. Haz clic con el botón derecho en la página web y, a continuación, selecciona 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 (icono 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 (botón Más pestañas).

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

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

    Seleccionar el directorio de demo-to-do

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

    DevTools solicita acceso para agregar una carpeta al área de trabajo

Iniciar el 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, tendrá toda la funcionalidad para usar DevTools como un IDE, para esa demostración específica.

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

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

Ejemplo de directorio para 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:

El servidor se inició desde el directorio \Demos\demo-to-do

Iniciar el 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 el explorador. Puede agregar toda la carpeta clonada /Demos/ a la pestaña Área de trabajo de la herramienta Orígenes . Entonces tendrá toda la funcionalidad para usar DevTools como un IDE.

Iniciar el servidor desde dentro de todo \Demos\ el directorio:

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

Ejemplo de directorio para agregar a la pestaña Área de trabajo de la herramienta Orígenes : C:\Users\localAccount\GitHub\Demos

Resultado de ir a localhost:8080:

El servidor se inició desde el directorio /demos/ en lugar de un subdirectorio de demostración específico

Abrir un archivo HTML local desde el 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 deba hacer clic en el botón Permitir para conceder acceso de lectura y escritura siguiendo los pasos de Abrir una carpeta de demostración desde la pestaña Área de trabajo de la herramienta Orígenes, arriba.

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

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

    La barra de direcciones muestra: 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, la pestaña Página o la pestaña Espacio de trabajo .

Consulta también:

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 presione Ctrl+O (Windows/Linux) o Comando+O (macOS). Aparecerá un cuadro de diálogo de selección de archivos.

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

  3. Haz clic con el botón derecho en la página web y, a continuación, selecciona 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 (el icono 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 de Vista rápida , haga clic en el botón Más herramientas (icono Más herramientas) y luego 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 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 siguiendo los pasos de Abrir una carpeta de demostración desde la pestaña Área de trabajo en la herramienta Orígenes anterior.

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

    La página de demostración modificada antes de guardar los cambios

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

  10. Actualiza la página. El cambio se muestra en la página web representada; Por ejemplo, se agrega la palabra Modificado al título:

    La página de demostración de tareas pendientes modificada después de guardar los cambios y actualizar

Abrir 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 actividades, haga clic en el botón Explorador (icono Explorador). Se abre el panel del Explorador .

  2. En el panel del 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 clonó, seleccione la carpeta o vaya a ella y, a continuación, haga clic en el botón Seleccionar carpeta :

    Seleccionar la carpeta demo-to-do

    Arriba se muestra un ejemplo de una ubicación de repositorio en la que se ha clonado el repositorio de demos . La demo-to-do carpeta del repositorio de demostraciones clonado se abre en el Explorador de Visual Studio Code:

    Abrió inicialmente la carpeta de demostración y tareas pendientes

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

Consulta también:

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 de demostraciones 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 fuente HTML en GitHub.com, pero en su lugar necesita derivar la dirección URL del servidor github.io para mostrar el archivo representado, en lugar de mostrar la lista de código del código fuente en el directorio de .html GitHub.

Para convertir de 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]

En cambio, el patrón de dirección URL de GitHub.io deseado es:

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

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

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

Por lo tanto, la URL del servidor de 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.

Consulte también

Abrir y editar archivos:

Descarga y clonación:

Ejecución de un servidor web local:

  • Se actualizó por última vez el