Compartir a través de

Para empezar, haga clic en el botón Iniciar proyecto.

  • Artículo

Use este tutorial para aprender a abrir y cerrar DevTools haciendo clic en el botón Iniciar proyecto , para ejecutar Demo To Do en un servidor web localhost y almacenar la dirección URL de la página web en launch.json.

Usaremos la aplicación demo-to-do para mostrar el botón Iniciar proyecto después de apuntar ese botón a una dirección URL de localhost, como http://localhost:8080. El botón Iniciar proyecto inicia DevTools en modo de depuración. Esta es la forma principal de abrir DevTools cuando la página web requiere ejecutarse en un servidor web. Como paso preliminar, crearemos un launch.json archivo y editaremos la dirección URL en él para que apunte a localhost que sirve la aplicación de ejemplo de demostración a hacer .

No siempre es necesario usar este enfoque, porque en muchos casos, hacer clic con el botón derecho en un archivo HTML funciona. Sin embargo, muchas páginas web usan API que requieren que la página web se ejecute en un servidor web, por lo que estos son los pasos específicos que puede seguir.

Paso 1: Instalación de DevTools y requisitos previos

  1. Si aún no lo ha hecho, realice los pasos descritos en Instalación de la extensión DevTools para Visual Studio Code y, a continuación, continúe a continuación.

Paso 2: Iniciar el servidor web

Esta sección es compatible con hacer clic en el botón Iniciar proyecto .

En estos pasos se explica cómo iniciar http-server mediante el shell de Bash de Git multiplataforma, que forma parte de Git. Aunque podría usar visual Studio Code >View>Terminal para iniciar el servidor, es mejor iniciar el servidor desde un símbolo del sistema que esté fuera de Visual Studio Code, de modo que el servidor siga ejecutándose incluso si cierra y vuelve a abrir Visual Studio Code o la carpeta.

  1. Si aún no lo ha hecho, configure e inicie un servidor web por primera vez y sirva la aplicación de demostración a hacer desde el repositorio Demos. Para ello, vea Paso 6: Configurar un servidor localhost en Instalación de la extensión DevTools para Visual Studio Code.

  2. Abra git bash. Por ejemplo, en Windows, presione Inicio y, a continuación, escriba git bash.

  3. cd en la carpeta específica que desea servir a través de http, Demos\demo-to-do\:

    En git bash, use barras diagonales para las rutas de acceso de archivo. Por ejemplo:

    cd C:/Users/username/Documents/GitHub/Demos/demo-to-do

  4. Escriba el comando npx http-server. Un servidor web local se inicia en el puerto 8080.

    npx http-server

    Iniciar el servidor

    Se muestra información sobre el servidor y la dirección URL de localhost, como:

    Starting up http-server, serving ./

Available on:
http://10.0.1.8:8080
http://127.0.0.1:8080
Hit CTRL-C to stop the server

    Las direcciones URL mostradas suelen ser equivalentes a la dirección URL estándar común, http://localhost:8080.

Paso 3: Configurar launch.json

Esta sección es compatible con hacer clic en el botón Iniciar proyecto .

  1. En Visual Studio Code, seleccione Archivo>abrir carpeta. Seleccione el directorio del proyecto que contiene index.html para el ejemplo de demostración a hacer clonado en el repositorio Demos, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

    La carpeta de ejemplo de demostración a hacer abierta en Visual Studio Code

    Al igual que en la carpeta demo-to-do del repositorio, inicialmente no hay ninguna .vscode carpeta y no hay ningún launch.json archivo en esa carpeta.

  2. En la barra de actividad, haga clic en Herramientas de Microsoft Edge (icono Herramientas de Microsoft Edge). Se abre el panel Herramientas de Microsoft Edge .

  3. Haga clic en el botón Generar launch.json :

    Botón

    Se abre el nuevo launch.json archivo.

  4. En varios lugares del launch.json archivo, en cada una de las "url" líneas, desplácese a la derecha y anote el comentario "Proporcione la dirección URL del proyecto":

    "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
// Provide your project's url to finish configuring

  5. En un explorador web, vaya a la http://localhost/ dirección URL donde se encuentra el archivo de demostración a hacer.html en el servidor, como la dirección URL estándar común, http://localhost:8080.

  6. Copie la dirección URL de la barra de direcciones.

  7. En launch.json, en cada cadena de dirección URL, pegue la dirección URL de la copia clonada de la aplicación de demostración a hacer , como: http://localhost:8080. Pegue la ruta de acceso dentro de la cadena de ruta de acceso entre comillas en una de las "url" cadenas. Por ejemplo:

    "url": "http://localhost:8080", // Provide your project's url to finish configuring

  8. Copie y pegue la línea de dirección URL modificada en los demás lugares del launch.json archivo.

    Sugerencia: Para modificar todas las instancias al mismo tiempo, puede copiar una cadena de dirección URL actualizada y, a continuación, seleccionar una instancia de la cadena de dirección URL inicial, presionar Ctrl+Mayús+L para seleccionar todas las instancias y, a continuación, pegar la cadena actualizada.

  9. Guarde el launch.json archivo.

Paso 4: Haga clic en el botón Iniciar proyecto

  1. En Visual Studio Code, en la barra de actividad, haga clic en el botón Herramientas de Microsoft Edge (icono Herramientas de Microsoft Edge). Se abre el panel Herramientas de Microsoft Edge , que ahora contiene un botón Iniciar proyecto , pero no un botón Generar launch.json archivo :

    Panel Destinos cuando existe un archivo launch.json

  2. Haga clic en el botón Iniciar proyecto .

    La pestaña Edge DevTools y la pestaña Edge DevTools: Browser se abren en paneles independientes, en los que se muestra la aplicación web de demostración a hacer :

    La aplicación web de demostración a hacer que se ejecuta en la pestaña

En este momento, podría trabajar con modificaciones de CSS o recorrer el código en el depurador. Consulte estas secciones del tutorial Introducción haciendo clic con el botón derecho en un archivo HTML:

Paso 5: Cerrar DevTools

Para finalizar la depuración y cerrar las pestañas Edge DevTools :

  1. En la barra de herramientas Depurar, haga clic en el botón Detener (Mayús+F5):

    Botón Detener en la barra de herramientas Depurar

    O bien, en el menú Ejecutar , seleccione Detener depuración. O bien, cierre las dos pestañas DevTools. Se cierra la barra de herramientas Depurar.

Vea también:

Ha terminado el tutorial "Empezar haciendo clic en el botón Iniciar proyecto". Se recomienda que también realice los demás tutoriales; vea Introducción al uso de la extensión DevTools para Visual Studio Code.

Vea también

GitHub: