O arquivo launch.json para a extensão DevTools

O Visual Studio Code usa um launch.json arquivo para definir as configurações de depuração. Para usar a extensão DevTools, um launch.json arquivo só será necessário se você quiser usar o depurador e sua página da Web precisar ser executada em um servidor Web, não apenas em um sistema de arquivos local. Na maioria dos casos, a única coisa que você precisa saber sobre o conteúdo do arquivo gerado pelo launch.json DevTools (se optar por usá-lo) é inserir a "url" URL desejada na cadeia de caracteres em vários lugares. Leia este artigo se quiser usar configurações de depuração personalizadas e avançadas.

Se você quiser usar a interface do usuário do Visual Studio Code, como F5, para iniciar as guias do DevTools junto com o modo de depuração, a pasta aberta (workspace) deverá conter um arquivo gerado pelo .vscode DevTools (compatível com DevTools) launch.json no diretório.

Os detalhes sobre o formato do launch.json arquivo estão abaixo. Normalmente, você não precisa alterar nada no arquivo, exceto substituir várias instâncias da cadeia de caracteres da URL, conforme explicado em Abrindo DevTools clicando no botão Iniciar Projeto em Abrindo DevTools e no navegador DevTools.

Onde as cadeias de caracteres de nome aparecem na interface do usuário

A "name" cadeia de caracteres de cada configuração de depuração preenche listas suspensas em vários lugares.

  1. Selecione Arquivo>, Fechar Pasta.

  2. Selecione Arquivo>Abrir Recente>C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html, clonado conforme Etapa 5: Clone o repositório Demos em Instalando a extensão DevTools para Visual Studio Code.

    Suponha que não exista nenhum launch.json arquivo no .vscode diretório.

  3. Selecione a Barra de> Atividades Ferramentas > doMicrosoft Edge clique no botão Gerar launch.json.

  4. No Activity BarExplorer>, cliqueindex.html duas vezes para abri-lo.

  5. Selecione a Barra de> AtividadesExecutar e Depurar> clique no botão Executar e Depurar.

    Na barra lateral Executar e Depurar no canto superior esquerdo, as cadeias de caracteres são Iniciar Borda Sem Cabeça e anexar DevTools e Iniciar Borda e anexar DevTools. Na parte inferior da janela do Visual Studio Code, a cadeia de caracteres é Iniciar o Edge sem periféricos e anexar DevTools. Esses são nomes de configurações compostas no arquivo, informando ao .json depurador do Visual Studio Code para abrir as duas guias do DevTools, ou então a guia DevTools e um navegador 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

    No Console de Depuração no canto inferior direito, a cadeia de caracteres é Iniciar o Microsoft Edge no modo sem periféricos. Esta é uma cadeia de caracteres não sobre a guia DevTools do Edge , mas sobre o DevTools do Edge: guia Navegador . É 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 no Console de Depuração no canto inferior direito

  6. Na barra lateral Executar e Depurar , clique em Iniciar Depuração. As duas guias do DevTools são abertas e o Visual Studio Code entra no modo de depuração. Essa abordagem é a interface do usuário interna do Visual Studio Code para iniciar o depurador, em vez da interface do usuário do DevTools descrita em Abrindo o DevTools e o navegador DevTools.

Onde o arquivo launch.json é colocado

  1. No painel Explorer do Visual Studio Code, o launch.json arquivo é colocado em uma .vscode pasta na raiz da pasta que você abriu.

    • Para um repositório, como o repositório Demos, se você abrir toda a pasta do repositório, o botão Gerar launch.json criará um \.vscode\launch.json arquivo próximo à raiz, para todo o diretório do repositório.

    • Se você abrir uma pasta menor e específica, como \Demos\demo-to-do\, o botão Gerar launch.json colocará um launch.json arquivo somente nessa pasta.

O Visual Studio Code usa um launch.json arquivo para configurar e personalizar o depurador. launch.json é um arquivo de configuração do depurador. Esse arquivo também controla qual navegador da Web usar em conjunto com o depurador. Por exemplo, quando você testa sua página da Web clicando em um botão na página da Web para fazer com que o código JavaScript seja executado, o depurador do Visual Studio Code escuta o navegador e percorre o código JavaScript da página da Web.

