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

Sofia Emelianova

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

Visão geral

Com o painel Mudanças, acompanhe as alterações feitas em:

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

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

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

Para fazer com que o DevTools grave mudanças nas suas origens locais, siga as etapas em Editar e salvar arquivos com os espaços de trabalho.

Abrir o painel "Mudanças"

Para abrir o painel Mudanças:

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 mudanças e pressione Enter.

   

Como alternativa, no canto superior direito, clique em Personalizar e controlar as Ferramentas para desenvolvedores > Mais ferramentas > Alterações.

Por padrão, o DevTools mostra o painel Changes na parte de baixo da janela, na Drawer.

Conferir e entender suas mudanças

Para conferir as mudanças:

1. Abra o DevTools.

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

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

3. Abra o painel Changes e selecione um arquivo no lado direito do painel.

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

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

Copiar mudanças de CSS

Se você fez mudanças no CSS em Elementos > Estilos, é possível copiar todas elas com um único botão:

1. Abra o painel Changes e, no lado direito do painel, selecione o arquivo CSS em que você fez alterações.

   

2. Clique no botão Copiar na parte de baixo do painel "Mudanças".

Reverter todas as mudanças feitas em um arquivo

Para reverter as alterações feitas em um arquivo:

1. No painel Changes, à esquerda, selecione um arquivo com as alterações que você quer reverter.
2. Na barra de ações na parte de baixo, clique em Reverter todas as mudanças no arquivo atual.