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

Sofia Emelianova
Sofia Emelianova
GitHub

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:

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.

    Executar o comando "Show Changes"

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

Opção "Mudanças" em foco no menu suspenso "Mais ferramentas"

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:

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

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

Diferenças em destaque no painel "Mudanças"

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.

    Copiar.

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

Botão "Reverter"