Visão geral da ferramenta Fontes

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

Conteúdo detalhado:

• Os painéis Navegador, Editor e Depurador
• Usando o painel Navegador para selecionar arquivos
  • Usando a guia Página para explorar recursos que constroem a página da Web atual
    • Ícones na guia Página
    • Agrupar arquivos por pasta ou como uma lista simples
  • Adicione uma pasta local ao workspace para usar o DevTools para editar arquivos e salvar alterações em disco
  • Usando a guia Substituições para substituir arquivos de servidor por arquivos locais
  • Usando a guia Scripts de conteúdo para extensões do Microsoft Edge
  • Usando a guia Snippets para executar snippets de código JavaScript em qualquer página da Web
  • Usando o Menu de Comando para abrir arquivos
• Usando o painel Editor para exibir ou editar arquivos
  • Editando um arquivo JavaScript
    • Salvar e desfazer
    • Localizar e Substituir
    • Mostrando as alterações feitas
    • As alterações dentro de uma função entram em vigor
  • Reformatar um arquivo JavaScript minificado com pretty-print
  • Mapeando código minificado para o código-fonte para mostrar o código legível
  • Transformações do código-fonte em código front-end compilado
  • Editando CSS
    • Editando CSS usando a guia Estilos na ferramenta Elementos, ao usar a guia Espaço de trabalho da ferramenta Fontes
    • Editando CSS na guia Página ou na guia Espaço de trabalho na ferramenta Fontes
  • Editando um arquivo HTML
  • Indo para uma função ou número de linha
  • Ferramenta de origem rápida, para exibir arquivos de origem ao usar uma ferramenta diferente
• Usando o painel Depurador para depurar código JavaScript
  • A abordagem básica para usar um depurador
  • Vantagens da Inspeção e do Escopo do depurador em relação ao console.log
  • Depurar diretamente do Visual Studio Code
  • Artigos sobre depuração
• Consulte também

Os painéis Navegador, Editor e Depurador

A ferramenta Fontes tem três painéis:

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

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

Para maximizar o tamanho da ferramenta Fontes, desencaixe o DevTools em uma janela separada e, opcionalmente, mova a janela do DevTools para um monitor separado. Consulte Alterar o posicionamento do DevTools (Desencaixar, Encaixar na parte inferior, Encaixar à esquerda).

Para carregar a página da Web de demonstração de depuração mostrada acima, consulte 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 contém as seguintes guias:

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

Os detalhes estão abaixo. Também abaixo: Usando o Menu de Comando para abrir arquivos.

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

A guia Página na ferramenta Fontes exibe os recursos que a página da Web atual usa, como o documento HTML da página da Web, arquivos JavaScript, arquivos CSS ou imagens. Os recursos exibidos na guia Página são organizados em uma árvore que corresponde ao sistema de arquivos ou ao caminho do servidor do qual foram baixados.

Use a guia Página para exibir os recursos que o navegador baixou do servidor ou sistema de arquivos, inspecionar seu conteúdo e depurar o código.

Para exibir um arquivo no painel Editor , selecione-o 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 de janela , juntamente com o rótulo top, representa o quadro principal do documento, que é um quadro HTML:
• O ícone de nuvem representa uma origem:
• O ícone de pasta representa um diretório:
• O ícone de página representa um recurso:

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), clique no botão ... (Mais opções). Um menu é exibido.
2. Marque ou desmarque a opção Agrupar por pasta .

Adicione uma pasta local ao workspace para usar o DevTools para editar arquivos e salvar alterações em disco

Use a guia Workspace na ferramenta Sources para exibir e editar arquivos locais no DevTools. A guia Workspace é útil quando usada em conjunto com um servidor Web local, pois você pode carregar seu site local no Edge e editar seus arquivos de origem no DevTools.

Quando você adiciona uma pasta à guia Workspace , os arquivos e subpastas nessa pasta são exibidos na guia e você pode abrir arquivos para exibi-los e editá-los.

A guia Workspace não mostra os recursos que o navegador baixou para exibir a página da web; a guia Workspace mostra apenas as pastas e os arquivos que estão dentro das pastas locais que você adicionou.

Ao longo do DevTools, um ponto verde "mapeado" aparece em um arquivo para o qual o DevTools conseguiu encontrar um mapeamento entre o arquivo do espaço de trabalho e o recurso da página da Web. Por exemplo, se a página usa uma folha de estilo chamada styles.css e o espaço de trabalho tem um arquivo chamado styles.css, DevTools mapeia os arquivos uns para os outros e exibe um ponto verde "mapeado".

