Inspecione e edite em tempo real o HTML e o CSS de uma página usando o painel Elements do Chrome DevTools.
TL;DR
- Inspecione e edite instantaneamente qualquer elemento na árvore do DOM no painel Elements.
- Visualize e altere as regras de CSS aplicadas a qualquer elemento no painel Styles.
- Visualize e edite o modelo de caixa de um elemento selecionado no painel Computed.
- Visualize todas as mudanças feitas na sua página localmente no painel Sources.
Editar um nó do DOM em tempo real
Para editar um nó do DOM em tempo real, basta clicar duas vezes em um elemento selecionado e fazer alterações:
A visualização em árvore do DOM mostra o estado atual da árvore; ele pode não corresponder ao HTML carregado originalmente por diferentes motivos. Por exemplo, você pode modificar a árvore do DOM usando JavaScript, o mecanismo do navegador pode tentar corrigir a marcação de autor inválida e produzir um DOM inesperado.
Editar um estilo em tempo real
Edite os nomes e valores da propriedade style em tempo real no painel Styles. Todos os estilos são editáveis, exceto os cinzas (como no caso com folhas de estilo do user-agent).
Para editar um nome ou valor, clique nele, faça as alterações e pressione Tab ou Enter para salvá-las.
Por padrão, suas modificações no CSS não são permanentes, elas são perdidas ao recarregar a página. Configure a criação persistente se quiser manter as alterações entre carregamentos de página.
Examinar e editar os parâmetros de modelo de caixa
Examine e edite os parâmetros de modelo de caixa do elemento atual usando o painel Computed. Todos os valores no modelo de caixa são editáveis; basta clicar neles.
Os retângulos concêntricos contêm os valores top, bottom, left e right para as propriedades padding, border e margin do elemento.
Para elementos posicionados de forma não estatística, um retângulo position também é exibido, contendo os valores das propriedades top, right, bottom e left.
Para elementos position: fixed e position: absolute, o campo central
contém as dimensões offsetWidth × offsetHeight reais em pixels
do elemento selecionado. Todos os valores podem ser modificados clicando duas vezes
neles, como os valores da propriedade no painel Styles. Entretanto, não é garantido que as alterações
terão efeito, pois isso está sujeito aos dados específicos de posicionamento
do elemento concreto.
Visualizar alterações locais
Para visualizar um histórico de alterações realizadas em tempo real na sua página:
- No painel Styles, clique no arquivo que você modificou. O DevTools leva você ao painel Sources.
- Clique com o botão direito no arquivo.
- Selecione Local modifications.
Para explorar as alterações realizadas:
- Expanda os nomes de arquivo de nível superior para visualizar a hora
em que uma modificação ocorreu. - Expanda os itens de segundo nível para visualizar uma comparação (antes e depois) correspondente à modificação. Uma linha com um plano de fundo rosa significa uma remoção e uma linha com um plano de fundo verde significa uma adição.
Desfazer alterações
Se você não configurou a criação persistente, todas as edições realizadas em tempo real serão perdidas sempre que você recarregar a página.
Pressupondo que você tenha configurado a criação persistente, para desfazer alterações:
-
Use Ctrl+Z (Windows) ou Cmd+Z (Mac) para desfazer rapidamente mudanças pequenas para o DOM ou estilos pelo painel Elements.
-
Para desfazer todas as modificações locais feitas em um arquivo, abra o painel Sources e selecione revert ao lado do nome do arquivo.