Visão geral da ferramenta Fontes

  • Artigo

Use a ferramenta Fontes para exibir, modificar e depurar o código JavaScript de front-end e inspecionar os recursos que compõem a página da Web atual.

Conteúdo detalhado:

Os painéis Navegador, Editor e Depurador

A ferramenta Fontes tem três painéis:

Painel Ações
Painel navegador Navegue entre os recursos retornados do servidor para construir a página da Web atual. Selecione arquivos, imagens e outros recursos e exiba seus caminhos. Opcionalmente, configure um Workspace local para salvar alterações diretamente nos arquivos de origem.
Painel editor Exibir JavaScript, HTML, CSS e outros arquivos que são retornados do servidor. Faça edições experimentais no JavaScript ou no CSS. Suas alterações serão preservadas até que você atualize a página ou seja preservado após a atualização da página se você salvar em um arquivo local com Workspaces. Ao usar Workspaces ou Substituições, você também pode editar arquivos HTML.
Painel de depurador Use o Depurador JavaScript para definir pontos de interrupção, pausar a execução do JavaScript e passar pelo código, incluindo todas as edições que você fez, enquanto assiste a qualquer expressão JavaScript especificada. Observe e altere manualmente os valores de variáveis que estão no escopo da linha de código atual.

A figura a seguir mostra o painel Navegador realçado com uma caixa vermelha no canto superior esquerdo de DevTools, o painel Editor realçado no canto superior direito e o painel Depurador realçado na parte inferior. No lado esquerdo, está a main parte da janela do navegador, mostrando a página da Web renderizada em cinza porque o depurador está pausado em um ponto de interrupção:

Os painéis da ferramenta Fontes, em layout estreito

Quando DevTools é largo, o painel Depurador é colocado à direita e inclui Escopo e Observação:

Navegar, exibir, editar e depurar JavaScript retornado pelo servidor

Para maximizar o tamanho da ferramenta Sources, desencaixe DevTools em uma janela separada e, opcionalmente, mova a janela DevTools para um monitor separado. Consulte Alterar a colocação de DevTools (Undock, Doca para baixo, Encaixe para a esquerda).

Para carregar a página da Web de demonstração de depuração mostrada acima, confira A abordagem básica para usar um depurador, abaixo.

Usando o painel Navegador para selecionar arquivos

Use o painel Navegador (à esquerda) para navegar entre os recursos retornados do servidor para construir a página da Web atual. Selecione arquivos, imagens e outros recursos e exiba seus caminhos.

O painel Navegador

Para acessar as guias ocultas do painel Navegador, clique no botão Mais guias (Mais guias).

As subseções a seguir abrangem o painel Navegador:

Usando a guia Página para explorar recursos que constroem a página da Web atual

Use a guia Página do painel Navegador para explorar o sistema de arquivos retornado do servidor para construir a página da Web atual. Selecione um arquivo JavaScript para exibir, editar e depurá-lo. A guia Página lista todos os recursos carregados pela página.

A guia Página no painel Navegador da ferramenta Fontes

Para exibir um arquivo no painel Editor , selecione um arquivo na guia Página . Para uma imagem, uma visualização da imagem é exibida.

Para exibir a URL ou o caminho de um recurso, passe o mouse sobre o recurso.

Para carregar um arquivo em uma nova guia do navegador ou para exibir outras ações, clique com o botão direito do mouse no nome do arquivo.

Ícones na guia Página

A guia Página usa os seguintes ícones:

  • O ícone da janela, juntamente com o rótulo top, representa o quadro de documento main, que é um quadro HTML: o ícone da janela
  • O ícone de nuvem representa uma origem: o ícone de nuvem
  • O ícone da pasta representa um diretório: o ícone da pasta
  • O ícone da página representa um recurso: o ícone da página
Agrupar arquivos por pasta ou como uma lista simples

A guia Página exibe arquivos ou recursos agrupados por servidor e diretório ou como uma lista simples.

