Compartilhar via

Visão geral da ferramenta Fontes

Utilize a ferramenta Origens para ver, modificar e depurar código JavaScript de front-end e para inspecionar os recursos que compõem a página Web atual.

Conteúdo detalhado:

Os painéis Navegador, Editor e Depurador

A ferramenta Origens tem três painéis:

Painel Ações
Painel Navegador Navegue entre os recursos que são devolvidos do servidor para construir a página Web atual. Selecione ficheiros, imagens e outros recursos e veja os respetivos caminhos. Opcionalmente, configure uma Área de Trabalho local para guardar as alterações diretamente nos ficheiros de origem.
painel Editor Veja JavaScript, HTML, CSS e outros ficheiros que são devolvidos do servidor. Faça edições experimentais para JavaScript ou CSS. As alterações são preservadas até atualizar a página ou são preservadas após a atualização da página se guardar num ficheiro local com Áreas de Trabalho. Quando utiliza Áreas de Trabalho ou Substituições, também pode editar ficheiros HTML.
Painel Depurador Utilize o JavaScript Debugger para definir pontos de interrupção, colocar em pausa a execução de JavaScript e percorrer o código, incluindo as edições que efetuou, enquanto observa quaisquer expressões JavaScript que especificar. Veja e altere manualmente os valores das variáveis que estão no âmbito da linha de código atual.

A figura seguinte mostra o painel Navegador realçado com uma caixa vermelha no canto superior esquerdo das DevTools, o painel Editor realçado no canto superior direito e o painel Depurador realçado na parte inferior. Na extremidade esquerda encontra-se a parte main da janela do browser, que mostra a página Web composta desativada porque o depurador está em pausa num ponto de interrupção:

Os painéis da ferramenta Origens, num esquema estreito

Quando o DevTools é largo, o painel Depurador é colocado à direita e inclui Âmbito e Monitorização:

Navegar, ver, editar e depurar JavaScript devolvido pelo servidor

Para maximizar o tamanho da ferramenta Origens, desancore DevTools numa janela separada e, opcionalmente, mova a janela DevTools para um monitor separado. Consulte Alterar o posicionamento de DevTools (Desancorar, Ancorar para baixo, Ancorar para a esquerda).

Para carregar a página Web de demonstração de depuração mostrada acima, veja A abordagem básica à utilização de um depurador, abaixo.

Utilizar o painel Navegador para selecionar ficheiros

Utilize o painel Navegador (à esquerda) para navegar entre os recursos que são devolvidos do servidor para construir a página Web atual. Selecione ficheiros, imagens e outros recursos e veja os respetivos caminhos.

O painel Navegador

O painel Navegador contém os seguintes separadores:

Tab Descrição Documentos
Page Veja os recursos que o browser transferiu a partir do servidor ou sistema de ficheiros, inspecione os respetivos conteúdos e depure o código. Utilizar o separador Página para explorar os recursos que constroem a página Web atual
Área de Trabalho Veja e edite ficheiros locais no DevTools para utilizar o DevTools como um Ambiente de Desenvolvimento Integrado (IDE) no browser. Adicionar uma pasta local à área de trabalho, para utilizar DevTools para editar ficheiros e guardar alterações no disco
Substituições Experimente as alterações a uma página Web e mantenha as alterações após atualizar a página Web, sem mapear as alterações para o código fonte da página Web. Utilizar o separador Substituições para substituir ficheiros de servidor por ficheiros locais
Scripts de conteúdo Ver scripts de conteúdo carregados por uma extensão do Microsoft Edge. Utilizar o separador Scripts de conteúdo para extensões do Microsoft Edge
Trechos de código Crie e guarde fragmentos de código JavaScript, para que possa executar facilmente um fragmento de JavaScript em qualquer página Web. Utilizar o separador Fragmentos para executar fragmentos de código JavaScript em qualquer página

Para aceder a quaisquer separadores ocultos do painel Navegador, clique no botão Mais separadores (Mais separadores).

