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

Sofia Emelianova
Sofia Emelianova
GitHub

Na guia Alterações, acompanhe as mudanças feitas nos itens abaixo:

A guia Changes mostra 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 a guia "Mudanças"

Para abrir a guia 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.

Alterações" largura="800" height="460">

Por padrão, o DevTools exibe a guia 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 a guia Mudanças e selecione um arquivo no lado direito da guia.

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

Diferenças em destaque na guia "Mudanças"

A guia Changes mostra a saída diff automaticamente, para que você não precise rolar a tela horizontalmente para conferir as mudanças em uma única linha.

Copiar mudanças de CSS

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

  1. Abra a guia Mudanças e, no lado direito da guia, selecione o arquivo CSS em que você fez as mudanças.

    Copiar.

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

Reverter todas as alterações feitas em um arquivo

Para reverter alterações feitas em um arquivo:

  1. No lado esquerdo da guia 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"