Visão geral da ferramenta Fontes

  • Artigo

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

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

As seguintes subsecções abrangem o painel Navegador:

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

Utilize o separador Página do painel Navegador para explorar o sistema de ficheiros que é devolvido do servidor para construir a página Web atual. Selecione um ficheiro JavaScript para o ver, editar e depurar. O separador Página lista todos os recursos que a página carregou.

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), selecione o botão ... (Mais opções). É apresentado um menu.
  2. Selecione ou desmarque a opção Agrupar por pasta .

Utilizar o separador Sistema de Ficheiros para definir uma Área de Trabalho local

Utilize o separador Sistema de Ficheiros do painel Navegador para adicionar ficheiros a uma Área de Trabalho, para que as alterações efetuadas em DevTools sejam guardadas no seu sistema de ficheiros local.

O separador Sistema de Ficheiros, para uma Área de Trabalho

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 do painel Navegador para substituir recursos de página (como imagens) por ficheiros de uma pasta local.

Os itens neste separador substituem o que o servidor envia para o browser, mesmo depois de o servidor ter enviado os recursos.

O separador Substituições do painel Navegador

A funcionalidade Substituições é semelhante a Áreas de Trabalho. 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.

Um ficheiro que substitui um ficheiro que é devolvido pelo servidor é indicado por um ponto roxo junto ao nome do ficheiro, em DevTools.

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, selecione Executar (o 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 , selecione o 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 os ficheiros de front-end que são devolvidos do servidor para compor a página Web atual, incluindo Ficheiros de imagem, HTML, CSS e JavaScript. Quando edita os ficheiros de front-end no painel Editor, a DevTools atualiza a página Web para executar o código modificado.

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 no seu sistema de ficheiros, consulte Utilizar o separador Sistema de Ficheiros para definir uma Área de Trabalho local, 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 ficheiros com Áreas de Trabalho (separador Sistema de Ficheiros).

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.

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 um ficheiro CSS

Existem duas formas de editar o CSS no DevTools:

  • Na ferramenta Elementos , trabalha com uma propriedade CSS de cada vez, através de controlos de interface de utilizador. Esta abordagem é recomendada na maioria dos casos. Para obter mais informações, veja Introdução à visualização e alteração do CSS.
  • Na ferramenta Origens , utiliza um editor de texto para editar ficheiros CSS.

A ferramenta Origens suporta a edição direta de um ficheiro CSS. Por exemplo, se editar o ficheiro CSS a partir do tutorial Editar ficheiros com Áreas de Trabalho (separador Sistema de Ficheiros) 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.

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. 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 contém o último ficheiro que editou 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 .

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, selecione o 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 encontra-se aqui e é criada por Kayce Bascos (Technical Writer, Chrome DevTools & Lighthouse).

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