Os detalhes encontram-se abaixo. Também abaixo: Utilizar o Menu de Comandos para abrir ficheiros.

Utilizar o separador Página para explorar os recursos que constroem a página Web atual

O separador Página na ferramenta Origens apresenta os recursos que a página Web atual utiliza, como o documento HTML da página Web, ficheiros JavaScript, ficheiros CSS ou imagens. Os recursos apresentados no separador Página estão organizados numa árvore que corresponde ao sistema de ficheiros ou ao caminho do servidor a partir do qual foram transferidos.

Utilize o separador Página para ver os recursos que o browser transferiu a partir do servidor ou sistema de ficheiros, inspecionar os respetivos conteúdos e depurar código.

O separador Página no painel Navegador da ferramenta Origens

Para apresentar um ficheiro no painel Editor, selecione um ficheiro no separador Página. Para uma imagem, é apresentada uma pré-visualização da imagem.

Para apresentar o URL ou caminho de um recurso, paire o cursor sobre o recurso.

Para carregar um ficheiro para um novo separador do browser ou para apresentar outras ações, clique com o botão direito do rato no nome do ficheiro.

Ícones no separador Página

O separador Página utiliza os seguintes ícones:

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

O separador Página apresenta ficheiros ou recursos agrupados por servidor e diretório ou como uma lista simples.

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

  1. Junto aos separadores no painel Navegador (à esquerda), clique no botão ... (Mais opções). É apresentado um menu.
  2. Selecione ou desmarque a opção Agrupar por pasta .

Adicionar uma pasta local à área de trabalho, para utilizar DevTools para editar ficheiros e guardar alterações no disco

Utilize o separador Área de Trabalho na ferramenta Origens para ver e editar ficheiros locais no DevTools. O separador Área de Trabalho é útil quando utilizado em conjunto com um servidor Web local, uma vez que pode carregar o seu site local no Edge e editar os respetivos ficheiros de origem em DevTools.

Quando adiciona uma pasta ao separador Área de Trabalho , os ficheiros e subpastas nessa pasta são apresentados no separador e pode abrir ficheiros para os ver e editar.

O separador Área de Trabalho não mostra os recursos que o browser transferiu para apresentar a página Web; O separador Área de Trabalho mostra apenas as pastas e os ficheiros que estão dentro das pastas locais que adicionou.

Ao longo das DevTools, é apresentado um ponto verde "mapeado" num ficheiro para o qual o DevTools conseguiu encontrar um mapeamento entre o ficheiro da área de trabalho e o recurso da página Web. Por exemplo, se a página utilizar uma folha de estilos chamada styles.css e a área de trabalho tiver um ficheiro chamado styles.css, o DevTools mapeia os ficheiros entre si e apresenta um ponto verde "mapeado".

O ponto verde "mapeado" indica que as alterações efetuadas aos recursos da página Web serão guardadas. Por exemplo, quando efetua uma alteração no separador Estilos da ferramenta Elementos , está a editar a folha de estilos da página Web (não o ficheiro). Se o nome do ficheiro CSS apresentado no separador Estilos tiver um ponto verde "mapeado", essa folha de estilos foi mapeada para um ficheiro na área de trabalho e as alterações não serão perdidas.

O separador Área de Trabalho na ferramenta Origens

Por predefinição, quando edita um ficheiro na ferramenta Origens , as alterações são eliminadas quando atualiza a página Web. A ferramenta Origens funciona com uma cópia dos recursos de front-end que são devolvidos pelo servidor Web. Quando modifica estes ficheiros de front-end que são devolvidos pelo servidor, as alterações não persistem porque não alterou os ficheiros de origem. Também tem de aplicar as suas edições no código fonte real e, em seguida, voltar a implementar no servidor.

Por outro lado, quando utiliza uma Área de Trabalho, as alterações efetuadas ao código de front-end são preservadas quando atualiza a página Web. Com uma Área de Trabalho, quando edita o código de front-end que é devolvido pelo servidor, a ferramenta Origens também aplica as suas edições ao código fonte local. Em seguida, para que outros utilizadores vejam as suas alterações, só tem de reimplementar os ficheiros de origem alterados para o servidor.