O ponto verde "mapeado" indica que as alterações feitas nos recursos da página da Web serão salvas. Por exemplo, ao fazer uma alteração na guia Estilos da ferramenta Elementos , você está editando a folha de estilos da página da Web (não o arquivo). Se o nome do arquivo CSS mostrado na guia Estilos tiver um ponto verde "mapeado", essa folha de estilo foi mapeada para um arquivo em seu espaço de trabalho e suas alterações não serão perdidas.

Por padrão, quando você edita um arquivo na ferramenta Fontes , as alterações são descartadas quando você atualiza a página da Web. A ferramenta Fontes funciona com uma cópia dos recursos de front-end retornados pelo servidor Web. Quando você modifica esses arquivos de front-end retornados pelo servidor, as alterações não persistem, pois 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 quando você atualiza a página da Web. Com um Workspace, quando você edita o código de 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 espaços de trabalho 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:

• Editar e salvar arquivos em um espaço de trabalho (ferramenta Fontes, guia Espaço de Trabalho)
• Abra uma pasta de demonstração na guia Workspace na ferramenta Fontes em Código de exemplo para DevTools.

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

Use a guia Substituições na ferramenta Fontes para substituir qualquer resposta de um servidor Web por arquivos locais. A guia Substituições é útil para fazer alterações temporárias em arquivos individuais, como um arquivo CSS, em qualquer site. Use Substituições quando quiser experimentar alterações em uma página da Web e precisar manter as alterações depois de atualizar a página da Web, mas não se importa em mapear suas alterações para o código-fonte da página da Web.

Para começar a usar a guia Substituições , crie uma nova pasta no sistema de arquivos e selecione-a na guia Substituições . A partir de então, todas as alterações feitas na guia Estilos da ferramenta Elementos ou na guia Página da ferramenta Fontes são salvas na nova pasta. O DevTools usa os arquivos locais para substituir as respostas correspondentes do servidor.

Consulte também:

• Substituir recursos da página da Web por cópias locais (guia Substituições)
• Mapear o código processado para o código-fonte original, para depuração
• Atalhos de teclado da ferramenta Fontes em Atalhos de teclado

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 todos os scripts de conteúdo que foram carregados por uma extensão do Microsoft Edge que você instalou.

Quando o depurador entra em um código que você não reconhece, convém adicionar esse código à Lista de Ignorados, para evitar entrar nesse código. Consulte Adicionar scripts de conteúdo à lista de ignorados.

Consulte também:

• Scripts de conteúdo
• Exemplo: Inseridor de imagem usando script de conteúdo

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.

Por exemplo, suponha que você insira frequentemente o seguinte código no Console para inserir a biblioteca do jQuery em uma página para que possa executar comandos do jQuery a partir do 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 trecho 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 Trechos e , em seguida, selecione o arquivo de trechos para abri-lo. Em seguida, na parte inferior do painel Editor, clique no botão Executar ().
• Quando o DevTools estiver em foco, pressione Ctrl+P (Windows, Linux) ou Command+P (macOS) para abrir o Menu de Comando e digite !.

Os snippets são semelhantes aos bookmarklets.

Consulte também:

• Executar trechos do JavaScript em qualquer página da Web

Usando o Menu de Comando para abrir arquivos

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

• Em qualquer lugar no 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 , clique no botão Mais opções (...) e selecione Abrir arquivo.

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

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

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

Usando o painel Editor para exibir ou editar arquivos

Use o painel Editor para exibir ou editar arquivos, incluindo JavaScript, HTML, CSS e arquivos de imagem. O painel Editor exibe o conteúdo de qualquer arquivo selecionado em qualquer uma das guias do painel Navegador :

• Page
• Espaço de trabalho
• Substituições
• Scripts de conteúdo
• Trechos de código

Por exemplo, o painel Editor pode mostrar:

• O conteúdo de um trecho.
• O conteúdo de um arquivo do Workspace que não é realmente usado no código de front-end (porque o Workspace permite editar o conteúdo de qualquer pasta desejada).

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

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 Adicionar uma pasta local ao espaço de trabalho para usar o DevTools para editar arquivos e salvar alterações em disco, acima.

As seguintes subseções abrangem o painel Editor:

• Editando um arquivo JavaScript
• Reformatar um arquivo JavaScript minificado com pretty-print
• Mapeando código minificado para o código-fonte para mostrar o código legível
• Transformações do código-fonte em código front-end compilado
• Editando CSS na guia Página ou na guia Espaço de trabalho na ferramenta Fontes
• Editando um arquivo HTML
• Indo para uma função ou número de linha
• Ferramenta de origem rápida, para exibir arquivos de origem ao usar uma ferramenta diferente