Para alterar a forma como os recursos são agrupados:

  1. Ao lado das guias no painel Navegador (à esquerda), selecione o botão ... (Mais opções). Um menu é exibido.
  2. Selecione ou desmarque a opção Grupo por pasta .

Usando a guia Sistema de Arquivos para definir um Workspace local

Use a guia Sistema de Arquivos do painel Navegador para adicionar arquivos a um Workspace, para que as alterações feitas em DevTools sejam salvas no sistema de arquivos local.

A guia Sistema de Arquivos, para um Workspace

Por padrão, quando você edita um arquivo na ferramenta Fontes, suas alterações são descartadas quando você atualiza a página da Web. A ferramenta Sources funciona com uma cópia dos recursos front-end que são retornados pelo servidor Web. Quando você modifica esses arquivos front-end retornados pelo servidor, as alterações não persistem, porque você não alterou os arquivos de origem. Você também precisa aplicar suas edições no código-fonte real e, em seguida, implantar novamente no servidor.

Por outro lado, quando você usa um Workspace, as alterações feitas no código de front-end são preservadas ao atualizar a página da Web. Com um Workspace, quando você edita o código front-end retornado pelo servidor, a ferramenta Fontes também aplica suas edições ao código-fonte local. Em seguida, para que outros usuários vejam suas alterações, você só precisa reimplantar seus arquivos de origem alterados no servidor.

Os workspaces funcionam bem quando o código JavaScript retornado pelo servidor é o mesmo que o código-fonte javaScript local. Os workspaces não funcionam tão bem quando o fluxo de trabalho envolve transformações no código-fonte, como minificação ou compilação typeScript .

Consulte também:

Usando a guia Substituições para substituir arquivos de servidor com arquivos locais

Use a guia Substituições do painel Navegador para substituir ativos de página (como imagens) com arquivos de uma pasta local.

Os itens nesta guia substituem o que o servidor envia para o navegador, mesmo depois de o servidor ter enviado os ativos.

A guia Substituições do painel Navegador

O recurso Substituições é semelhante aos Workspaces. Use Substituições quando quiser experimentar alterações em uma página da Web e você precisa manter as alterações depois de atualizar a página da Web, mas não se importa em mapear suas alterações no código-fonte da página da Web.

Um arquivo que substitui um arquivo retornado pelo servidor é indicado por um ponto roxo ao lado do nome do arquivo, em DevTools.

Consulte também:

Usando a guia Scripts de conteúdo para extensões do Microsoft Edge

Use a guia Scripts de conteúdo do painel Navegador para exibir os scripts de conteúdo carregados por uma extensão do Microsoft Edge que você instalou.

A guia Scripts de conteúdo do painel Navegador

Quando o depurador entra no código que você não reconhece, talvez você queira adicionar esse código à Lista de Ignorar, para evitar entrar nesse código. Consulte Adicionar scripts de conteúdo à Lista de Ignorar.

Consulte também:

Usando a guia Snippets para executar snippets de código JavaScript em qualquer página da Web

Use a guia Snippets do painel Navegador para criar e salvar snippets de código JavaScript, para que você possa executar facilmente esses snippets em qualquer página da Web.

Um Snippet que insere a biblioteca jQuery em uma página da Web

Por exemplo, suponha que você insira frequentemente o seguinte código no Console para inserir a biblioteca jQuery em uma página para que você possa executar comandos jQuery no Console:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Em vez disso, você pode salvar esse código em um Snippet e executá-lo facilmente sempre que precisar. Quando você pressiona Ctrl+S (Windows, Linux) ou Command+S (macOS), o DevTools salva o Snippet no sistema de arquivos.

Há várias maneiras de executar um Snippet:

  • No painel Navegador , selecione a guia Snippets e selecione o arquivo snippets para abri-lo. Em seguida, na parte inferior do painel Editor, selecione Executar (o botão Executar).
  • Quando DevTools tiver foco, pressione Ctrl+P (Windows, Linux) ou Command+P (macOS) para abrir o Menu de Comando e digite !.

