O ficheiro launch.json da extensão DevTools

Visual Studio Code utiliza um launch.json ficheiro para definir configurações de depuração. Para utilizar a extensão DevTools, só é necessário um launch.json ficheiro se pretender utilizar o depurador e a página Web exigir a execução num servidor Web e não apenas num sistema de ficheiros local. Na maioria dos casos, a única coisa que precisa de saber sobre o conteúdo do ficheiro gerado launch.json por DevTools (se optar por utilizá-lo) é que tem de introduzir o "url" URL pretendido na cadeia em vários locais. Leia este artigo se quiser utilizar configurações de depuração avançadas e personalizadas.

Se quiser utilizar a IU do Visual Studio Code, como F5, para iniciar os separadores DevTools juntamente com o Modo de depuração, a .vscode pasta aberta (área de trabalho) tem de conter um ficheiro gerado por DevTools (compatível com DevTools) launch.json no diretório.

Os detalhes sobre o formato de launch.json ficheiro encontram-se abaixo. Normalmente, não precisa de alterar nada no ficheiro, exceto substituir várias instâncias da cadeia de URL, conforme explicado em Abrir DevTools ao clicar no botão Iniciar Projeto em Abrir DevTools e no browser DevTools.

Onde as cadeias de nome aparecem na IU

A "name" cadeia de cada configuração de depuração preenche as listas pendentes em vários locais.

SelecioneFechar Pasta deFicheiros>.
Selecione Abrir Ficheiro>Recente>C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html, clonado por Passo 5: Clone o repositório Demos em Instalar a extensão DevTools para Visual Studio Code.

Suponha que não existe nenhum launch.json ficheiro no .vscode diretório.
Selecione Barra de> AtividadeFerramentas> do Microsoft Edge clique no botão Gerar launch.json.
Na Barra> de Atividade Explorer, faça duplo clique index.html para abri-la.

Selecione Execução da Barra> de Atividadee Depurar> clique no botão Executar e Depurar.

Na Barra Lateral Executar e Depurar no canto superior esquerdo, as cadeias são Launch Edge Headless e anexam DevTools e Launch Edge e anexam DevTools. Na parte inferior da janela Visual Studio Code, a cadeia é Iniciar o Edge Sem Cabeça e anexar DevTools. Estes são nomes de configurações compostas no ficheiro, a .json indicar ao Visual Studio Code depurador para abrir os dois separadores DevTools ou o separador DevTools e um browser 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"
         ]
     }
 ]

Configurações no canto superior esquerdo da Barra Lateral Executar e Depurar

Na Consola de Depuração , no canto inferior direito, a cadeia é Iniciar o Microsoft Edge no modo sem cabeça. Esta é uma cadeia não sobre o separador DevTools do Edge , mas sobre o separador DevTools do Edge: Browser . É o nome de uma configuração individual, não de uma configuração composta:

    "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
         }
     },

Configurações na Consola de Depuração no canto inferior direito

Na Barra Lateral Executar e Depurar , clique em Iniciar Depuração. Os dois separadores DevTools são abertos e Visual Studio Code entra no modo de Depuração. Esta abordagem é a IU Visual Studio Code incorporada para iniciar o depurador, em vez da IU de DevTools descrita em Abrir DevTools e no browser DevTools.

Onde o ficheiro de launch.json é colocado

No painel de Explorer de Visual Studio Code, o launch.json ficheiro é colocado numa .vscode pasta na raiz da pasta que abriu.
- Para um repositório, como o repositório Demos, se abrir toda a pasta de repositório, o botão Gerar launch.json cria um \.vscode\launch.json ficheiro perto da raiz para todo o diretório de repositório.
- Se abrir uma pasta específica e mais pequena, como \Demos\demo-to-do\, o botão Gerar launch.json coloca apenas um launch.json ficheiro nessa pasta.

Visual Studio Code utiliza um launch.json ficheiro para configurar e personalizar o depurador. launch.json é um ficheiro de configuração de depurador. Este ficheiro também controla o browser a utilizar em conjunto com o depurador. Por exemplo, quando testa a sua página Web ao clicar num botão na página Web para fazer com que o código JavaScript seja executado, o depurador Visual Studio Code escuta o browser e percorre o código JavaScript da página Web.

Segue-se uma cópia do depois de launch.json clicar no botão Criar launch.json na extensão.

Existem três configurações e dois compostos inicialmente definidos por predefinição:

configurations- na IU do Visual Studio Code, estes nomes de configuração são apresentados na IU do Depurador:
- Inicie o Microsoft Edge – esta é uma configuração do tipo "iniciar".
- Inicie o Microsoft Edge no modo sem cabeça - esta é uma configuração do tipo "iniciar".
- Abra As DevTools do Edge – trata-se de uma configuração do tipo "depuração" (ou "anexar"-type).
compounds- na IU do Visual Studio Code, estes são apresentados na barra de ferramentas Depurar:
- Iniciar o Edge Sem Cabeça e anexar DevTools
- Iniciar o Edge e anexar DevTools