Consulte também:

• Abra uma pasta de demonstração na guia Workspace na ferramenta Fontes em Código de exemplo para DevTools.

Editando um arquivo JavaScript

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

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 do DevTools, selecione Personalizar e controlar o DevTools(...) e, em seguida, selecione Abrir arquivo.

Consulte também:

• Abra uma pasta de demonstração na guia Workspace na ferramenta Fontes em Código de exemplo para DevTools.

Salvar e desfazer

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

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

• Para salvar as 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 e salvar arquivos em um espaço de trabalho (guia Espaço de trabalho da ferramenta Fontes).

Localizar e Substituir

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

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

Mostrando as alterações feitas

Quando você define um Workspace, as alterações no JavaScript são salvas e ficam visíveis na ferramenta Alterações .

Para revisar as alterações feitas em um arquivo, clique com o botão direito do mouse no painel Editor e selecione Modificações Locais.

O painel Visualização Rápida é aberto na parte inferior do DevTools, mostrando suas alterações na guia Alterações .

Consulte também:

• Acompanhar as alterações nos arquivos usando a ferramenta Alterações
• Exibir ou editar arquivos de origem usando a ferramenta Fonte rápida

As alterações dentro de uma função entram em vigor

Quando você define um Workspace, as alterações dentro de um corpo de função JavaScript entram em vigor.

O DevTools não executa novamente um script, portanto, as únicas alterações do JavaScript que entram em vigor são as alterações feitas nas funções. Por exemplo, na figura a seguir, adicionamos o seguinte código ao JavaScript retornado pelo servidor:

• Adicionamos a instrução console.log('A') fora de qualquer função.
• Adicionamos a instrução console.log('B') dentro de uma onClick função. Em seguida, salvamos as alterações, inserimos números no formulário e selecionamos o botão de formulário para enviar o formulário.

Depois de enviar o formulário, console.log('A')o , que está em escopo global, não é executado, mas console.log('B'), dentro de uma onClick função, é executado, enviando B para o Console:

Reformatar um arquivo JavaScript minificado com pretty-print

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

Para reverter o arquivo para seu estado original de menor importância, clique no botão Imprimir bonita (), que é mostrado como chaves, na parte inferior do painel Editor.

Para obter mais informações, consulte Reformatar um arquivo JavaScript minificado com pretty-print.

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

Os mapas de origem de pré-processadores fazem com que o DevTools carregue seus arquivos de origem JavaScript originais, além de seus arquivos JavaScript minificados e transformados que são retornados pelo servidor. Em seguida, exiba seus arquivos de origem originais enquanto define os pontos de interrupção e percorre o código. Enquanto isso, o Microsoft Edge está, na verdade, 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 de URL do 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, reduzi-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 em código front-end compilado

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

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

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

Editando CSS

Há dois locais para editar regras CSS e suas propriedades no DevTools:

• Na guia Estilos da ferramenta Elementos , edite as propriedades CSS por meio dos controles da interface do usuário.

• Na guia Página ou na guia Espaço de trabalho na ferramenta Fontes , use o editor de texto para editar um arquivo CSS.

Editando CSS usando a guia Estilos na ferramenta Elementos, ao usar a guia Espaço de trabalho da ferramenta Fontes

Consulte também:

• Limitações do recurso de espaço de trabalho com código-fonte transformado

Editando CSS na guia Página ou na guia Espaço de trabalho na ferramenta Fontes

A guia Página ou Espaço de trabalho na ferramenta Fontes dá suporte à edição direta de um arquivo CSS. Por exemplo, se você editar o arquivo CSS do tutorial Editar e salvar arquivos em um espaço de trabalho (ferramenta Fontes, guia Espaço de trabalho) para corresponder à regra de estilo abaixo, o H1 elemento no canto superior esquerdo da página da Web renderizada mudará para verde:

h1 {
  color: green;
}

As alterações de CSS entram em vigor imediatamente; Não é necessário salvar manualmente as alterações.

Consulte também:

• Introdução à exibição e alteração do CSS.
• Atalhos de teclado da ferramenta Fontes em Atalhos de teclado
• Abra uma pasta de demonstração na guia Workspace na ferramenta Fontes em Código de exemplo para DevTools.

Editando um arquivo HTML

Há duas maneiras de editar HTML no 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.

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 Espaço de trabalho ou na guia Substituições . Confira estas subseções do artigo atual:

• Adicione uma pasta local ao workspace para usar o DevTools para editar arquivos e salvar alterações em disco
• Usando a guia Substituições para substituir arquivos de servidor por arquivos locais

Para salvar as 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:

