Integración con la depuración de Visual Studio Code

Para abrir DevTools en Visual Studio Code en modo de depuración mediante la interfaz de usuario de DevTools, haga clic con el botón derecho en un .html archivo o haga clic en el botón Iniciar proyecto, como se describe en Abrir DevTools y el explorador DevTools. También puede usar la interfaz de usuario de Visual Studio Code para iniciar el depurador, como F5, para abrir también las pestañas DevTools, si define un archivo compatible con launch.json DevTools haciendo clic en el botón Generar launch.json de la barra lateral herramientas de Microsoft Edge.

Al abrir DevTools en Visual Studio Code en modo de depuración, se abren los siguientes componentes de la interfaz de usuario:

• Pestaña Edge DevTools .
• La pestaña Edge DevTools: Browser .
• Barra de herramientas Depurar.
• La barra lateral Ejecutar (depurador), incluido el panel Inspección .
• Consola de depuración en la parte inferior de la ventana.

Vea también Paso 5: Paso a través del código JavaScript en el depurador en Introducción haciendo clic con el botón derecho en un archivo HTML.

Formas de iniciar el depurador junto con las pestañas DevTools

La mayoría de estos enfoques requieren un archivo generado por launch.json DevTools que contenga la dirección URL.

Características de la interfaz de usuario de DevTools para abrir DevTools en modo de depuración

• Haga clic con el botón derecho en un .html archivo en El explorador>Abrir con Edge. Este enfoque usa básicamente una ruta de acceso de archivo en lugar de una dirección URL y no requiere que genere un launch.json archivo.

• Barra de actividad>Herramientas >de Microsoft Edge haga clic en el botón Iniciar proyecto.

Visual Studio Code características de la interfaz de usuario para abrir DevTools en modo de depuración

• Pulse F5.

• En la barra de actividad, haga clic en el icono Ejecutar y depurar () y, a continuación, en la barra lateral Ejecutar y depurar , haga clic en el botón Ejecutar y depurar .

• Abra la paleta de comandos Visual Studio Code, empiece a escribir la palabra depurar después >de y, a continuación, seleccione Depurar: Abrir vínculo. Consulte Comando Abrir vínculo en Depuración del explorador en VS Code.

Abrir el explorador como parte de una sesión de depuración

Puede abrir la pestaña Edge DevTools: Browser (el explorador DevTools incrustado) como parte de una sesión de depuración. La extensión DevTools abre un nuevo explorador como un explorador incrustado en Visual Studio Code. Esta pestaña Devtools: Browser se puede mover a cualquier parte del editor. Puede usar esta pestaña en paralelo con el código fuente o dividir los paneles y tener la vista previa del explorador debajo del código:

Puede usar la extensión DevTools con la interfaz de usuario o flujo de trabajo de depuración de Visual Studio Code habitual, como se indica a continuación. En este enfoque, para entrar en el modo de depuración, no se usa la interfaz de usuario de DevTools; no estamos haciendo clic con el botón derecho en un .html archivo para seleccionar Abrir con Edge y no estamos haciendo clic en el botónIniciar proyecto deherramientas de Microsoft Edge> de la barra> de actividad.

La depuración de JavaScript está integrada en Visual Studio Code; puede depurar en Chrome, Microsoft Edge o Node.js sin instalar extensiones. Si depura mediante la opción Microsoft Edge con las características de depuración Visual Studio Code y la interfaz de usuario, puede iniciar Microsoft Edge DevTools desde el depurador de JavaScript. Si la extensión DevTools no está instalada, se le pedirá que la instale opcionalmente.

La extensión DevTools proporciona funcionalidad adicional, como el explorador DevTools incrustado, que tiene una barra de herramientas emulación de dispositivo, y proporciona formas adicionales de entrar en el modo de depuración en Visual Studio Code.

Vea también:

• Limitaciones del explorador DevTools incrustado en Uso de una ventana del explorador externo.

Inicio del depurador

Para iniciar el depurador de Visual Studio Code junto con DevTools, use la interfaz de usuario habitual que forma parte de Visual Studio Code:

1. Abra una nueva ventana de Visual Studio Code. No hay ninguna carpeta (área de trabajo) abierta y las pestañas DevTools no están abiertas.

2. Abra una carpeta (área de trabajo). Por ejemplo, seleccione Abrir archivo>reciente>C:\Users\username\Documents\GitHub\Demos\demo-to-do. Las pestañas DevTools no están abiertas.

3. Abra un .html archivo.

4. Haga clic en el .html archivo en el editor y, a continuación, realice cualquiera de las siguientes acciones de interfaz de usuario que inicien el depurador de Visual Studio Code de las maneras habituales:

   • Pulse F5.

   • En la barra de actividad, haga clic en el icono Ejecutar y depurar () y, a continuación, en la barra lateral Ejecutar y depurar , haga clic en el botón Ejecutar y depurar , como se muestra a continuación.

   • Abra la paleta de comandos Visual Studio Code, empiece a escribir la palabra depurar y, a continuación, seleccione Depurar: Abrir vínculo.

   

   Herramientas de Microsoft Edge no aparece en la captura de pantalla anterior, ya que para esta captura de pantalla, desinstale DevTools.

5. Seleccione Aplicación web (Edge).

6. En la barra de herramientas Depurar, haga clic en el botón Inspeccionar , que tiene una información sobre herramientas de Open browser DevTools:

   

   La primera vez que haga clic en el botón Inspeccionar de la barra de herramientas Depurar, se abrirá la barra lateral Extensiones: Marketplace , que contiene Herramientas de Microsoft Edge para VS Code:

   

