Partilhar via

Abrir o DevTools e o navegador DevTools

  • Artigo

Há várias maneiras de abrir a guia DevTools e a guia Edge DevTools: Navegador :

Abordagem Descrição
Clique com o botão direito do mouse em um .html arquivo. Nenhum launch.json arquivo é usado. Abre DevTools no modo Depuração. Use essa abordagem se quiser depurar e seu aplicativo Web poderá ser executado no sistema de arquivos em vez de um servidor Web.
Clique no botão Iniciar Instância . Nenhum launch.json arquivo é usado. Abre DevTools no modo não depurador. Use essa abordagem se você não quiser depurar.
Clique no botão Iniciar Projeto . Um launch.json arquivo é usado. Abre DevTools no modo Depuração. Use essa abordagem se você quiser depurar e seu aplicativo Web usar APIs que exigem executá-la em um servidor Web.

Essas abordagens são descritas abaixo. Para obter etapas detalhadas usando o repositório Demos, consulte Introdução usando a extensão DevTools para Visual Studio Code.

Abrindo o DevTools clicando com o botão direito do mouse em um arquivo HTML

Essa abordagem abre as guias DevTools no modo de depuração e é recomendada, a menos que a página da Web exija a execução em um servidor Web, como acontece com determinadas APIs.

Para abrir o DevTools e o navegador inserido, juntamente com a barra de ferramentas Depuração para um arquivo HTML em seu disco rígido:

  1. Em Visual Studio Code, faça qualquer um dos seguintes procedimentos:

    • Selecione Barra>de Atividades Explorer (botão Explorer) > clique no botão Abrir Pasta.
    • Selecione Arquivo>Abrir Pasta.
    • Selecione Arquivo>Abrir Recente.

  2. Abra uma pasta que contém arquivos de origem do aplicativo Web.

  3. Em Visual Studio Code, em Explorer, clique com o botão direito do mouse em um .html arquivo, selecione Abrir com Edge e selecione Abrir Navegador com DevTools:

    Clique com o botão direito do mouse em um arquivo HTML no Explorer para abri-lo com o Edge com ou sem DevTools

    O DevTools é aberto, com Visual Studio Code no modo de depuração:

    Os componentes DevTools da seleção de Open Browser com DevTools

    Os seguintes componentes abrem em Visual Studio Code:

    • A guia DevTools do Edge , incluindo a guia Elementos e outras guias de ferramentas.
    • A guia DevTools do Edge: Navegador , incluindo a barra de ferramentas DevTools do Dispositivo na parte inferior.
    • A barra de ferramentas de depuração na parte superior, incluindo botões como Pausar, Passar Passo a Passo, Entrar, Redefinir e Parar.
    • O Console de Depuração na parte inferior.
    • A barra lateral Executar e Depurar (o mesmo que selecionar Exibir>Execução).

Nessa abordagem, uma instância não está listada emDestinos de Ferramentas> doMicrosoft Edgeda Barra > de Atividades.

Use a barra lateral Explorer, da Barra de Atividades, para abrir um .js arquivo durante a depuração de uma página da Web.

A guia DevTools do Edge: Navegador inclui uma barra de ferramentas de Emulação de Dispositivo. Esta guia contém um navegador da Web inserido com recursos de DevTools. Às vezes, esse navegador é chamado de screencast ou um navegador sem cabeça para DevTools.

Veja também:

Abrindo o DevTools clicando no botão Iniciar Instância

Essa abordagem abre as guias DevTools no modo não depurador e é útil quando você não deseja a barra de ferramentas Depuração.