As áreas de trabalho funcionam bem quando o código JavaScript devolvido pelo servidor é o mesmo que o código fonte javaScript local. As áreas de trabalho não funcionam tão bem quando o fluxo de trabalho envolve transformações no código fonte, como a minificação ou a compilação TypeScript .

Consulte também:

Utilizar o separador Substituições para substituir ficheiros de servidor por ficheiros locais

Utilize o separador Substituições na ferramenta Origens para substituir qualquer resposta de um servidor Web por ficheiros locais. O separador Substituições é útil para fazer alterações temporárias a ficheiros individuais, como um ficheiro CSS, em qualquer site. Utilize Substituições quando quiser experimentar alterações a uma página Web e tem de manter as alterações depois de atualizar a página Web, mas não se importa em mapear as alterações para o código fonte da página Web.

Para começar a utilizar o separador Substituições , crie uma nova pasta no seu sistema de ficheiros e, em seguida, selecione essa pasta no separador Substituições . A partir daí, todas as alterações efetuadas no separador Estilos da ferramenta Elementos ou no separador Página da ferramenta Origens são guardadas na nova pasta. O DevTools utiliza os ficheiros locais para substituir as respostas do servidor correspondentes.

O separador Substituições do painel Navegador

Consulte também:

Utilizar o separador Scripts de conteúdo para extensões do Microsoft Edge

Utilize o separador Scripts de conteúdo do painel Navegador para ver os scripts de conteúdo que foram carregados por uma extensão do Microsoft Edge que instalou.

O separador Scripts de conteúdo do painel Navegador

Quando o depurador entrar no código que não reconhece, poderá querer adicionar esse código à Lista ignorar, para evitar entrar nesse código. Veja Adicionar scripts de conteúdo à Lista Ignorar.

Consulte também:

Utilizar o separador Fragmentos para executar fragmentos de código JavaScript em qualquer página Web

Utilize o separador Fragmentos do painel Navegador para criar e guardar fragmentos de código JavaScript, para que possa facilmente executar estes fragmentos em qualquer página Web.

Um Fragmento que insere a biblioteca jQuery numa página Web

Por exemplo, suponha que introduz frequentemente o seguinte código na Consola, para inserir a biblioteca jQuery numa página para que possa executar comandos jQuery a partir da Consola:

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, pode guardar este código num Fragmento e, em seguida, executá-lo facilmente sempre que for necessário. Quando prime Ctrl+S (Windows, Linux) ou Comando+S (macOS), o DevTools guarda o Fragmento no seu sistema de ficheiros.

Existem várias formas de executar um Fragmento:

  • No painel Navegador , selecione o separador Fragmentos e, em seguida, selecione o ficheiro de fragmentos para o abrir. Em seguida, na parte inferior do painel Editor, clique no botão Executar (botão Executar).
  • Quando o DevTools tiver foco, prima Ctrl+P (Windows, Linux) ou Comando+P (macOS) para abrir o Menu de Comandos e, em seguida, escreva !.

Os fragmentos são semelhantes aos marcadores.

Consulte também:

Utilizar o Menu de Comandos para abrir ficheiros

Para abrir um ficheiro, para além de utilizar o painel Navegador na ferramenta Origens , pode utilizar o Menu de Comandos a partir de qualquer lugar em DevTools.

  • Em qualquer lugar nas DevTools, prima Ctrl+P no Windows/Linux ou Comando+P no macOS. O Menu de Comandos é apresentado e lista todos os recursos que estão nos separadores do painel Navegador da ferramenta Origens .
  • Em alternativa, junto aos separadores do painel Navegador na ferramenta Origens , clique no botão Mais opções (...) e, em seguida, selecione Abrir Ficheiro.