Snippets são semelhantes a indicadores.

Consulte também:

Usando o Menu de Comando para abrir arquivos

Para abrir um arquivo, além de usar o painel Navegador dentro da ferramenta Fontes , você pode usar o Menu de Comando de qualquer lugar dentro do DevTools.

  • De qualquer lugar em DevTools, pressione Ctrl+P no Windows/Linux ou Command+P no macOS. O Menu de Comando é exibido e lista todos os recursos que estão nas guias do painel Navegador da ferramenta Fontes .
  • Ou, ao lado das guias do painel Navegador na ferramenta Fontes , selecione o botão ... (Mais opções) e selecione Abrir Arquivo.

Para exibir e escolher em uma lista de todos os arquivos .js, digite .js.

Abrindo um arquivo usando o Menu de Comando

Se você digitar ?, o Menu de Comando mostrará vários comandos, incluindo ... Abra o arquivo. Se você pressionar o Backspace para limpar o Menu de Comando, uma lista de arquivos será mostrada.

Para obter mais informações, confira Executar comandos com o Menu de Comando do Microsoft Edge DevTools.

Usando o painel Editor para exibir ou editar arquivos

Use o painel Editor para exibir os arquivos front-end retornados do servidor para compor a página da Web atual, incluindo JavaScript, HTML, CSS e arquivos de imagem. Quando você edita os arquivos front-end no painel Editor , o DevTools atualiza a página da Web para executar o código modificado.

O painel Editor na ferramenta Fontes

O painel Editor tem o seguinte nível de suporte para vários tipos de arquivo:

Tipo de Arquivo Ações com suporte
JavaScript Exibir, editar e depurar.
CSS Exibir e editar.
HTML Exibir e editar.
Images Exibir.

Por padrão, as edições são descartadas quando você atualiza a página da Web. Para obter informações sobre como salvar as alterações no sistema de arquivos, consulte Usando a guia Sistema de Arquivos para definir um Workspace local, acima.

As subseções a seguir abrangem o painel Editor:

Consulte também:

Editando um arquivo JavaScript

Para editar um arquivo JavaScript em DevTools, use o painel Editor , na ferramenta Fontes .

Editando JavaScript no painel Editor

Para carregar um arquivo no painel Editor, use a guia Página no painel Navegador (à esquerda). Ou use o Menu de Comando da seguinte maneira: no canto superior direito de DevTools, selecione Personalizar e controlar DevTools (...) e selecione Abrir Arquivo.

Consulte também:

Salvar e Desfazer

Para que as alterações javaScript entrem em vigor, pressione Ctrl+S (Windows, Linux) ou Command+S (macOS).

Se você alterar um arquivo, um asterisco será exibido ao lado do nome do arquivo.

  • Para salvar alterações, pressione Ctrl+S no Windows/Linux ou Command+S no macOS.
  • Para desfazer uma alteração, pressione Ctrl+Z no Windows/Linux ou Command+Z no macOS.

Por padrão, suas edições são descartadas quando você atualiza a página da Web. Para obter mais informações sobre como salvar as alterações no sistema de arquivos local, consulte Editar arquivos com Workspaces (guia Sistema de arquivos).

Localizar e Substituir

Para localizar o texto no arquivo atual, selecione o painel Editor para dar-lhe foco e pressione Ctrl+F no Windows/Linux ou Command+F no macOS.

Localizar e Substituir, no painel Editor da ferramenta Fontes

Para localizar e substituir o texto, selecione o botão Substituir (A-B>) à esquerda da caixa de texto Localizar. O botão Substituir (A-B>) é exibido ao exibir um arquivo editável.

Reformatar um arquivo JavaScript minificado com uma impressão bonita

Os arquivos minificados são automaticamente reformatados quando você os abre no painel Editor.

Para reverter o arquivo ao seu estado minificado original, clique no botão Impressão bonita (Format), que é mostrado como chaves, na parte inferior do painel Editor.