Essas etapas pressupõem que, inicialmente, nenhuma pasta está aberta em Visual Studio Code e a pasta que você está abrindo não tem um launch.json arquivo.

  1. Em Visual Studio Code, faça qualquer um dos seguintes procedimentos:

    • Selecione Barra> de Atividades Explorer (o botão Explorer) > clique no botão Abrir Pasta.
    • Selecione Arquivo>Abrir Pasta.
    • Selecione Arquivo>Abrir Recente.

    Para usar todos os recursos do DevTools, incluindo o CSS espelho edição do arquivo de origem local ao editar o CSS em DevTools, abra uma pasta que contém arquivos de origem que correspondam à página da Web que você deseja exibir no DevTools.

  2. Na Barra de Atividades, clique no botão Ferramentas do Microsoft Edge (botão Ferramentas do Microsoft Edge) e clique no botão Iniciar Instância :

    Microsoft Edge DevTools para Visual Studio Code extensão

    Se houver um botão Iniciar Projeto em vez de um botão Instância de Lançamento , isso indica que a pasta contém um launch.json arquivo. Inspecione qual URL é especificada no arquivo e considere clicar em launch.jsonIniciar Projeto, conforme descrito em Abrir DevTools clicando no botão Iniciar Projeto. Ou, se você quiser explorar como o botão Iniciar Instância funciona, poderá excluir o launch.json arquivo e gerar um novo launch.json arquivo posteriormente.

    Clicando no botão Iniciar Instância

    • A guia DevTools do Edge é aberta, inicialmente contendo informações sobre a página Sucesso, como C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html.
    • A guia Edge DevTools: Browser (o navegador inserido) é aberta, mostrando inicialmente a página Sucesso .
    • A barra de ferramentas Depurar e depurar a interface do usuário do Visual Studio Code não é aberta.
    • No painel Ferramentas do Microsoft Edge , a seção Destinos é aberta, listando um destino e o botão Instância de Lançamento é removido.

  3. Na guia DevTools do Edge: Navegador, na barra de endereços, cole um caminho de arquivo ou uma URL que corresponda à pasta aberta em Visual Studio Code.

    Se você quiser obter um caminho de arquivo: no Visual Studio Code >Barra> de Atividades Explorer (botão Explorer) > clique com o botão direito do mouse em um .htmlcaminho de cópia de arquivo>.

    Se você quiser colar uma URL, os exemplos serão:

    • http://localhost:8080
    • http://127.0.0.1:8080
    • http://10.0.1.8:8080

    URLs semelhantes são mostradas na linha de comando quando você insere (por exemplo) npx http-server para executar um servidor Web localmente.

    A página da Web especificada é exibida na guia Edge DevTools: Navegador (o navegador inserido). A guia DevTools do Edge exibe informações sobre a página da Web.

Veja também:

Abrindo o DevTools clicando no botão Iniciar Projeto

Essa abordagem abre as guias DevTools no modo de depuração e é recomendada se a página da Web exigir a execução em um servidor Web como em determinadas APIs.

Resumo:

  1. Abra uma pasta local que contém arquivos de origem do aplicativo Web.
  2. Clique no botão Gerar launch.json .
  3. Adicione uma URL localhost no .json arquivo.
  4. Clique no botão Iniciar Projeto .

Essas etapas pressupõem que você esteja executando um servidor Web localhost, conforme descrito na Etapa 6: Configurar um servidor localhost na instalação da extensão DevTools para Visual Studio Code.

Para abrir o DevTools clicando no botão Iniciar Projeto , siga as etapas a seguir.

Abrir uma pasta local que contém arquivos de origem do aplicativo Web

  1. Em Visual Studio Code, faça qualquer um dos seguintes procedimentos:

    • Selecione Barra> de Atividades Explorer (o ícone Explorer) > clique no botão Abrir Pasta.
    • Selecione Arquivo>Abrir Pasta.
    • Selecione Arquivo>Abrir Recente.

    Selecione um diretório que contém arquivos de origem da página da Web. Por exemplo, C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

  2. Na Barra de Atividades, clique em Ferramentas do Microsoft Edge (ícone ferramentas do Microsoft Edge). O painel Ferramentas do Microsoft Edge é aberto.

    • Se a pasta ainda não contiver um .vscode diretório que contenha um launch.json file, a Barra Lateral das Ferramentas do Microsoft Edge contém um botão Instância de Lançamento e um botão Gerar launch.json .

    • Se a pasta já contiver um .vscode diretório que contém um launch.json arquivo, a Barra Lateral das Ferramentas do Microsoft Edge contém um botão Iniciar Projeto e não um botão Gerar launch.json . Nesse caso, talvez você queira inspecionar ou alterar a url cadeia de caracteres no arquivo existente launch.json , conforme descrito abaixo.

Continue abaixo.

Clique no botão "Gerar launch.json"

  1. Clique no botão Gerar launch.json :

    O botão 'Gerar launch.json' da extensão DevTools

    O novo launch.json arquivo é aberto.

Continue abaixo.

