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

Ve:

A continuación se muestran algunos de los 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:

Demostración de tareas pendientes 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 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.

La página web de demostración con problemas de accesibilidad

Artículos

Estos artículos le guiarán a través del uso de esta página web de demostració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-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.

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 "MicrosoftEdge/Demos" 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 al repositorio 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:

Continúe con la sección siguiente.

Clonación del repositorio "MicrosoftEdge/Demos" en la unidad mediante VS Code

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

  1. Vaya al repositorio 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.

    Clonación del repositorio MicrosoftEdge/Demos

  3. En Visual Studio Code, en la barra de actividad, haga clic en el botón Control de código fuente (icono 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.

    Botón Clonar repositorio en Visual Studio Code

  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 :

    Se le pide que abra el repositorio clonado.

  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.

Consulta también:

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.

Consulta también:

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

Para usar esta sección, realice primero los pasos descritos en 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, 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 (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. 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 :

    Selección del directorio de demostración a hacer

  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

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:

Servidor iniciado desde el directorio \Demos\demo-to-do

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:

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

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 .

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). 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 (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 Vista rápida , haga clic en el botón Más herramientas (icono 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 :

    Página de demostración a hacer 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 de la herramienta Orígenes .

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

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

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 (icono del 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 :

    Selección de la carpeta demo-to-do

    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:

    Se abrió la carpeta demo-to-do inicialmente.

O bien, puede abrir la carpeta raíz del repositorio Demos para explorar todas las carpetas de demostración en el panel 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 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.

Consulte también

Apertura y edición de archivos:

Descarga y clonación:

Ejecución de un servidor web local:

  • Last updated on