O botão Impressão Bonita

Para obter mais informações, consulte Reformat um arquivo JavaScript minificado com uma impressão bonita.

Mapear código minificado para o código-fonte para mostrar código legível

Mapas de origem de pré-processadores fazem com que o DevTools carregue seus arquivos de origem JavaScript originais, além dos arquivos JavaScript modificados e modificados que são retornados pelo servidor. Em seguida, você exibe seus arquivos de origem originais enquanto define pontos de interrupção e passa por código. Enquanto isso, o Microsoft Edge está realmente executando seu código minificado.

No painel Editor , se você clicar com o botão direito do mouse em um arquivo JavaScript e selecionar Adicionar mapa de origem, uma caixa pop-up será exibida, com uma caixa de texto URL de mapa de origem e um botão Adicionar .

A abordagem de mapeamento de origem mantém seu código de front-end legível e depurável mesmo depois de combiná-lo, minificá-lo ou compilá-lo. Para obter mais informações, consulte Mapear o código processado para o código-fonte original, para depuração.

Transformações do código-fonte para o código de front-end compilado

Se você usar uma estrutura que transforma seus arquivos JavaScript, como React, o JavaScript de origem local poderá ser diferente do JavaScript de front-end retornado pelo servidor. Não há suporte para workspaces nesse cenário, mas há suporte para mapeamento de código-fonte nesse cenário.

Em um ambiente de desenvolvimento, seu servidor pode incluir seus mapas de origem e seus arquivos originais .ts ou .jsx para React. A ferramenta Fontes exibe esses arquivos, mas não permite que você edite esses arquivos. Quando você define pontos de interrupção e usa o depurador, o DevTools exibe seus arquivos originais .ts ou .jsx , na verdade, percorre a versão minificada de seus arquivos JavaScript.

Nesse cenário, a ferramenta Sources é útil para inspecionar e percorrer o JavaScript de front-end transformado que é retornado do servidor. Use o depurador para definir expressões de relógio e use o Console para inserir expressões JavaScript para manipular dados que estão no escopo.

Editando um arquivo CSS

Há duas maneiras de editar o CSS em DevTools:

  • Na ferramenta Elementos , você trabalha com uma propriedade CSS por vez, por meio de controles de interface do usuário. Essa abordagem é recomendada na maioria dos casos. Para obter mais informações, consulte Introdução à exibição e alteração do CSS.
  • Na ferramenta Fontes , você usa um editor de texto para editar arquivos CSS.

A ferramenta Sources dá suporte à edição direta de um arquivo CSS. Por exemplo, se você editar o arquivo CSS do tutorial Editar arquivos com Workspaces (guia Sistema de Arquivos) para corresponder à regra de estilo abaixo, o H1 elemento no canto superior esquerdo da página da Web renderizada será alterado para verde:

h1 {
  color: green;
}

Editar CSS no painel Editor para alterar a cor do texto do título H1 para verde

As alterações do CSS entrarão em vigor imediatamente; você não precisa salvar manualmente as alterações.

Consulte também:

Editando um arquivo HTML

Há duas maneiras de editar HTML em DevTools:

  • Na ferramenta Elementos , você trabalha com um elemento HTML por vez, por meio de controles de interface do usuário.
  • Na ferramenta Fontes , você usa um editor de texto.

O editor HTML da ferramenta Sources

Ao contrário de um arquivo JavaScript ou CSS, um arquivo HTML retornado pelo servidor Web não pode ser editado diretamente na ferramenta Fontes. Para editar um arquivo HTML usando o Editor da ferramenta Fontes, o arquivo HTML deve estar em um Workspace ou na guia Substituições . Confira estas subseções do artigo atual:

Para salvar alterações, pressione Ctrl+S no Windows/Linux ou Command+S no macOS. Um arquivo editado é marcado por um asterisco.

Para localizar texto, pressione Ctrl+F no Windows/Linux ou Command+F no macOS.

