Compartir a través de

El archivo launch.json de la extensión DevTools

  • Artículo

Visual Studio Code usa un launch.json archivo para definir configuraciones de depuración. Para usar la extensión DevTools, solo se necesita un launch.json archivo si desea usar el depurador y la página web requiere que se ejecute en un servidor web, no solo en un sistema de archivos local. En la mayoría de los casos, lo único que necesita saber sobre el contenido del archivo generado launch.json por DevTools (si decide usarlo) es que debe escribir la dirección URL deseada en la "url" cadena en varios lugares. Lea este artículo si desea usar configuraciones de depuración avanzadas y personalizadas.

Si desea usar la interfaz de usuario de Visual Studio Code, como F5, para iniciar las pestañas DevTools junto con el modo DevTools, la carpeta abierta (área de trabajo) debe contener un archivo generado por DevTools (compatible con DevTools) launch.json en el .vscode directorio.

A continuación se muestran detalles sobre el launch.json formato de archivo. Normalmente, no es necesario cambiar nada en el archivo excepto para reemplazar varias instancias de la cadena de dirección URL, como se explica en Apertura de DevTools haciendo clic en el botón Iniciar proyecto en Abrir DevTools y en el explorador DevTools.

Donde aparecen las cadenas de nombre en la interfaz de usuario