Para apresentar e escolher a partir de uma lista de todos os ficheiros .js, escreva.js.

Abrir um ficheiro com o Menu de Comandos

Se escrever ?, o Menu de Comandos mostra vários comandos, incluindo ... Abra o ficheiro. Se premir a Tecla de Retrocesso para limpar o Menu de Comandos, é apresentada uma lista de ficheiros.

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

Utilizar o painel Editor para ver ou editar ficheiros

Utilize o painel Editor para ver ou editar ficheiros, incluindo JavaScript, HTML, CSS e ficheiros de imagem. O painel Editor apresenta o conteúdo do ficheiro que selecionou em qualquer um dos separadores do painel Navegador:

  • Page
  • Área de Trabalho
  • Substituições
  • Scripts de conteúdo
  • Trechos de código

Por exemplo, o painel Editor pode mostrar:

  • O conteúdo de um Fragmento.
  • O conteúdo de um ficheiro de Área de Trabalho que não é realmente utilizado no código de front-end (porque a Área de Trabalho permite-lhe editar o conteúdo de qualquer pasta que pretenda).

O painel Editor na ferramenta Origens

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

Tipo de Ficheiro Ações Suportadas
JavaScript Ver, editar e depurar.
CSS Ver e editar.
HTML Ver e editar.
Images Exibir.

Por predefinição, as edições são eliminadas quando atualiza a página Web. Para obter informações sobre como guardar as alterações ao seu sistema de ficheiros, consulte Adicionar uma pasta local à área de trabalho, para utilizar DevTools para editar ficheiros e guardar alterações no disco, acima.

As seguintes subsecções abrangem o painel Editor:

Consulte também:

Editar um ficheiro JavaScript

Para editar um ficheiro JavaScript no DevTools, utilize o painel Editor, na ferramenta Origens.

Editar JavaScript no painel Editor

Para carregar um ficheiro para o painel Editor, utilize o separador Página no painel Navegador (à esquerda). Em alternativa, utilize o Menu de Comandos, da seguinte forma: no canto superior direito de DevTools, selecione Personalizar e controlar DevTools (...) e, em seguida, selecione Abrir Ficheiro.

Consulte também:

Guardar e Anular

Para que as alterações de JavaScript entrem em vigor, prima Ctrl+S (Windows, Linux) ou Comando+S (macOS).

Se alterar um ficheiro, é apresentado um asterisco junto ao nome do ficheiro.

  • Para guardar as alterações, prima Ctrl+S no Windows/Linux ou Comando+S no macOS.
  • Para anular uma alteração, prima Ctrl+Z no Windows/Linux ou Comando+Z no macOS.

Por predefinição, as suas edições são eliminadas quando atualiza a página Web. Para obter mais informações sobre como guardar as alterações no seu sistema de ficheiros local, consulte Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens).

Localizar e Substituir

Para localizar texto no ficheiro atual, selecione o painel Editor para o concentrar e, em seguida, prima Ctrl+F no Windows/Linux ou Comando+F no macOS.

Localizar e Substituir, no painel Editor da ferramenta Origens

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

A mostrar as alterações efetuadas

Quando define uma Área de Trabalho, as alterações ao JavaScript são guardadas e são visíveis na ferramenta Alterações .

Para rever as alterações efetuadas a um ficheiro, clique com o botão direito do rato no painel Editor e, em seguida, selecione Modificações Locais.

O painel Vista Rápida é aberto na parte inferior de DevTools, mostrando as alterações no separador Alterações .

A mostrar Modificações Locais, no separador Alterações no painel Vista Rápida

Consulte também:

As alterações dentro de uma função produzem efeito

Quando define uma Área de Trabalho, as alterações dentro de um corpo de função JavaScript produzem efeito.

As DevTools não executam novamente um script, pelo que as únicas alterações de JavaScript que produzem efeito são as alterações que efetua nas funções. Por exemplo, na figura seguinte, adicionámos o seguinte código ao JavaScript que é devolvido pelo servidor:

  • Adicionámos a instrução console.log('A') fora de qualquer função.
  • Adicionámos a instrução console.log('B') dentro de uma função onClick . Em seguida, guardámos as alterações, introduzimos números no formulário e, em seguida, selecionámos o botão de formulário para enviar o formulário.