Para desfazer uma edição, pressione Ctrl+Z no Windows/Linux ou Command+Z no macOS.

Para exibir outros comandos durante a edição de um arquivo HTML, no painel Editor, clique com o botão direito do mouse no arquivo HTML.

Consulte também:

Indo para um número de linha ou função

Para ir para um número de linha ou símbolo (como um nome de função) no arquivo que está aberto no painel Editor, você pode usar o Menu de Comando, em vez de rolar pelo arquivo.

  1. No painel Navegador , selecione as reticências (...) (Mais opções) e selecione Abrir Arquivo. O Menu de Comando é exibido.
  2. Digite um dos seguintes caracteres:
Caractere Nome do comando Finalidade
: Ir para a linha Vá para um número de linha.
@ Ir para o símbolo Vá para uma função. Quando você digita @, o Menu de Comando lista as funções encontradas no arquivo JavaScript que está aberto no painel Editor.

Para obter mais informações, confira Executar comandos com o Menu de Comando do Microsoft Edge DevTools.

Exibindo arquivos de origem ao usar uma ferramenta diferente

O main local para exibir arquivos de origem no DevTools está dentro da ferramenta Fontes. Mas às vezes você precisa acessar outras ferramentas, como Elementos ou Console, ao exibir ou editar seus arquivos de origem. Você usa a ferramenta de origem rápida na Gaveta, que aparece na parte inferior do DevTools.

Para usar a ferramenta de origem rápida :

  1. Selecione uma ferramenta diferente da ferramenta Fontes , como a ferramenta Elementos .

  2. Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS). O Menu de Comando é aberto.

  3. Digite rápido e selecione Mostrar Fonte Rápida.

    Na parte inferior da janela DevTools, a Gaveta é exibida, com a ferramenta de origem rápida selecionada. A ferramenta de origem rápida contém o último arquivo que você editou na ferramenta Fontes , dentro de uma versão compacta do editor de código DevTools.

  4. Pressione Ctrl+P (Windows, Linux) ou Command+P (macOS) para abrir a caixa de diálogo Abrir Arquivo .

Usando o painel Depurador para depurar o código JavaScript

Use o depurador JavaScript para passar pelo código JavaScript retornado pelo servidor. O depurador inclui o painel Depurador , juntamente com pontos de interrupção que você define em linhas de código no painel Editor .

Com o depurador, você passa pelo código enquanto observa todas as expressões JavaScript especificadas. Observe e altere manualmente os valores de variáveis e mostre automaticamente quais variáveis estão no escopo da instrução atual.

O painel Depurador da ferramenta Fontes

O depurador dá suporte a ações de depuração padrão, como:

  • Configurando pontos de interrupção, para pausar o código.
  • Passando pelo código.
  • Exibindo e editando propriedades e variáveis.
  • Observando os valores das expressões JavaScript.
  • Exibindo a pilha de chamadas (a sequência de chamadas de função até agora).

O depurador em DevTools foi projetado para parecer, sentir e funcionar como o depurador em Visual Studio Code e o depurador no Visual Studio.

As seguintes subseções abrangem a depuração:

A abordagem básica para usar um depurador

Para solucionar problemas de código JavaScript, você pode inserir console.log() instruções em seu código. Outra abordagem mais poderosa é usar o depurador do Microsoft Edge DevTools. Usar um depurador pode realmente ser mais simples do que console.log(), uma vez que você esteja familiarizado com a abordagem de depurador.

