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

Sofia Emelianova
Sofia Emelianova
GitHub

Na guia Alterações, acompanhe as alterações feitas:

A guia Mudanças mostra as mudanças feitas no DevTools. Se você recarregar o DevTools ou a página, as mudanças desaparecerão.

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

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

Abra a guia "Alterações".

Para abrir a guia Alterações, siga estas etapas:

  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 Show Changes 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" width="800" height="460">

Por padrão, o DevTools exibe a guia Changes na parte inferior da janela dele, na Gaveta.

Conferir e entender suas mudanças

Para conferir as mudanças, faça o seguinte:

  1. Abra o DevTools.

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

  3. Abra a guia Alterações e selecione um arquivo no lado direito da guia.

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

Diferença destacada na guia "Alterações"

A guia Mudanças imprime a saída de diff automaticamente, para que você não precise 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 a guia Alterações e selecione o arquivo CSS no lado direito da guia.

    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. À esquerda da guia Alterações, selecione um arquivo com as alterações para reverter.
  2. Na barra de ações na parte de baixo, clique em Desfazer Reverter todas as alterações para o arquivo atual.

Botão "Reverter"