Assista ao vídeo e conclua estes tutoriais interativos para aprender os conceitos básicos de visualização e alteração do DOM de uma página usando o Chrome DevTools.
Este tutorial presume que você sabe a diferença entre o DOM e o HTML. Consulte o Apêndice: HTML versus DOM para ver uma explicação.
Ver nós do DOM
A árvore DOM do painel de elementos é onde você realiza todas as atividades relacionadas ao DOM no DevTools.
Inspecionar um nó
Se você tiver interesse em um nó do DOM específico, Inspect é uma maneira rápida de abrir o DevTools e investigar esse nó.
- Clique com o botão direito do mouse em Michelangelo abaixo e selecione Inspecionar.
- Michelangelo
- Rafael
O painel Elementos do DevTools será aberto.
<li>Michelangelo</li>
está destacado na Árvore DOM.
- Clique no ícone Inspect no canto superior esquerdo do DevTools.
Clique no texto Tóquio abaixo.
- Tóquio
Beirute
Agora,
<li>Tokyo</li>
está em destaque na árvore do DOM.
A inspeção de um nó também é a primeira etapa para visualizar e alterar os estilos de um nó. Consulte Primeiros passos com a visualização e a alteração de CSS.
Navegar na árvore do DOM com um teclado
Depois de selecionar um nó na árvore do DOM, você pode navegar nela usando o teclado.
Clique com o botão direito do mouse em Ringo abaixo e selecione Inspect.
<li>Ringo</li>
é selecionado na árvore do DOM.- George
- Ringo
- Paul
João
Pressione a tecla de seta para cima duas vezes.
<ul>
está selecionado.Pressione a tecla de seta para a esquerda. A lista
<ul>
será fechada.Pressione a tecla de seta para a esquerda novamente. O pai do nó
<ul>
está selecionado. Neste caso, é o nó<li>
que contém as instruções da etapa 1.Pressione a tecla de seta para baixo três vezes para selecionar novamente a lista
<ul>
que você acabou de recolher. Ele vai ficar assim:<ul>...</ul>
Pressione a tecla de seta para a direita. A lista se expande.
Rolar para a visualização
Ao visualizar a árvore do DOM, às vezes você terá interesse em um nó do DOM que não esteja na janela de visualização. Por exemplo, suponha que você rolou até a parte de baixo da
página e tem interesse no nó <h1>
na parte de cima. Rolar para visualização
permite reposicionar rapidamente a janela de visualização para ver o nó.
Clique com o botão direito do mouse em Magritte abaixo e selecione Inspecionar.
- Magritte
- Soutine
Acesse a seção Apêndice: rolar para a visualização na parte de baixo desta página. As instruções continuam lá.
Após concluir as instruções na parte inferior da página, volte para esta seção.
Exibir regras
Com as réguas acima e à esquerda da janela de visualização, você pode medir a largura e a altura de um elemento passando o cursor sobre ele no painel Elementos.
Ative as réguas de duas maneiras:
- Pressione Control+Shift+P ou Command+Shift+P (Mac) para abrir o Menu de comando, digite
Show rulers on hover
e pressione Enter. - Marque Configurações > Preferências > Elementos > Mostrar réguas ao passar o cursor.
A unidade de dimensionamento das réguas é em pixels.
Pesquisar nós
Você pode pesquisar a árvore do DOM por string, seletor de CSS ou seletor XPath.
- Foque o cursor no painel Elementos.
- Pressione Control+F ou Command+F (Mac). A barra de pesquisa é aberta na parte inferior da árvore do DOM.
Digite
The Moon is a Harsh Mistress
. A última frase é destacada na árvore do DOM.
Como mencionado acima, a barra de pesquisa também é compatível com seletores CSS e XPath.
O painel Elementos seleciona o primeiro resultado correspondente na árvore do DOM e o exibe na janela de visualização. Por padrão, isso acontece enquanto você digita. Se você sempre trabalha com consultas de pesquisa longas, pode fazer o DevTools executar a pesquisa apenas quando você pressionar Enter.
Para evitar saltos desnecessários entre os nós, desmarque a caixa de seleção Configurações > Preferências > Global > Pesquisar enquanto você digita.
Editar o DOM
Você pode editar o DOM rapidamente e ver como essas alterações afetam a página.
Editar conteúdo
Para editar o conteúdo de um nó, clique duas vezes no conteúdo da árvore do DOM.
Clique com o botão direito do mouse em Michelle abaixo e selecione Inspecionar.
- Fritura
- Michelle
Na árvore do DOM, clique duas vezes em
Michelle
. Em outras palavras, clique duas vezes no texto entre<li>
e</li>
. O texto é destacado em azul para indicar que foi selecionado.Exclua
Michelle
, digiteLeela
e pressione Enter para confirmar a mudança. O texto acima muda de Michelle para Leela.
Editar atributos
Para editar atributos, clique duas vezes no nome ou valor do atributo. Siga as instruções abaixo para saber como adicionar atributos a um nó.
Clique com o botão direito do mouse em Howard abaixo e selecione Inspecionar.
- Howard
- Vicente
Clique duas vezes em
<li>
. O texto é destacado para indicar que o nó está selecionado.Pressione a seta para a direita, adicione um espaço, digite
style="background-color:gold"
e pressione Enter. A cor de fundo do nó muda para dourado.
Você também pode usar a opção de clicar com o botão direito do mouse em Editar atributo.
Editar tipo de nó
Para editar o tipo de um nó, clique duas vezes no tipo e digite o novo tipo.
Clique com o botão direito do mouse em Hank abaixo e selecione Inspecionar.
- Decano
- Kibon
- Tadeu
- Brock
Clique duas vezes em
<li>
. O textoli
está destacado.Exclua
li
, digitebutton
e pressione Enter. O nó<li>
muda para um nó<button>
.
Editar como HTML
Para editar nós como HTML com o preenchimento automático e o destaque de sintaxe, selecione Editar como HTML no menu suspenso do nó.
Clique com o botão direito do mouse em Leonard abaixo e selecione Inspecionar.
- Centavo
- Howard
- Roberto
- Leonard
No painel Elementos, clique com o botão direito do mouse no nó atual e selecione Editar como HTML no menu suspenso.
Pressione Enter para iniciar uma nova linha e começar a digitar
<l
. A DevTool destaca a sintaxe HTML e preenche automaticamente as tags para você.Selecione o elemento
li
no menu de preenchimento automático e digite>
. O DevTools adiciona automaticamente a tag de fechamento</li>
após o cursor.Digite
Sheldon
dentro da tag e pressione Control / Command + Enter para aplicar as mudanças.
Duplicar um nó
É possível duplicar um elemento usando a opção de clique com o botão direito do mouse em Duplicar elemento.
Clique com o botão direito do mouse em Nana abaixo e selecione Inspect.
- Fogueira das Vanidades
- Nana
- Orlando
- Ruído branco
No painel Elementos, clique com o botão direito do mouse em
<li>Nana</li>
e selecione Duplicar elemento no menu suspenso.Volte para a página. O item da lista foi duplicado instantaneamente.
Você também pode usar os atalhos de teclado: Shift + Alt + seta para baixo (Windows e Linux) e Shift + Option + seta para baixo (MacOS).
Fazer uma captura de tela do nó
Você pode fazer uma captura de tela de qualquer nó individual da árvore do DOM usando a opção Capturar tela do nó.
Clique com o botão direito do mouse em qualquer imagem desta página e selecione Inspecionar.
No painel Elementos, clique com o botão direito do mouse no URL da imagem e selecione Capturar tela do nó no menu suspenso.
A captura de tela será salva nos seus downloads.
Reordenar nós do DOM
Arraste os nós para reordená-los.
Clique com o botão direito do mouse em Elvis Presley abaixo e selecione Inspecionar. Observe que é o último item da lista.
- Stevie maravilha
- Tom espera
- Chris thile
- Elvis presley
Na árvore do DOM, arraste
<li>Elvis Presley</li>
para o topo da lista.
Forçar estado
É possível forçar os nós a permanecer em estados como :active
, :hover
, :focus
,
:visited
e :focus-within
.
Passe o cursor sobre O Senhor das Moscas abaixo. A cor do plano de fundo fica laranja.
- O Senhor das Moscas
- Crime e punição
- Moby dick
Clique com o botão direito do mouse em O Senhor das Moscas acima e selecione Inspecionar.
Clique com o botão direito do mouse em
<li class="demo--hover">The Lord of the Flies</li>
e selecione Forçar estado > :hover. Consulte o Apêndice: opções ausentes caso essa opção não apareça. A cor de fundo permanece laranja, mesmo que você não esteja realmente passando sobre o nó.
Ocultar um nó
Pressione H para ocultar um nó.
Clique com o botão direito do mouse em The Stars My Destination abaixo e selecione Inspect.
- O Conde de Monte Cristo
- As estrelas, meu destino
Pressione a tecla H. O nó está oculto. Também é possível clicar com o botão direito do mouse no nó e usar a opção Ocultar elemento.
Pressione a tecla H novamente. O nó é exibido novamente.
Excluir um nó
Pressione Delete para excluir um nó.
Clique com o botão direito do mouse em Fundação abaixo e selecione Inspecionar.
- O Homem Ilustrado
- Pela lente
- Base
Pressione a tecla Delete. O nó foi excluído. Também é possível clicar com o botão direito do mouse no nó e usar a opção Excluir elemento.
Pressione Control+Z ou Command+Z (Mac). A última ação é desfeita e o nó reaparece.
Acessar nós no Console
O DevTools fornece alguns atalhos para acessar nós do DOM no console ou receber referências de JavaScript a eles.
Referenciar o nó selecionado no momento com $0
Ao inspecionar um nó, o texto == $0
ao lado dele significa que é possível referenciar esse
nó no Console com a variável $0
.
Clique com o botão direito do mouse em A mão esquerda do escuro abaixo e selecione Inspecionar.
- A mão esquerda das trevas
- Duna
Pressione a tecla Esc para abrir a gaveta do console.
Digite
$0
e pressione a tecla Enter. O resultado da expressão mostra que$0
é avaliado como<li>The Left Hand of Darkness</li>
.Passe o cursor sobre o resultado. O nó será destacado na janela de visualização.
Clique em
<li>Dune</li>
na árvore do DOM, digite$0
no console outra vez e pressione Enter de novo. Agora,$0
é avaliado como<li>Dune</li>
.
Armazenar como variável global
Se você precisar consultar um nó várias vezes, armazene-o como uma variável global.
Clique com o botão direito do mouse em The Big Sleep abaixo e selecione Inspect.
- O Sono Grande
- A longa despedida
Clique com o botão direito do mouse em
<li>The Big Sleep</li>
na árvore do DOM e selecione Armazenar como variável global. Consulte o Apêndice: opções ausentes caso essa opção não apareça.Digite
temp1
no Console e pressione Enter. O resultado da expressão mostra que a variável é avaliada para o nó.
Copiar caminho JS
Copie o caminho JavaScript para um nó quando precisar referenciá-lo em um teste automatizado.
Clique com o botão direito do mouse em The Brothers Karamazov abaixo e selecione Inspecionar.
- Irmãos Karamazov
- Crime e punição
Clique com o botão direito do mouse em
<li>The Brothers Karamazov</li>
na árvore do DOM e selecione Copy > Copy JS Path. Uma expressãodocument.querySelector()
resolvida para o nó foi copiada para a área de transferência.Pressione Control+V ou Command+V (Mac) para colar a expressão no console.
Pressione Enter para avaliar a expressão.
Interromper quando houver mudanças no DOM
Ele permite pausar o JavaScript da página quando o JavaScript modifica o DOM. Consulte Pontos de interrupção de mudança DOM.
Próximas etapas
Isso abrange a maioria dos recursos relacionados ao DOM no DevTools. Você pode descobrir o restante deles clicando com o botão direito do mouse nos nós na árvore do DOM e testando as outras opções que não foram abordadas neste tutorial. Consulte também Atalhos de teclado do painel Elementos.
Confira a página inicial do Chrome DevTools para descobrir tudo que você pode fazer com ele.
Consulte a Comunidade se quiser entrar em contato com a equipe do DevTools ou receber ajuda da comunidade.
Apêndice: HTML x DOM
Esta seção explica rapidamente a diferença entre HTML e DOM.
Quando você usa um navegador da Web para solicitar uma página como https://example.com
, o servidor retorna um HTML como este:
<!doctype html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is a hypertext document on the World Wide Web.</p>
<script src="/script.js" async></script>
</body>
</html>
O navegador analisa o HTML e cria uma árvore de objetos como esta:
html
head
title
body
h1
p
script
Essa árvore de objetos, ou nós, que representa o conteúdo da página é chamada de DOM. Agora ele tem a mesma aparência do HTML, mas suponha que o script referenciado na parte inferior do HTML execute este código:
const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);
Esse código remove o nó h1
e adiciona outro nó p
ao DOM. O DOM completo agora tem esta aparência:
html
head
title
body
p
script
p
Agora, o HTML da página é diferente do DOM. Em outras palavras, o HTML representa o conteúdo da página inicial, e o DOM representa o conteúdo da página atual. Quando o JavaScript adiciona, remove ou edita nós, o DOM se torna diferente do HTML.
Consulte Introdução ao DOM para saber mais.
Apêndice: rolar para visualizar
Esta é uma continuação da seção Rolar para visualização. Siga as instruções abaixo para concluir a seção.
- O nó
<li>Magritte</li>
ainda precisa ser selecionado na árvore do DOM. Caso contrário, volte para Rolar para visualização e comece de novo. Clique com o botão direito do mouse no nó
<li>Magritte</li>
e selecione Rolar para visualização. A janela de visualização rola para cima novamente para que você possa ver o nó Magritte. Consulte o Apêndice: opções ausentes se você não encontrar a opção Rolar para visualização.
Apêndice: opções ausentes
Muitas das instruções neste tutorial instruem você a clicar com o botão direito do mouse em um nó na árvore do DOM e, em seguida, selecionar uma opção no menu de contexto que aparece. Se a opção especificada não for exibida no menu de contexto, tente clicar com o botão direito do mouse fora do texto do nó.