Para usar um depurador em uma página da Web, você normalmente define um ponto de interrupção e, em seguida, envia um formulário da página da Web da seguinte maneira:

  1. Abra a Demonstração: Introdução à depuração do JavaScript com a página da Web do Microsoft Edge DevTools em uma nova janela ou guia.

  2. Clique com o botão direito do mouse em qualquer lugar da página da Web e selecione Inspecionar. Ou pressione F12. A janela DevTools é aberta, ao lado da página da Web de demonstração.

  3. Em DevTools, selecione a guia Fontes .

  4. No painel Navegador (à esquerda), selecione a guia Página e selecione o arquivo JavaScript, como get-started.js.

  5. No painel Editor , selecione um número de linha próximo a uma linha de código suspeita para definir um ponto de interrupção nessa linha. Na figura abaixo, um ponto de interrupção é definido na linha var sum = addend1 + addend2;.

  6. Na página da Web, insira valores e envie o formulário. Por exemplo, insira números, como 5 e 1, em seguida, selecione o botão Adicionar Número 1 e Número 2.

    O depurador executa o código JavaScript e, em seguida, pausa no ponto de interrupção. O depurador agora está no modo Pausado, para que você possa inspecionar os valores das propriedades que estão no escopo e passar pelo código.

    Inserindo o modo pausado do depurador

    Na figura acima, adicionamos as expressões sum watch e typeof sum, e pisamos duas linhas além do ponto de interrupção.

  7. Examine os valores no painel Escopo , que mostra todas as variáveis ou propriedades que estão no escopo do ponto de interrupção atual e seus valores.

    Neste ponto, você pode adicionar expressões no painel Relógio . Essas expressões são as mesmas expressões que você escreveria em uma console.log instrução para depurar seu código.

    Para executar comandos JavaScript para manipular dados no contexto atual, use o Console. Se você quiser abrir o console na Gaveta na parte inferior do DevTools, pressione Esc.

  8. Passe o código usando os controles na parte superior do painel Depurador , como Etapa (F9).

    O bug nesta demonstração é que você precisa primeiro converter os dados de entrada de cadeias de caracteres em números.

  9. Para corrigir o bug, atualize a página para redefinir o formulário da página da Web e altere a linha:

    var sum = addend1 + addend2;

    Para:

    var sum = parseInt(addend1) + parseInt(addend2);

  10. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS) para salvar a alteração no arquivo armazenado em cache local.

  11. Insira 5 e 1 na página da Web e clique no botão Adicionar . Agora Escopo>Soma local>: é o número 6, em vez da cadeia de caracteres "51".

Consulte também:

Vantagens do relógio e escopo do depurador no console.log

Essas três abordagens são equivalentes:

  • Adicionando temporariamente as instruções console.log(sum) e console.log(typeof sum) no código, em que sum está no escopo.

  • Emitindo as instruções sum e console.log(typeof sum) no painel Console do DevTools, quando o depurador é pausado em que sum está no escopo.

  • Definindo as expressões sumde relógio e typeof sum no painel Depurador.

Quando a variável sum está no escopo e sum seu valor é mostrado automaticamente na seção Escopo do painel Depurador , e também são sobrepostos no painel Editor em que sum é calculado. Portanto, você provavelmente não precisaria definir uma expressão watch para sum.

O depurador fornece uma exibição e um ambiente mais avançados e flexíveis do que uma console.log instrução. Por exemplo, no depurador, à medida que você passa pelo código, você pode exibir e alterar os valores de todas as propriedades e variáveis definidas atualmente. Você também pode emitir instruções JavaScript no Console, como alterar valores em uma matriz que está no escopo. (Para mostrar o Console, pressione Esc.)

Pontos de interrupção e expressões de relógio são preservados quando você atualiza a página da Web.

Depuração de Visual Studio Code diretamente

Para usar o depurador mais completo de Visual Studio Code em vez do depurador DevTools, use a extensão Microsoft Edge DevTools para Visual Studio Code.

A extensão DevTools do Microsoft Edge para Visual Studio Code

Essa extensão fornece acesso às ferramentas Elementos e Rede do Microsoft Edge DevTools, de dentro do Microsoft Visual Studio Code.

Para obter mais informações, consulte Visual Studio Code para desenvolvimento web e a página Leitura do GitHub, Ferramentas de Desenvolvedor do Microsoft Edge para Visual Studio Code.

Artigos sobre depuração

Os seguintes artigos abrangem o painel de depurador e os pontos de interrupção:

Consulte também

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licença Creative Commons Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.