Adicionar uma URL localhost no arquivo .json

  1. Em vários lugares do launch.json arquivo, em cada uma das "url" linhas, role para a direita e observe o comentário: "Forneça a url do seu projeto para concluir a configuração":

    "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

    Exemplos típicos:

    • http://localhost:8080
    • http://127.0.0.1:8080
    • http://10.0.1.8:8080

    URLs semelhantes são mostradas na linha de comando quando você inicia um servidor inserindo npx http-server.

  2. Cole o caminho dentro da cadeia de caracteres de caminho entre aspas em uma das "url" cadeias de caracteres. Por exemplo:

    "url": "http://localhost:8080", // Provide your project's url to finish configuring

    A cadeia de caracteres de URL pode ser um caminho de arquivo local, embora nesse caso, você não precise de um launch.json arquivo; para iniciar o DevTools, basta clicar com o botão direito do mouse em um .html arquivo no Explorer do Visual Studio Code.

    (Se você mantiver a URL como está, a página padrão , Success será exibida e você poderá colar uma URL localhost ou um caminho de arquivo na barra de endereços da guia Edge DevTools: Navegador .)

  3. Copie e cole a linha de URL modificada para os outros locais do launch.json arquivo. Para modificar todas as instâncias ao mesmo tempo, você pode copiar uma cadeia de caracteres de URL atualizada e selecionar uma instância da cadeia de caracteres de URL inicial, pressionar Ctrl+Shift+L para selecionar todas as instâncias e colar a cadeia de caracteres atualizada.

  4. Salve o launch.json arquivo.

Continue abaixo.

Clique no botão Iniciar Projeto

  1. Em Visual Studio Code, na Barra de Atividades, clique no botão Ferramentas do Microsoft Edge (ícone ferramentas do Microsoft Edge). O painel Ferramentas do Microsoft Edge é aberto, agora contendo um botão Iniciar Projeto (em vez de um botão Instância de Lançamento ) e não contém mais um botão Gerar launch.json arquivo :

    Painel de destinos quando um arquivo launch.json existe

  2. Clique no botão Iniciar Projeto .

    A guia DevTools do Edge e a guia Edge DevTools: Browser são abertas em painéis separados, mostrando a URL do aplicativo Web especificada em launch.json:

    O aplicativo de demonstração a fazer iniciado no botão DevTools by Launch Project

Veja também:

Mapeando arquivos de URL para a pasta aberta

Se o DevTools for capaz de correlacionar e estabelecer o mapeamento do workspace entre os arquivos baixados do servidor e os arquivos na pasta aberta, o DevTools fornecerá sua funcionalidade completa, incluindo o CSS espelho edição de seus arquivos de origem local quando você altera o CSS no DevTools.

Se DevTools não conseguir mapear os arquivos na guia Edge DevTools: Navegador para os arquivos na pasta que você abriu no Explorer do Visual Studio Code, você poderá inspecionar páginas da Web e alterá-los, como alterar valores CSS na guia Fontes da ferramenta Elementos na guia Edge DevTools. Nesse caso, porém, você não pode usar o CSS espelho edição, porém, para que o DevTools edite automaticamente seus arquivos de origem. As opções são:

  • Desmarque a caixa de seleção de edição do CSS espelho na guia Estilos e continue experimentando as alterações do CSS.

  • Abra uma pasta que contém arquivos de origem que correspondam à página da Web.

  • Conceda confiança a uma pasta abrindo-a em Visual Studio Code.

Por exemplo:

  1. Abra uma pasta que está na cópia local do repositório Demos, como , conforme C:\Users\username\Documents\GitHub\Demos\demo-to-do\descrito em Introdução usando a extensão DevTools para Visual Studio Code.

  2. Abra DevTools, conforme descrito acima.

  3. Na guia DevTools do Edge: Navegador , na barra de endereços, cole uma URL remota github.io , como https://microsoftedge.github.io/Demos/demo-to-do/.

    Os arquivos nesse endereço realmente residem como arquivos de origem no GitHub em https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do, não em sua unidade.

    Agora você pode alterar os valores do CSS na ferramenta Elements, pois no Explorer do Visual Studio Code, uma pasta é aberta que contém arquivos de origem que o DevTools é capaz de mapear para os arquivos de recursos baixados que constituem a página da Web:

    Capaz de alterar valores CSS se uma pasta mappable estiver aberta

    A imagem acima mostra o uso da guia Estilos com a caixa de seleção de edição do CSS espelho selecionada, usada para ampliar o texto do corpo para 24pt. A guia Edge DevTools: Browser renderiza a página à medida que você altera o valor. A barra de endereços da guia contém uma URL em vez de um caminho de arquivo. Como o CSS espelho caixa de seleção de edição selecionada e o arquivo correspondente .css é encontrado em uma pasta local gravável, o .css arquivo na unidade local é editado automaticamente para 24pt;.

