Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
A ferramenta Alterações rastreia todas as alterações feitas em arquivos CSS, JavaScript ou HTML no DevTools. A ferramenta Alterações está vazia até que você abra os arquivos e os edite usando a ferramenta Fontes, a ferramenta Fonte rápida ou o painel Estilos da ferramenta Elementos.
A ferramenta Alterações mostra quais alterações fazer em seus arquivos de origem reais depois de usar com êxito o DevTools para modificar uma cópia de seus arquivos de página da Web enviados do servidor:
Use a ferramenta Alterações para exibir rapidamente todas as alterações a fim de reaplicar essas alterações aos arquivos de origem reais no editor de código-fonte.
Abra a ferramenta Alterações clicando no ícone Mais Ferramentas
Na Barra de Atividades ou na barra de ferramentas Visualização Rápida , clique no botão Mais ferramentas (
) e selecione Alterações:
A ferramenta Alterações será aberta na Barra de Atividades ou no painel Visualização Rápida , dependendo da barra de ferramentas usada.
Abra a ferramenta Alterações usando o Menu de Comando
Para abrir a ferramenta Alterações usando o Menu de Comando:
Para abrir o Menu de Comando, pressione Ctrl+Shift+P no Windows/Linux ou Command+Shift+P no Mac.
Comece a digitar as alterações. O comando Mostrar Alterações é realçado:
Pressione Enter. A ferramenta Alterações é aberta no painel Visualização Rápida :
Veja também:
Interpretar linhas adicionadas, linhas removidas e diferenças em uma linha
Cada arquivo modificado é listado no painel lateral. Selecionar um arquivo mostra as modificações como uma diff exibição. Você não verá o arquivo inteiro, mas apenas as linhas que foram alteradas, juntamente com algumas linhas acima e abaixo das linhas alteradas, para contexto.
A visualização diff a seguir mostra que houve duas modificações em partes diferentes de um arquivo. Uma alteração é uma inserção e uma alteração são várias linhas excluídas:
| Tipo de alteração | Indicador |
|---|---|
| Linha removida | Cada linha removida do código é precedida por um - e é colorida em vermelho. |
| Linha adicionada | Cada nova linha tem um + na frente dela e é colorida de verde. |
| Linha alterada | Um par de linhas adjacente, com uma - linha e depois uma + linha. |
As alterações são representadas como inserção ou exclusão de linhas de código individuais, nas duas colunas de números de linha. A coluna da esquerda representa os números de linha no arquivo antigo e a coluna da direita representa os números de linha no novo arquivo.
Abrir um arquivo alterado na ferramenta Fontes
Clicar em uma linha modificada na ferramenta Alterações abre o arquivo na ferramenta Fontes , rolado até a linha modificada.
Reverter alterações
Para desfazer todas as alterações, na parte inferior da ferramenta Alterações , clique no botão Reverter todas as alterações para o arquivo atual (
):
Rolar entradas horizontalmente
Quando você faz uma alteração em um arquivo minificado, a ferramenta Alterações permite rolar horizontalmente para exibir todo o código minificado:
Para rolar horizontalmente, clique na barra de rolagem horizontal ou pressione as teclas de seta para a esquerda ou para a direita.
Solução de problemas
Se os círculos verdes pararem de aparecer nos arquivos no DevTools, como na guia Workspace ; ou se a ferramenta Alterações não mostrar as alterações esperadas:
- Com o DevTools exibido, clique longamente ou clique com o botão direito do mouse no botão Atualizar no Microsoft Edge e selecione Esvaziar cache e fazer atualização forçada.