Partilhar via


Registar alterações a ficheiros com a ferramenta Alterações

A ferramenta Alterações monitoriza todas as alterações efetuadas aos ficheiros CSS, JavaScript ou HTML em DevTools. A ferramenta Alterações está vazia até abrir ficheiros e editá-los com a ferramenta Origens, a Ferramenta de origem rápida ou o painel Estilos da ferramenta Elementos.

A ferramenta Alterações mostra-lhe as alterações a fazer aos seus ficheiros de origem reais depois de ter utilizado com êxito o DevTools para modificar uma cópia dos ficheiros da página Web que são enviados a partir do servidor:

A ferramenta Alterações a mostrar dois ficheiros que foram modificados e as modificações do ficheiro selecionado

Utilize a ferramenta Alterações para apresentar rapidamente todas as alterações para voltar a aplicar essas alterações aos ficheiros de origem reais no editor de código fonte.

Abra a ferramenta Alterações ao clicar no ícone Mais Ferramentas

Na Barra de Atividade ou na barra de ferramentas vista rápida , clique no botão Mais ferramentas (o ícone ) e, em seguida, selecione Alterações:

O ícone e menu

A ferramenta Alterações é aberta na Barra de Atividade ou no painel Vista Rápida , consoante a barra de ferramentas que utilizou.

Abra a ferramenta Alterações utilizando o Menu de Comandos

Para abrir a ferramenta Alterações com o Menu de Comandos:

  1. Para abrir o Menu de Comandos, prima Ctrl+Shift+P no Windows/Linux ou Comando+Shift+P no Mac.

  2. Comece a escrever as alterações. O comando Mostrar Alterações está realçado:

    O comando Mostrar Alterações no Menu de Comandos

  3. Pressione Enter. A ferramenta Alterações é aberta no painel Vista Rápida :

    A ferramenta Alterações no painel Vista Rápida

Veja também:

Interpretar linhas adicionadas, linhas removidas e diferenças numa linha

Cada ficheiro modificado está listado no painel lateral. Selecionar um ficheiro mostra as modificações como uma diff vista. Não verá todo o ficheiro, mas apenas as linhas que foram alteradas, juntamente com algumas linhas acima e abaixo das linhas alteradas, para contexto.

A seguinte vista difusa mostra que houve duas modificações em diferentes partes de um ficheiro. Uma alteração é uma inserção e uma alteração são várias linhas eliminadas:

Vista de diferença

Tipo de alteração Indicador
Linha removida Cada linha que foi removida do código é precedida por um - e é colorida a vermelho.
Linha adicionada Cada nova linha tem uma + à sua frente e é colorida a verde.
Linha alterada Um par de linhas adjacente, com uma - linha e, em seguida, uma + linha.

As alterações são representadas como inserção ou eliminação de linhas individuais de código, nas duas colunas de números de linha. A coluna esquerda representa números de linha no ficheiro antigo e a coluna direita representa números de linhas no novo ficheiro.

Abrir um ficheiro alterado na ferramenta Origens

Clicar numa linha modificada na ferramenta Alterações abre o ficheiro na ferramenta Origens , desloque-se para a linha modificada.

Reverter alterações

Para anular todas as alterações, na parte inferior da ferramenta Alterações , clique no botão Reverter todas as alterações ao ficheiro atual (o botão Reverter todas as alterações para o ficheiro atual):

A reverter alterações

Entradas de deslocamento horizontal

Quando efetua uma alteração a um ficheiro minificado, a ferramenta Alterações permite-lhe deslocar-se horizontalmente para apresentar todo o código minimizado:

Apresentar uma longa linha de código

Para deslocar horizontalmente, clique na barra de deslocamento horizontal ou prima as teclas de seta para a esquerda ou para a direita.

Solução de problemas

Se os círculos verdes deixarem de aparecer em ficheiros em DevTools, como no separador Área de Trabalho ; ou se a ferramenta Alterações não mostrar as alterações esperadas:

  • Com o DevTools apresentado, clique com o botão direito do rato ou clique com o botão direito do rato no botão Atualizar no Microsoft Edge e, em seguida, selecione Esvaziar cache e atualização rápida.

Confira também