Alterações: acompanhe suas alterações de HTML, CSS e JavaScript

Sofia Emelianova

Use o painel Changes para rastrear as mudanças no código feitas no DevTools.

Visão geral

Com o painel Alterações, acompanhe as mudanças feitas nos itens abaixo:

• HTML em Origens com Substituições locais ativadas
• CSS em Elementos > Estilos ou Fontes
• JavaScript em Origens

O painel Changes mostra apenas as mudanças feitas no DevTools. Se você recarregar o DevTools ou a página, as mudanças vão desaparecer.

Para fazer com que o DevTools mantenha mudanças nos carregamentos de página, siga as etapas em Substituições locais.

Para fazer o DevTools gravar alterações nas fontes locais, siga as etapas em Editar e salvar arquivos com espaços de trabalho.

Abrir o painel "Mudanças"

Para abrir o painel Alterações, faça o seguinte:

1. Abra o DevTools.

2. Pressione Command + Shift + P (Mac) ou Control + Shift + P (Windows, Linux, ChromeOS) para abrir o menu de comando.

3. Comece a digitar changes, selecione Mostrar alterações e pressione Enter.

   

Como alternativa, no canto superior direito, clique em Personalizar e controlar DevTools > Mais ferramentas > Mudanças.

Por padrão, o DevTools exibe o painel Changes na parte inferior da janela do DevTools, na Gaveta.

Ver e entender as mudanças

Para ver suas alterações:

1. Abra o DevTools.

2. Faça mudanças nas suas origens:

   • HTML: primeiro, ative as Substituições locais e depois faça as mudanças em Origens
   • CSS em Elementos > Estilos ou Fontes
   • JavaScript em Origens

3. Abra o painel Alterações e selecione um arquivo no lado direito dele.

4. Observe uma saída diff que destaca o seguinte:

O painel Changes mostra a saída diff de forma bonita automaticamente. Assim, você não precisa rolar horizontalmente para ver as mudanças em uma única linha.

Copiar mudanças de CSS

Se você tiver feito mudanças no CSS em Elementos > Estilos, é possível copiar todos eles com um único botão:

1. Abra o painel Alterações e selecione o arquivo CSS no lado direito dele.

   

2. Clique no botão Copiar na parte de baixo do painel de alterações.

Reverter todas as alterações feitas em um arquivo

Para reverter alterações feitas em um arquivo:

1. No lado esquerdo do painel Alterações, selecione um arquivo com alterações para reverter.
2. Na barra de ações na parte de baixo, clique em Reverter todas as alterações no arquivo atual.