Depois de submeter o formulário, console.log('A'), que está no âmbito global, não é executado, mas console.log('B'), dentro de uma onClick função, é executado, com saída B para a Consola:

O JavaScript de âmbito global não é novamente executado

Reformatar um ficheiro JavaScript minificado com bastante impressão

Os ficheiros minificados são reformatados automaticamente quando os abre no painel Editor.

Para reverter o ficheiro para o estado minificado original, clique no botão Impressão bonita (Formatação), que é apresentado como chavetas, na parte inferior do painel de Editor.

O botão Imprimir bonito

Para obter mais informações, veja Reformatar um ficheiro JavaScript minificado com bastante impressão.

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

Os mapas de origem dos pré-processadores fazem com que as DevTools carreguem os seus ficheiros de origem JavaScript originais, além dos ficheiros JavaScript minificados e transformados que são devolvidos pelo servidor. Em seguida, pode ver os seus ficheiros de origem originais enquanto define pontos de interrupção e percorre o código. Entretanto, o Microsoft Edge está a executar o seu código minificado.

No painel Editor, se clicar com o botão direito do rato num ficheiro JavaScript e, em seguida, selecionar Adicionar mapa de origem, é apresentada uma caixa de pop-up com uma caixa de texto URL do mapa de origem e um botão Adicionar.

A abordagem de mapeamento de origem mantém o código de front-end legível por humanos e depurável mesmo depois de o combinar, minimizar ou compilar. 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 utilizar uma arquitetura que transforma os seus ficheiros JavaScript, como React, o JavaScript de origem local poderá ser diferente do JavaScript de front-end devolvido pelo servidor. As áreas de trabalho não são suportadas neste cenário, mas o mapeamento do código fonte é suportado neste cenário.

Num ambiente de desenvolvimento, o servidor pode incluir os mapas de origem e os seus ficheiros ou .jsx originais .ts para React. A ferramenta Origens apresenta estes ficheiros, mas não lhe permite editar estes ficheiros. Quando define pontos de interrupção e utiliza o depurador, o DevTools apresenta os seus ficheiros ou .jsx originais.ts, mas, na verdade, percorre a versão minimizada dos seus ficheiros JavaScript.

Neste cenário, a ferramenta Origens é útil para inspecionar e percorrer o JavaScript transformado e front-end que é devolvido do servidor. Utilize o depurador para definir expressões watch e utilize a Consola para introduzir expressões JavaScript para manipular dados no âmbito.

Editar CSS

Existem dois locais para editar regras CSS e as respetivas propriedades nas DevTools:

  • No separador Estilos na ferramenta Elementos , edite as propriedades CSS através dos controlos de interface de utilizador.

  • No separador Página ou no separador Área de Trabalho na ferramenta Origens , utilize o editor de texto para editar um ficheiro CSS.

Editar CSS com o separador Estilos na ferramenta Elementos ao utilizar o separador Área de Trabalho da ferramenta Origens

Consulte também:

Editar CSS no separador Página ou no separador Área de Trabalho na ferramenta Origens

O separador Página ou Área de Trabalho na ferramenta Origens suporta a edição direta de um ficheiro CSS. Por exemplo, se editar o ficheiro CSS a partir do tutorial Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens) para corresponder à regra de estilo abaixo, o H1 elemento no canto superior esquerdo da página Web composta muda para verde:

h1 {
  color: green;
}

Editar CSS no painel Editor para alterar a cor do texto do cabeçalho H1 para verde

As alterações do CSS produzem efeitos imediatos; não precisa de guardar manualmente as alterações.

Consulte também:

Editar um ficheiro HTML

