Acompanhar as alterações nos arquivos usando a ferramenta Alterações

A ferramenta Alterações rastreia todas as alterações feitas em arquivos CSS, JavaScript ou HTML no DevTools. A ferramenta Alterações está vazia até que você abra os arquivos e os edite usando a ferramenta Fontes, a ferramenta Fonte rápida ou o painel Estilos da ferramenta Elementos.

A ferramenta Alterações mostra quais alterações fazer em seus arquivos de origem reais depois de usar com êxito o DevTools para modificar uma cópia de seus arquivos de página da Web enviados do servidor:

Use a ferramenta Alterações para exibir rapidamente todas as alterações a fim de reaplicar essas alterações aos arquivos de origem reais no editor de código-fonte.

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

Na Barra de Atividades ou na barra de ferramentas Visualização Rápida , clique no botão Mais ferramentas () e selecione Alterações:

A ferramenta Alterações será aberta na Barra de Atividades ou no painel Visualização Rápida , dependendo da barra de ferramentas usada.

Abra a ferramenta Alterações usando o Menu de Comando

Para abrir a ferramenta Alterações usando o Menu de Comando:

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

2. Comece a digitar as alterações. O comando Mostrar Alterações é realçado:

   

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

   

Veja também:

• Executar comandos no Menu de Comando

Interpretar linhas adicionadas, linhas removidas e diferenças em uma linha

Cada arquivo modificado é listado no painel lateral. Selecionar um arquivo mostra as modificações como uma diff exibição. Você não verá o arquivo inteiro, mas apenas as linhas que foram alteradas, juntamente com algumas linhas acima e abaixo das linhas alteradas, para contexto.

A visualização diff a seguir mostra que houve duas modificações em partes diferentes de um arquivo. Uma alteração é uma inserção e uma alteração são várias linhas excluídas:

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

Abrir um arquivo alterado na ferramenta Fontes

Clicar em uma linha modificada na ferramenta Alterações abre o arquivo na ferramenta Fontes , rolado até a linha modificada.

Reverter alterações

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

Rolar entradas horizontalmente

Quando você faz uma alteração em um arquivo minificado, a ferramenta Alterações permite rolar horizontalmente para exibir todo o código minificado:

Para rolar horizontalmente, clique na barra de rolagem horizontal ou pressione as teclas de seta para a esquerda ou para a direita.

Solução de problemas

Se os círculos verdes pararem de aparecer nos arquivos no DevTools, como na guia Workspace ; ou se a ferramenta Alterações não mostrar as alterações esperadas:

• Com o DevTools exibido, clique longamente ou clique com o botão direito do mouse no botão Atualizar no Microsoft Edge e selecione Esvaziar cache e fazer atualização forçada.

Confira também

• Editar e salvar arquivos em um espaço de trabalho (ferramenta Fontes, guia Espaço de Trabalho)
• Substituir recursos da página da Web por cópias locais (guia Substituições) - GuiaSubstituições da ferramenta > Fontes
• Visão geral da ferramenta Fontes
  • Exibir ou editar arquivos de origem usando a ferramenta Fonte rápida