La "name" cadena de cada configuración de depuración rellena las listas desplegables en varios lugares.

  1. SeleccioneCarpeta de cierrede archivos>.

  2. Seleccione Archivo>abierto reciente>C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html, clonado en Paso 5: Clonar el repositorio Demos en Instalación de la extensión DevTools para Visual Studio Code.

    Supongamos que no existe ningún launch.json archivo en el .vscode directorio.

  3. Seleccione Barra de actividad> Herramientas > deMicrosoft Edge y haga clic en el botón Generar launch.json.

  4. Enel Exploradorde barras> de actividad, haga doble clic index.html para abrirlo.

  5. Seleccione Ejecutar barra> de actividady Depurar> haga clic en el botón Ejecutar y depurar.

    En la barra lateral Ejecutar y depurar de la esquina superior izquierda, las cadenas son Launch Edge Headless y adjuntan DevTools y Launch Edge y adjuntan DevTools. En la parte inferior de la ventana Visual Studio Code, la cadena es Iniciar edge sin cabeza y adjuntar DevTools. Estos son nombres de configuraciones compuestas en el .json archivo, que indican al depurador de Visual Studio Code que abra las dos pestañas DevTools, o de lo contrario, la pestaña DevTools y un explorador externo:

     "compounds": [
     {
         "name": "Launch Edge Headless and attach DevTools",
         "configurations": [
             "Launch Microsoft Edge in headless mode",
             "Open Edge DevTools"
         ]
     },
     {
         "name": "Launch Edge and attach DevTools",
         "configurations": [
             "Launch Microsoft Edge",
             "Open Edge DevTools"
         ]
     }
 ]

    Configuraciones en la parte superior izquierda de la barra lateral ejecutar y depurar

    En la consola de depuración de la esquina inferior derecha, la cadena es Iniciar Microsoft Edge en modo sin cabeza. Se trata de una cadena no sobre la pestaña Edge DevTools , sino sobre la pestaña Edge DevTools: Browser . Es el nombre de una configuración individual, no de una configuración compuesta:

        "configurations": [
     ...
     {
         "type": "pwa-msedge",
         "name": "Launch Microsoft Edge in headless mode",
         "request": "launch",
         "runtimeArgs": [
             "--headless",
             "--remote-debugging-port=9222"
         ],
         "url": "file://c:\\Users\\collabera\\Documents\\GitHub\\Demos\\demo-to-do\\index.html",
         "presentation": {
             "hidden": true
         }
     },

    Configuraciones en la consola de depuración en la parte inferior derecha

  6. En la barra lateral Ejecutar y depurar , haga clic en Iniciar depuración. Las dos pestañas de DevTools se abren y Visual Studio Code entra en modo de depuración. Este enfoque es la interfaz de usuario integrada Visual Studio Code para iniciar el depurador, en lugar de la interfaz de usuario de DevTools que se describe en Apertura de DevTools y el explorador DevTools.

Dónde se coloca el archivo launch.json

  1. En Visual Studio Code panel Explorador, el launch.json archivo se coloca en una .vscode carpeta en la raíz de la carpeta que abrió.

    • Para un repositorio, como el repositorio Demos, si abre toda la carpeta del repositorio, el botón Generar launch.json crea un \.vscode\launch.json archivo cerca de la raíz para todo el directorio del repositorio.

    • Si abre una carpeta determinada y más pequeña, como \Demos\demo-to-do\, el botón Generar launch.json solo coloca un launch.json archivo en esa carpeta.

Visual Studio Code usa un launch.json archivo para configurar y personalizar el depurador. launch.json es un archivo de configuración del depurador. Este archivo también controla qué explorador web usar junto con el depurador. Por ejemplo, al probar la página web haciendo clic en un botón de la página web para hacer que se ejecute el código JavaScript, el depurador de Visual Studio Code escucha el explorador y realiza los pasos a través del código JavaScript de la página web.

A continuación se muestra una copia de después de launch.json hacer clic en el botón Crear launch.json de la extensión.

Hay tres configuraciones y dos compuestos definidos inicialmente de forma predeterminada:

  • configurations- En la interfaz de usuario de Visual Studio Code, estos nombres de configuración aparecen en la interfaz de usuario del depurador:

    • Iniciar Microsoft Edge : se trata de una configuración de tipo "launch".

    • Inicie Microsoft Edge en modo sin cabeza : se trata de una configuración de tipo "launch".

    • Open Edge DevTools : se trata de una configuración de tipo "debug" (o "attach"-type).

  • compounds- en la interfaz de usuario de Visual Studio Code, aparecen en la barra de herramientas Depurar:

    • Iniciar Edge sin cabeza y adjuntar DevTools

    • Iniciar Edge y adjuntar DevTools

Intellisense y autocompletar

Mantenga el puntero sobre un nombre o valor JSON para mostrar una información sobre herramientas:

Información sobre herramientas de IntelliSense al mantener el puntero sobre un nombre o valor JSON

Empiece a escribir comillas dobles para ver la lista de autocompletar de las propiedades y descripciones JSON disponibles:

Autocompletar para launch.json

Al guardar el archivo, asegúrese de proporcionar JSON con formato correcto, incluidas las comas.

Tipos de configuración: inicio frente a depuración

Estos dos tipos distintos de configuraciones se definen en este .json archivo para el depurador de Visual Studio Code.

Configuraciones

Las secciones siguientes del launch.json archivo son de la versión 2.1.1 de la extensión, en una ubicación de instalación predeterminada para Visual Studio Code en Windows.

Configuración 1: Inicio de Microsoft Edge

Se trata de una configuración de tipo "launch browser". Esta configuración controla el componente del explorador, como el archivo que .html se va a mostrar, cuando no se selecciona headless en la interfaz de usuario.

Este nombre de configuración no aparece directamente en la interfaz de usuario. Esta configuración la usa una configuración compuesta, a continuación.

        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge",
            "request": "launch",
            "runtimeArgs": [
                "--remote-debugging-port=9222"
            ],
            "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
            "presentation": {
                "hidden": true
            }
        },

Configuración 2: Iniciar Microsoft Edge en modo sin cabeza

Se trata de una configuración de tipo "launch browser". Esta configuración controla el componente del explorador, como el archivo que .html se va a mostrar, cuando se selecciona Headless en la página Configuración de Edge DevTools>, como es de forma predeterminada.