Existem duas formas de editar HTML em DevTools:

  • Na ferramenta Elementos , trabalha com um elemento HTML de cada vez, através de controlos de interface de utilizador.
  • Na ferramenta Origens , utiliza um editor de texto.

O editor de HTML da ferramenta Origens

Ao contrário de um ficheiro JavaScript ou CSS, um ficheiro HTML que é devolvido pelo servidor Web não pode ser editado diretamente na ferramenta Origens. Para editar um ficheiro HTML com o Editor da ferramenta Origens, o ficheiro HTML tem de estar numa Área de Trabalho ou no separador Substituições. Veja estas subsecções do artigo atual:

Para guardar as alterações, prima Ctrl+S no Windows/Linux ou Comando+S no macOS. Um ficheiro editado é marcado por um asterisco.

Para localizar texto, prima Ctrl+F no Windows/Linux ou Comando+F no macOS.

Para anular uma edição, prima Ctrl+Z no Windows/Linux ou Comando+Z no macOS.

Para ver outros comandos ao editar um ficheiro HTML, no painel Editor, clique com o botão direito do rato no ficheiro HTML.

Consulte também:

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

Para aceder a um número de linha ou símbolo (como um nome de função) no ficheiro que está aberto no painel Editor, pode utilizar o Menu de Comandos, em vez de percorrer o ficheiro.

  1. No painel Navegador , selecione as reticências (...) (Mais opções) e, em seguida, selecione Abrir Ficheiro. É apresentado o Menu de Comandos .
  2. Escreva um dos seguintes carateres:
Caráter Nome do comando Finalidade
: Ir para a linha Ir para um número de linha.
@ Ir para símbolo Aceda a uma função. Quando escreve @, o Menu de Comandos lista as funções que se encontram no ficheiro JavaScript que está aberto no painel Editor.

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

Ferramenta de origem rápida para apresentar ficheiros de origem ao utilizar uma ferramenta diferente

O local main para ver os ficheiros de origem nas DevTools está na ferramenta Origens. No entanto, por vezes, tem de aceder a outras ferramentas, como Elementos ou Consola, ao ver ou editar os seus ficheiros de origem. Utilize a Ferramenta de origem rápida no painel Vista Rápida na parte inferior de DevTools.

Para utilizar a Ferramenta de origem rápida :

  1. Na Barra de Atividade na parte superior de DevTools, selecione uma ferramenta diferente da ferramenta Origens , como a ferramenta Elementos .

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

  3. Escreva rápido e, em seguida, selecione Mostrar Origem rápida.

    O painel Vista Rápida é aberto na parte inferior de DevTools, com a Ferramenta de origem rápida selecionada. A Ferramenta de origem rápida apresenta os mesmos ficheiros que estão abertos na ferramenta Origens , numa versão compacta do editor de código DevTools.

  4. Prima Ctrl+P (Windows, Linux) ou Comando+P (macOS) para abrir a caixa de diálogo Abrir Ficheiro .

Consulte também:

Utilizar o painel Depurador para depurar código JavaScript

Utilize o depurador JavaScript para percorrer o código JavaScript que é devolvido pelo servidor. O depurador inclui o painel Depurador, juntamente com pontos de interrupção que definiu em linhas de código no painel Editor.

Com o depurador, vai percorrer o código enquanto observa as expressões JavaScript que especificar. Veja e altere manualmente os valores das variáveis e mostre automaticamente quais as variáveis que estão no âmbito da instrução atual.

O painel Depurador da ferramenta Origens

O depurador suporta ações de depuração padrão, tais como:

  • Definir pontos de interrupção para colocar o código em pausa.
  • A percorrer o código.
  • Ver e editar propriedades e variáveis.
  • Ver os valores das expressões JavaScript.
  • Ver a pilha de chamadas (a sequência de chamadas de função até agora).

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

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

A abordagem básica à utilização de um depurador

Para resolver problemas de código JavaScript, pode inserir console.log() instruções no código. Outra abordagem mais poderosa é utilizar o depurador do Microsoft Edge DevTools. Utilizar um depurador pode ser mais simples do que console.log(), assim que estiver familiarizado com a abordagem do depurador.