Veja a seguir uma cópia do launch.json depois de clicar no botão Criar launch.json na extensão.

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

  • configurations- na interface do usuário do Visual Studio Code, esses nomes de configuração aparecem na interface do usuário do depurador:

    • Iniciar o Microsoft Edge - esta é uma configuração do tipo "iniciar".

    • Iniciar o Microsoft Edge no modo sem periféricos - esta é uma configuração do tipo "lançamento".

    • Open Edge DevTools - esta é uma configuração do tipo "debug" (ou "attach").

  • compounds- na interface do usuário do Visual Studio Code, eles aparecem na barra de ferramentas Depurar:

    • Iniciar o Edge sem periféricos e anexar DevTools

    • Iniciar o Edge e anexar DevTools

IntelliSense e preenchimento automático

Passe o mouse sobre um nome ou valor JSON para mostrar uma dica de ferramenta:

Dica de ferramenta do Intellisense ao passar o mouse sobre um nome ou valor JSON

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

Preenchimento Automático para launch.json

Ao salvar o arquivo, certifique-se de fornecer JSON bem formado, incluindo vírgulas.

Tipos de configuração: inicialização vs. depuração

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

Configurações

As seções a seguir do launch.json arquivo são da v2.1.1 da extensão, em um local de instalação padrão do Visual Studio Code no Windows.

Configuração 1: Iniciar o Microsoft Edge

Esta é uma configuração do tipo "iniciar navegador". Essa configuração controla o componente do navegador, como qual .html arquivo exibir, quando a opção sem cabeça não está selecionada na interface do usuário.

Esse nome de configuração não aparece diretamente na interface do usuário. Essa configuração é usada 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 periféricos

Esta é uma configuração do tipo "iniciar navegador". Essa configuração controla o componente do navegador, como qual .html arquivo exibir, quando Sem periféricos é selecionado na página Configurações do Edge DevTools>, como é por padrão.

Esse nome de configuração Iniciar o Microsoft Edge no modo sem periféricos é exibido na interface do usuário, como na barra de ferramentas Depurar e no Console de Depuração. Se você executar várias instâncias, um número será acrescentado às instâncias adicionais na interface do usuário, como Iniciar o Microsoft Edge no modo sem periféricos 2. Essa configuração é usada 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 DevTools do Edge

Essa é uma configuração do tipo "depurador de anexação". Essa configuração controla a guia Edge DevTools (painel), como qual .html arquivo preenche a ferramenta Elementos .

Esse nome de configuração não aparece diretamente na interface do usuário. Essa configuração é usada 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 seção de launch.json define configurações compostas.

Cada configuração composta refere-se a duas configurações: uma configuração para abrir a guia DevTools do Edge no Visual Studio Code e a outra configuração para abrir o DevTools do Edge: guia do navegador (às vezes chamado de navegador screencast ou sem periféricos) ou o DevTools do Edge: guia do navegador e toda a janela do navegador Microsoft Edge.

No painel Ferramentas do Microsoft Edge , na seção Destinos , no lado direito de um destino, clique no botão Alternar screencast . O Edge incorporado sem periféricos DevTools: a guia do navegador (painel) fecha ou abre.

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

Configuração composta 1: Iniciar o Edge sem periféricos e anexar DevTools

Essa configuração composta inicia os seguintes componentes:

  • The Edge DevTools: Guia do navegador (painel) no Visual Studio Code. Isso é definido pela configuração que apresenta "Iniciar o name Microsoft Edge no modo sem periféricos", acima.

  • A guia DevTools do Edge (painel) no Visual Studio Code. Isso é definido pela configuração que tem o name "Open Edge DevTools", acima.

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

O nome dessa configuração composta, Iniciar o Edge Headless e anexar DevTools, é exibido na barra de ferramentas Depurar do Visual Studio Code.

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

Essa configuração composta inicia os seguintes componentes:

  • The Edge DevTools: Guia do navegador (painel) no Visual Studio Code. Isso é definido pela configuração que possui o name "Iniciar Microsoft Edge", acima.

  • A janela do navegador Microsoft Edge. Isso é definido pela configuração que possui o name "Iniciar Microsoft Edge", acima.

  • A guia DevTools do Edge (painel) no Visual Studio Code. Isso é definido pela configuração que tem o name "Open Edge DevTools", acima.

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

O nome dessa configuração composta, Iniciar o Edge e anexar DevTools, aparece na interface do usuário na barra de ferramentas Depurar do Visual Studio Code.

Adicionar configurações

Você pode definir suas próprias configurações de depuração adicionais. Clique no botão Adicionar configuração .

Confira também

launch.json para outras plataformas

  • Last updated on