Este nombre de configuración Iniciar Microsoft Edge en modo sin cabeza aparece en la interfaz de usuario, como en la barra de herramientas Depurar y en la consola de depuración. Si inicia varias instancias, se anexa un número a las instancias adicionales de la interfaz de usuario, como Iniciar Microsoft Edge en modo sin cabeza 2. Esta configuración la usa una configuración compuesta, a continuación.

        {
            "type": "pwa-msedge",
            "name": "Launch Microsoft Edge in headless mode",
            "request": "launch",
            "runtimeArgs": [
                "--headless",
                "--remote-debugging-port=9222"
            ],
            "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
            "presentation": {
                "hidden": true
            }
        },

Configuración 3: Open Edge DevTools

Se trata de una configuración de tipo "attach debugger". Esta configuración controla la pestaña Edge DevTools (panel), como qué .html archivo rellena la herramienta Elementos .

Este nombre de configuración no aparece directamente en la interfaz de usuario. Esta configuración la usa una configuración compuesta, a continuación.

        {
            "type": "vscode-edge-devtools.debug",
            "name": "Open Edge DevTools",
            "request": "attach",
            "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
            "presentation": {
                "hidden": true
            }
        }

Configuraciones compuestas

La compounds sección de launch.json define configuraciones compuestas.

Cada configuración compuesta hace referencia a dos configuraciones: una configuración para abrir la pestaña Edge DevTools en Visual Studio Code y la otra configuración para abrir la pestaña Edge DevTools: Browser (a veces denominada screencast o headless browser) o la pestaña Edge DevTools: Browser y toda la ventana del explorador Microsoft Edge.

En el panel Herramientas de Microsoft Edge , en la sección Destinos , en el lado derecho de un destino, haga clic en el botón Alternar difusión de pantalla . La pestaña Edge DevTools: Browser (panel) sin cabeza se cierra o se abre.

En el panel Herramientas de Microsoft Edge , en la sección Destinos , en el lado derecho de un destino, haga clic en el botón Asociar y abra Herramientas de Microsoft Edge .

Configuración compuesta 1: Iniciar Edge sin cabeza y adjuntar DevTools

Esta configuración compuesta inicia los siguientes componentes:

  • La pestaña Edge DevTools: Browser (panel) de Visual Studio Code. Esto se define mediante la configuración que tiene el name elemento "Launch Microsoft Edge in headless mode" (Iniciar Microsoft Edge en modo sin cabeza), anteriormente.

  • La pestaña Edge DevTools (panel) de Visual Studio Code. Esto se define mediante la configuración que tiene " name Open Edge DevTools", anteriormente.

        {
            "name": "Launch Edge Headless and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge in headless mode",
                "Open Edge DevTools"
            ]
        },

El nombre de esta configuración compuesta, Launch Edge Headless y attach DevTools, aparece en la barra de herramientas Depurar de Visual Studio Code.

Configuración compuesta 2: Iniciar Edge y adjuntar DevTools

Esta configuración compuesta inicia los siguientes componentes:

  • La pestaña Edge DevTools: Browser (panel) de Visual Studio Code. Esto se define mediante la configuración que tiene " name Iniciar Microsoft Edge", anteriormente.

  • Ventana del explorador Microsoft Edge. Esto se define mediante la configuración que tiene " name Iniciar Microsoft Edge", anteriormente.

  • La pestaña Edge DevTools (panel) de Visual Studio Code. Esto se define mediante la configuración que tiene " name Open Edge DevTools", anteriormente.

        {
            "name": "Launch Edge and attach DevTools",
            "configurations": [
                "Launch Microsoft Edge",
                "Open Edge DevTools"
            ]
        }

El nombre de esta configuración compuesta, Launch Edge y attach DevTools, aparece en la interfaz de usuario de la barra de herramientas Depurar de Visual Studio Code.

Adición de configuraciones

Puede definir sus propias configuraciones de depuración adicionales. Haga clic en el botón Agregar configuración .

Consulte también

launch.json para otras plataformas