Para utilizar um depurador numa página Web, normalmente define um ponto de interrupção e, em seguida, envia um formulário a partir da página Web, da seguinte forma:

  1. Abra a página Web Demonstração: Introdução à Depuração de JavaScript com o Microsoft Edge DevTools numa nova janela ou separador.

  2. Clique com o botão direito do rato em qualquer parte da página Web e, em seguida, selecione Inspecionar. Em alternativa, prima F12. A janela DevTools é aberta, junto à página Web de demonstração.

  3. Em DevTools, selecione o separador Origens .

  4. No painel Navegador (à esquerda), selecione o separador Página e, em seguida, selecione o ficheiro JavaScript, como get-started.js.

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

  6. Na página Web, introduza valores e submeta o formulário. Por exemplo, introduza números, como 5 e 1 e, em seguida, clique no botão Adicionar Número 1 e Número 2.

    O depurador executa o código JavaScript e, em seguida, coloca em pausa no ponto de interrupção. O depurador está agora no modo Em Pausa, pelo que pode inspecionar os valores das propriedades que estão no âmbito e percorrer o código.

    Entrar no modo em pausa do depurador

    Na figura acima, adicionámos as expressões sum Watch e typeof sum, e pisámos duas linhas para além do ponto de interrupção.

  7. Examine os valores no painel Âmbito , que mostra todas as variáveis ou propriedades que estão no âmbito do ponto de interrupção atual e os respetivos valores.

    Neste momento, pode adicionar expressões no painel Ver . Estas expressões são as mesmas expressões que escreveria numa console.log instrução para depurar o código.

    Para executar comandos JavaScript para manipular dados no contexto atual, utilize a Consola. Se quiser abrir a Consola no painel Vista Rápida na parte inferior de DevTools, prima Esc.

  8. Percorra o código com os controlos na parte superior do painel Depurador , como Passo (F9).

    O erro nesta demonstração é que primeiro tem de converter os dados de entrada de cadeias em números.

  9. Para corrigir o erro, atualize a página para repor o formulário da página Web e, em seguida, altere a linha:

    var sum = addend1 + addend2;

    Para:

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

  10. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS) para guardar a alteração no ficheiro em cache local.

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

Consulte também:

Vantagens da Monitorização e âmbito do depurador sobre console.log

Estas três abordagens são equivalentes:

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

  • Emitindo as instruções sum e console.log(typeof sum) no painel Consola das DevTools, quando o depurador é colocado em pausa onde sum está no âmbito.

  • Definir as expressões sumwatch e typeof sum no painel Depurador.

Quando a variável sum está no âmbito sum e o respetivo valor é apresentado automaticamente na secção Âmbito do painel Depurador e também são sobrepostos no painel Editor onde sum é calculado. Por isso, provavelmente não precisaria de definir uma expressão watch para sum.

O depurador proporciona uma apresentação e um ambiente mais avançados e flexíveis do que uma console.log instrução. Por exemplo, no depurador, à medida que percorre o código, pode apresentar e alterar os valores de todas as propriedades e variáveis atualmente definidas. Também pode emitir instruções JavaScript na Consola, como para alterar valores numa matriz dentro do âmbito. (Para mostrar a Consola, prima Esc.)

Os pontos de interrupção e as expressões watch são preservados quando atualiza a página Web.

Depurar diretamente de Visual Studio Code

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

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

Esta extensão fornece acesso aos Elementos e Ferramentas de rede das DevTools do Microsoft Edge, a partir do Microsoft Visual Studio Code.

Para obter mais informações, consulte Visual Studio Code para desenvolvimento Web e a página GitHub Readme, Ferramentas de Programação do Microsoft Edge para Visual Studio Code.

Artigos sobre a depuração

Os seguintes artigos abrangem o painel 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 é da autoria de Kayce Bascos.

Licença Creative Commons Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.