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

Sofia Emelianova
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:

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.

    Executar o comando Show Changes

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

Opção de mudança em destaque no menu suspenso "Mais ferramentas"

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:

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

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

Diferença destacada no painel "Alterações"

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.

    Copiar.

  2. Clique no botão Copiar. 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 Desfazer Reverter todas as mudanças no arquivo atual.

Botão "Reverter"