Introducción haciendo clic con el botón derecho en un archivo HTML

Use este tutorial para obtener información sobre cómo abrir y cerrar DevTools haciendo clic con el botón derecho en un .html archivo para realizar demostraciones en el Explorador de Visual Studio Code, sin necesidad de ejecutar un servidor web.

Paso 1: Instalación de DevTools y requisitos previos

1. Si aún no lo ha hecho, siga los pasos descritos en Instalación de la extensión DevTools para Visual Studio Code y, a continuación, continúe a continuación. No es necesario instalar e iniciar un servidor web para el tutorial actual, pero se recomienda.

Paso 2: Iniciar DevTools haciendo clic con el botón derecho en un archivo HTML

Hacer clic con el botón derecho en un .html archivo en el Explorador de Visual Studio Code es la manera principal de abrir DevTools cuando la página web no requiere ejecutarse en un servidor web.

• A diferencia del botón Iniciar instancia , este enfoque abre DevTools en modo de depuración.

• A diferencia del botón Iniciar proyecto que usaremos más adelante, este enfoque no requiere que genere un launch.json archivo.

Para demostrarlo, abriremos la aplicación web de demostración a hacer :

1. En Visual Studio Code, seleccioneAbrir carpeta.>

2. Vaya al directorio donde ha clonado el repositorio Demos, abra el directorio específico de la aplicación de demostración de tareas pendientes , como C:\Users\username\Documents\GitHub\Demos\demo-to-do\, y, a continuación, haga clic en el botón Seleccionar carpeta :

   

3. SeleccioneExploradorde barra> de actividad () > haga clic con el botón index.html derecho y, a continuación, seleccione Abrir con el explorador abierto de Edge>con DevTools:

   

   • Se abre la pestaña Edge DevTools .

   • Se abre la pestaña Edge DevTools: Browser (Herramientas perimetrales: explorador ), que muestra la página web en la que ha hecho clic con el botón derecho.

   • Se abre la barra de herramientas Depurar de Visual Studio Code, se abre la consola de depuración en la parte inferior y se abre el panel Ejecutar. Estas características indican que Visual Studio Code está en modo de depuración:

   

Paso 3: Organizar pestañas

Para ahorrar espacio, use el botón Cerrar DevTools o Abrir DevTools y el botón Alternar difusión de pantalla para alternar (abrir o cerrar) las pestañas DevTools.

1. Hacia la esquina superior izquierda de la pestaña Edge DevTools , haga clic en el botón Alternar difusión de pantalla :

   

   Se cierra la pestaña Edge DevTools: Browser .

2. En la pestaña Edge DevTools , vuelva a hacer clic en el botón Alternar difusión de pantalla .

   Se abre la pestaña Edge DevTools: Browser (Herramientas perimetrales: explorador ).

3. En la parte superior derecha de la pestaña Edge DevTools: Browser ,haga clic en el botón Cerrar DevTools :

   

4. En la parte superior derecha de la pestaña Edge DevTools: Browser ,haga clic en el botón Abrir DevTools .

5. Arrastre la pestaña Edge DevTools: Browser para acoplarla en cualquier lugar de Visual Studio Code, como agruparla con el editor de código fuente.

Paso 4: Editar CSS en DevTools, actualizando automáticamente el archivo .css

En la pestaña Edge DevTools, en la pestaña Estilos de la herramienta >Elementos, puede editar selectores, reglas y valores CSS. La casilla de edición de reflejo CSS está seleccionada de forma predeterminada, por lo que el .css archivo se edita automáticamente, pero las modificaciones no se guardan, de modo que pueda decidir si desea guardar los cambios.

1. En la herramienta Elementos , en la pestaña Estilos , haga clic en un valor CSS, como el tamaño de fuente del cuerpo.

2. Cambie el valor CSS, como usar la rueda del mouse o presionar flecha arriba y flecha abajo. Se abre el archivo asociado .css , como to-do-styles.css y se desplaza a la línea que define el valor CSS, y edita automáticamente el .css archivo, pero no guarda los cambios:

   

3. Cierre el .css archivo. Visual Studio Code le pregunta si desea guardar los cambios.

4. Haga clic en el botón No guardar .

Paso 5: Paso a través del código JavaScript en el depurador

1. Seleccione Explorador de barras> de actividad ().

2. En el directorio demo-to-do , haga clic en to-do.js para abrirlo. Desplácese hacia abajo hasta la changeTask función y haga clic a la izquierda de un número de línea para establecer un punto de interrupción:

   

3. Si no se muestra la barra lateral Ejecutar y depurar , seleccione Ver>ejecución. La barra lateral Ejecutar y depurar incluye el panel Inspección y otros paneles del depurador.

4. En la aplicación de demostración representada en la pestaña Edge DevTools: Browser ,escriba una tarea, como probar. El depurador de Visual Studio Code se pausa en el punto de interrupción del to-do.js archivo:

   

5. En la barra de herramientas Depurar, o bien mediante el menú Ejecutar o presionando las teclas, recorra un par de líneas de código en to-do.js.

6. En la aplicación de demostración representada en la pestaña Edge DevTools: Browser ,haga clic en el círculo "listo" situado junto a la tarea de prueba. El depurador de Visual Studio Code se pausa en el punto de interrupción del to-do.js archivo.

Paso 6: 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). O bien, en el menú Ejecutar , seleccione Detener depuración:

   

   Se cierra la pestaña Edge DevTools y se cierra la pestaña Edge DevTools: Browser .

Vea también:

• Cerrar DevTools en Abrir DevTools y el explorador DevTools.

Ha terminado el tutorial "Introducción haciendo clic con el botón derecho en un archivo HTML". Se recomienda que también realice los demás tutoriales; consulte Introducción al uso de la extensión DevTools para Visual Studio Code.

Consulte también

• Abrir DevTools y el explorador DevTools
• Extensión Microsoft Edge DevTools para Visual Studio Code

Github:

• demostración: la aplicación web de demostración que se ejecuta en el github.io servidor.
• Código fuente para demostración a hacer
• Repositorio MicrosoftEdge/Demos