Evitando mensagens de erro sobre espelhamento ou mapeamento

Em seguida, tente alterar o CSS sem que uma pasta correspondente seja aberta:

  1. SelecionePasta fechararquivo>.

  2. Inicie DevTools clicando no botão Iniciar Instância , conforme descrito acima.

  3. Na guia DevTools do Edge: Navegador , na barra de endereços, cole uma URL remota github.io , como https://microsoftedge.github.io/Demos/demo-to-do/.

    Agora que a pasta que contém arquivos de origem é fechada, se você tentar alterar os valores do CSS na ferramenta Elementos , você receberá uma mensagem de erro DevTools. Você pode inspecionar páginas da Web, mas não editá-las. Você pode interagir com a página e vê-la em diferentes dispositivos e estados de renderização usando a barra de ferramentas Emulação de Dispositivo na parte inferior da guia DevTools do Edge: Navegador .

    Você também pode inspecionar o CSS e o HTML. Mas se você tentar alterar a página, você receberá um erro, como Erro ao espelhar:

    Explorer quando não for possível alterar os valores do CSS se uma pasta mappable não estiver aberta

    Como outra perspectiva sobre esse cenário, aqui está a Barra Lateral ferramentas do Microsoft Edge quando o botão Instância de Inicialização foi clicado, ao exibir uma URL e uma pasta não está aberta que contém arquivos de origem que correspondem aos recursos da página da Web da URL:

    Barra lateral ferramentas do Microsoft Edge ao exibir uma URL

As opções nesse caso incluem:

  • Desmarque a caixa de seleção CSS espelho edição na guia Estilos e continue experimentando com alterações de CSS (sem edição automática de CSS em arquivos de origem). Isso impede mais mensagens de erro sobre mapeamento para arquivos de origem para edição de espelho CSS.

  • Abra uma pasta que contém arquivos de origem que correspondam à página da Web para ter a edição automática do CSS em arquivos de origem.

  • Conceda confiança a uma pasta abrindo-a em Visual Studio Code, caso DevTools esteja tentando editar um arquivo de origem, mas Visual Studio Code não concedeu confiança à pasta contendo.

Veja também:

URLs, caminhos de arquivo e abertura de uma pasta correspondente

Em alguns casos, o comportamento de DevTools é diferente para caminhos de arquivo do que para URLs.

  • Se você inserir um caminho de arquivo na barra de endereços do navegador DevTools e editar o CSS em DevTools, o navegador saberá onde encontrar os arquivos de origem. Talvez seja necessário abrir essa pasta para conceder confiança a ela, para poder usar o CSS espelho edição. Ou desmarque a caixa de seleção de edição espelho CSS.

  • Se você inserir uma URL na barra de endereços do navegador DevTools, o navegador saberá onde localizar a cópia baixada dos arquivos de origem, se você estiver apenas inspecionando páginas da Web e experimentando o CSS. Se você quiser usar o CSS espelho edição (para que DevTools edite CSS em arquivos de origem), a caixa de seleção de edição do CSS espelho deve ser selecionada e você deve abrir uma pasta no Visual Studio Code contendo arquivos de origem que correspondam à página da Web.

Fechando DevTools

Feche instâncias de DevTools usando qualquer uma das seguintes abordagens:

  • Se Visual Studio Code estiver no modo Depuração, clique no botão Parar na barra de ferramentas Depurar ou selecione Executar>Parar Depuração:

    Botão Parar na barra de ferramentas Depuração

    As guias Edge DevTools e Edge DevTools: Navegador fecham.

  • Se a guia DevTools do Edge estiver aberta, clique em Fechar (x) na guia .

  • Se a guia Edge DevTools: Navegador estiver aberta, clique em Fechar (x) na guia .

  • Selecione Ferramentas do Microsoft Edge da Barra de>Atividades. Se a seção Destinos listar quaisquer destinos, passe o mouse no lado direito da instância de destino e clique em Fechar instância (x):

    Fechando DevTools se aberto clicando no botão Iniciar Instância

    Em seguida, o botão Iniciar Instância ou Iniciar Projeto é exibido.

  • SelecionePasta fechararquivo>.

  • Feche a janela Visual Studio Code.

  • Se um navegador externo controlado pela automação foi aberto pela extensão DevTools, feche a janela do navegador externo.

Confira também