7. Haga clic en Herramientas de Microsoft Edge parala instalación de VS Code>.

8. Cierre DevTools por DevTools de cierre.

9. Abra una carpeta y un .html archivo.

Continúe a continuación.

Generación de un launch.json orientado a DevTools

Suponiendo que la carpeta abierta no contiene una .vscode carpeta que ya contenga un launch.json archivo:

1. Seleccione Barra> de actividad Herramientas > deMicrosoft Edge haga clic en el botón Generar launch.json y, a continuación, presione F5. O bien, consulte Apertura de DevTools y el explorador DevTools.

   Una vez instalada la extensión DevTools, al abrir un .html archivo y, a continuación, hacer clic en el botón Inspeccionar de la barra de herramientas Depurar, las pestañas Edge DevTools se abren dentro de Visual Studio Code:

   

   En la captura de pantalla anterior, hay un launch.json archivo en el Explorador en la .vscode carpeta y una cadena de ese archivo, Launch Edge Headless y attach DevTools, en la parte inferior de la ventana, porque DevTools se abrió mediante una característica de Visual Studio Code como F5, que usaba el archivo generado por launch.json DevTools.

2. Si es necesario, en la parte superior izquierda de la pestaña Edge DevTools , haga clic en el botón Alternar difusión de pantalla :

   

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

   En la captura de pantalla anterior, no hay ningún launch.json archivo en el Explorador en la .vscode carpeta y ninguna cadena como Launch Edge Headless y adjuntar DevTools en la parte inferior de la ventana, porque DevTools se abrió haciendo clic con el botón derecho en el archivo en el .htmlExplorador.

Para obtener más pasos y capturas de pantalla de la interfaz de usuario, vea Where the name strings appear in the UI (Dónde aparecen las cadenas de nombre en la interfaz de usuario). En la mayoría de los casos, lo único que necesita saber sobre el contenido del archivo generado por launch.json DevTools es que debe escribir la dirección URL deseada en la "url" cadena en varios lugares.

Abrir automáticamente el explorador y DevTools al depurar en Visual Studio Code

Para depurar el proyecto, es posible que desee cambiar la página predeterminada que se abre en Microsoft Edge en Visual Studio Code. Para cambiar la página predeterminada al sitio web del proyecto:

1. En Visual Studio Code, seleccione Archivo>nueva ventana. Observe que no hay ninguna carpeta abierta.

2. En la barra de actividad, seleccione Herramientas de Microsoft Edge.

3. En el panel Herramientas de Microsoft Edge: Destinos , haga clic en el vínculo Abrir una carpeta .

4. Seleccione la carpeta del proyecto con la nueva página predeterminada que se mostrará al comenzar la depuración en Visual Studio Code.

   La primera vez que abra una carpeta, debe confirmar que confía en los autores de los archivos de esta carpeta:

   

5. Opcionalmente, active la casilla Confiar en los autores de todos los archivos de la carpeta primaria y, a continuación, haga clic en el botón Sí, confío en los autores :

   La primera vez que realice este proceso, también debe seleccionar Herramientas deMicrosoft Edge de la barra> de actividad de nuevo.

   El panel Herramientas de Microsoft Edge: Destinos ahora muestra dos botones: Iniciar instancia y Generar launch.json:

   

Generación de un launch.json orientado a DevTools

1. Seleccione Generar launch.json para crear un launch.json en el proyecto. Debe ser un archivo más largo creado por DevTools, como se muestra en El archivo launch.json para la extensión DevTools, no un archivo corto y más genérico creado por Visual Studio Code. Vea también Eliminar o volver a crear launch.json en Solución de problemas de la extensión DevTools.

2. En launch.json, agregue la dirección URL del proyecto. Si deja la dirección URL vacía, se muestra la página predeterminada.

3. Guarde launch.json.

Al elegir depurar el proyecto en Visual Studio Code, ya sea que use características de interfaz de usuario de DevTools o las características habituales de la interfaz de usuario Visual Studio Code, iniciará automáticamente el explorador y abrirá las Herramientas de desarrollo, mostrando la dirección URL que especificó en el launch.json archivo.

Si ve la página Correcto pero quiere su propia página web en su lugar

La página web que se abre está establecida launch.json en DevTools si ese archivo existe en el área de trabajo (la carpeta abierta). Por lo tanto, puede presionar F5 mientras su propio .html archivo está abierto y, sin embargo, ver la página de éxito predeterminada en las pestañas DevTools . Las opciones en ese caso son:

• Edite launch.json en la carpeta abierta para que apunte a una dirección URL (normalmente) o posiblemente a una ruta de acceso de archivo. A continuación, puede usar el flujo de trabajo o la interfaz de usuario del depurador de Visual Studio Code, como F5.

• O bien, elimine launch.jsony,a continuación, haga >> cliccon el botón derecho en .html el archivo > y seleccione Abrir con Edge. Este enfoque no usa el flujo de trabajo o la interfaz de usuario de Visual Studio Code Debugger, como F5.

Consulte también

• El archivo launch.json de la extensión DevTools
• Depuración de Microsoft Edge en Visual Studio Code
• Extensión Microsoft Edge DevTools para Visual Studio Code
• El depurador de Visual Studio Code ahora se integra con la extensión DevTools en Novedades de DevTools (Microsoft Edge 93).

Páginas externas:

• Inicie las configuraciones en el artículo Depuración para Visual Studio Code.
• Depuración del explorador en VS Code