Intellisense e conclusão automática

Paire o cursor sobre um nome ou valor JSON para mostrar uma descrição:

Descrição do Intellisense ao pairar sobre um nome ou valor JSON

Comece a escrever aspas duplas para ver a lista de preenchimento automático das propriedades e descrições JSON disponíveis:

Conclusão automática para launch.json

Ao guardar o ficheiro, certifique-se de que fornece JSON bem formado, incluindo vírgulas.

Tipos de configuração: iniciar vs. depurar

Estes dois tipos distintos de configurações são definidos neste .json ficheiro para o depurador Visual Studio Code.

Configurações

As secções de launch.json ficheiro seguintes são da v2.1.1 da extensão, numa localização de instalação predefinida para Visual Studio Code no Windows.

Configuração 1: Iniciar o Microsoft Edge

Esta é uma configuração do tipo "iniciar browser". Esta configuração controla o componente do browser, como o .html ficheiro a apresentar, quando não está selecionado sem cabeça na IU.

Este nome de configuração não aparece diretamente na IU. Esta configuração é utilizada por uma configuração composta, abaixo.

        {
            "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
            }
        },

Configuração 2: Iniciar o Microsoft Edge no modo sem cabeça

Esta é uma configuração do tipo "iniciar browser". Esta configuração controla o componente do browser, como o .html ficheiro a apresentar, quando Headless está selecionado na página Definições de DevTools > do Edge, tal como está por predefinição.

Este nome de configuração Inicia o Microsoft Edge no modo sem cabeça aparece na IU, tal como na barra de ferramentas Depurar e na Consola de Depuração. Se iniciar várias instâncias, um número é acrescentado às instâncias adicionais na IU, como Iniciar o Microsoft Edge no modo sem cabeça 2. Esta configuração é utilizada por uma configuração composta, abaixo.

        {
            "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
            }
        },

Configuração 3: Abrir o Edge DevTools

Esta é uma configuração do tipo "anexar depurador". Esta configuração controla o separador DevTools do Edge (painel), como o ficheiro que .html preenche a ferramenta Elementos .

Este nome de configuração não aparece diretamente na IU. Esta configuração é utilizada por uma configuração composta, abaixo.

        {
            "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
            }
        }

Configurações compostas

A compounds secção de launch.json define configurações compostas.

Cada configuração composta refere-se a duas configurações: uma configuração para abrir o separador DevTools do Edge no Visual Studio Code e a outra configuração para abrir o separador Edge DevTools: Browser (por vezes denominado screencast ou browser sem cabeça) ou o separador Edge DevTools: Browser e toda a janela do browser Microsoft Edge.

No painel Ferramentas do Microsoft Edge , na secção Destinos , no lado direito de um destino, clique no botão Alternar screencast . O separador Edge DevTools: browser (painel) incorporado sem cabeça fecha ou abre.

No painel Ferramentas do Microsoft Edge , na secção Destinos , no lado direito de um destino, clique no botão Anexar e abra as Ferramentas do Microsoft Edge .

Configuração composta 1: Iniciar o Edge Sem Cabeça e anexar DevTools

Esta configuração composta inicia os seguintes componentes:

O separador Edge DevTools: Browser (painel) no Visual Studio Code. Isto é definido pela configuração que tem o "Iniciar o name Microsoft Edge no modo sem cabeça", acima.
O separador DevTools do Edge (painel) no Visual Studio Code. Isto é definido pela configuração que tem as name "Open Edge DevTools" acima.

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

O nome desta configuração composta, Launch Edge Headless e attach DevTools, é apresentado na barra de ferramentas de depuração de Visual Studio Code.

Configuração composta 2: Iniciar o Edge e anexar DevTools

Esta configuração composta inicia os seguintes componentes:

O separador Edge DevTools: Browser (painel) no Visual Studio Code. Isto é definido pela configuração que tem o "Iniciar Microsoft name Edge", acima.
A janela do browser Microsoft Edge. Isto é definido pela configuração que tem o "Iniciar Microsoft name Edge", acima.
O separador DevTools do Edge (painel) no Visual Studio Code. Isto é definido pela configuração que tem as name "Open Edge DevTools" acima.

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

O nome desta configuração composta, Launch Edge e attach DevTools, é apresentado na IU na barra de ferramentas de depuração de Visual Studio Code.

Adicionar configurações

Pode definir as suas próprias configurações de depuração adicionais. Clique no botão Adicionar configuração .

Confira também

launch.json para outras plataformas

Configure a depuração de C/C++ nos documentos do Visual Studio Code.
Configure o depurador em Utilizar React no Visual Studio Code nos documentos do Visual Studio Code.

Comentários

Esta página foi útil?

Last updated on 2025-11-27