• Abra uma pasta de demonstração na guia Workspace na ferramenta Fontes em Código de exemplo para DevTools.

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

Para ir para um número de linha ou símbolo (como um nome de função) no arquivo que é 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:

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

Ferramenta de origem rápida, para exibir arquivos de origem ao usar uma ferramenta diferente

O local principal para exibir arquivos de origem no DevTools é na ferramenta Fontes . Mas, às vezes, você precisa acessar outras ferramentas, como o Elements ou o Console, ao exibir ou editar os arquivos de origem. Você usa a ferramenta Fonte rápida no painel Visualização rápida na parte inferior do DevTools.

Para usar a ferramenta Fonte rápida :

1. Na Barra de Atividades na parte superior do DevTools, 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.

   O painel Visualização Rápida é aberto na parte inferior do DevTools, com a ferramenta Fonte rápida selecionada. A ferramenta Fonte rápida exibe os mesmos arquivos que estão abertos na ferramenta Fontes , em 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.

Consulte também:

• Exibir ou editar arquivos de origem usando a ferramenta Fonte rápida
• Acompanhar as alterações nos arquivos usando a ferramenta Alterações

Usando o painel Depurador para depurar código JavaScript

Use o depurador JavaScript para percorrer o código JavaScript retornado pelo servidor. O depurador inclui o painel Depurador , juntamente com os pontos de interrupção definidos em linhas de código no painel Editor .

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

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

• Definindo pontos de interrupção, para pausar o código.
• Passo a passo do código.
• Exibir e editar 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é o momento).

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

As subseções a seguir abordam a depuração:

• A abordagem básica para usar um depurador
• Vantagens da Inspeção e do Escopo do depurador em relação ao console.log
• Depurar diretamente do Visual Studio Code
• Artigos sobre 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. Na verdade, o uso de um depurador pode ser mais simples do que , uma vez que console.log()você esteja familiarizado com a abordagem do 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 página da Web Depuração do JavaScript com o 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 do DevTools é aberta, ao lado da página da Web de demonstração.

3. No DevTools, selecione a guia Fontes .

4. No painel Navegador (à esquerda), selecione a guia Página e, em seguida, 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, e clique no 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 de pausa, para que você possa inspecionar os valores das propriedades que estão no escopo e percorrer o código.

   

   Na figura acima, adicionamos as expressões sum Watch e typeof sum, e passamos 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 Inspeção . Essas expressões são as mesmas 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 no painel Visualização Rápida na parte inferior do DevTools, pressione Esc.

8. Percorra 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 strings em números.

9. Para corrigir o bug, atualize a página para redefinir o formulário da página da Web e, em seguida, 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. Digite 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:

• Atalhos de teclado da ferramenta Fontes em Atalhos de teclado
• Introdução à depuração do JavaScript – um tutorial usando uma página da Web simples existente que contém alguns controles de formulário.

Vantagens da Inspeção e do Escopo do depurador em relação ao 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, onde sum está no escopo.

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

• Definindo as expressões sumWatch e typeof sum no painel Depurador.

Quando a variável sum está no escopo, sum seus valores são mostrados automaticamente na seção Escopo do painel Depurador e também são sobrepostos no painel Editor onde 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 ricos e flexíveis do que uma console.log instrução. Por exemplo, no depurador, à medida que você percorre o código, pode exibir e alterar os valores de todas as propriedades e variáveis definidas no momento. Você também pode emitir instruções JavaScript no Console, como alterar valores em uma matriz que esteja no escopo. (Para mostrar o Console, pressione Esc.)

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

Depurar diretamente do Visual Studio Code

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

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

Para obter mais informações, consulte Visual Studio Code para desenvolvimento na Web e a página Leiame do GitHub, Microsoft Edge Developer Tools para Visual Studio Code.

Artigos sobre depuração

Os artigos a seguir abordam o painel Depurador e os pontos de interrupção:

• Introdução à depuração do JavaScript - Um tutorial (com capturas de tela), usando um projeto simples existente.

• Recursos de depuração do JavaScript – como usar o depurador para definir pontos de interrupção, percorrer o código, exibir e modificar valores de variáveis, observar expressões JavaScript e exibir a pilha de chamadas.

• Pausar seu código com pontos de interrupção – Como definir pontos de interrupção básicos e especializados no depurador.

Consulte também

• Abra uma pasta de demonstração na guia Workspace na ferramenta Fontes em Código de exemplo para DevTools.
• Atalhos de teclado da ferramenta Fontes em Atalhos de teclado.
• Exibir ou editar arquivos de origem usando a ferramenta Fonte rápida
• Acompanhar as alterações nos arquivos usando a ferramenta Alterações

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.