path: root/files/pt-br/tools/page_inspector/index.html

---
title: Page Inspector
slug: Tools/Page_Inspector
translation_of: Tools/Page_Inspector
---
<div>{{ToolsSidebar}}</div><p>Utilize o Inspector para analisar e modificar a estrutura e layout de uma página.</p>

<h2 id="Abrindo_o_Inspector">Abrindo o Inspector</h2>

<p>Há várias maneiras de abrir o Inspector:</p>

<ul>
 <li>Abrir o "Inspector" pelo menu "Web Developer" (no Mac "Web Inspector" é um submenu do menu "Tools")</li>
 <li>Pressione Ctrl-Shift-i (Cmd-Option-C no Mac OS e Linux)</li>
 <li>Click com o botão direito em um elemento na página, depois click esquerdo em "Inspecionar elemento"</li>
</ul>

<p>O <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> vai aparecer na parte inferior da janela do seu navegador, com o Inspector ativo.</p>

<p>Se você abrir o Inspector clicando em "Inspect Element", algum elemento já estará selecionado e o Inspector vai funcionar conforme demonstrado na seção abaixo chamada <a href="#Selecting-Elements" title="#Selecting-Elements">"Selecionando Elementos"</a>.</p>

<p>Outro caminho é mover o mouse por toda a página: o elemento abaixo do mouse fica em desdwataque e com uma borda pontilhada e são exibidas as informações sobre a sua tag HTML. Ao mesmo tempo, do lado esquedo da janela do Inspector, é exibida sua definição HTML contextualizada. Para quem usa o Firefox 30, serão exibidos também os <em>grid lines</em> do elemento seu <em>modelo de caixa</em>, conforme a imagem a seguir:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7459/inspector-opening.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Após selecionar um elemento, o Inspector funcionará conforme demonstrado na próxima seção <a href="#Selecting-Elements" title="#Selecting-Elements">"Selecionando Elementos"</a>.</p>

<h2 id="Selecionando_elementos"><a name="Selecting-Elements">Selecionando elementos</a></h2>

<p>Quando um elemento é selecionado, seu HTML é destacado do lado esquerdo do Inspector e suas informações de estilo são exibidas no painel de CSS que fica ao lado direito:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6919/inspector-annotated3.png" style="display: block; margin-left: auto; margin-right: auto;">A forma como funciona a seleção de elementos teve mudanças significativas no Firefox 29 e, no Firefox 30 , o Inspector mostra o modelo de caixa de cada elemento da página.</p>

<h3 id="Antes_do_Firefox_29">Antes do Firefox 29</h3>

<p>Quando você seleciona um elemento clicando sobre ele na página, o painel do Inspector fica travado neste elemento. Assim, mesmo se você mover o mouse para outro lugar na página, o Inspector não muda sua exibição para outro elemento. </p>

<p>Ao clicar sobre o elemento selecionado, dois botões são exibidos: o do lado esquerdo desbloqueia o Inspector do elemento e permite que você selecione outro elemento na página. O do lado direito mostra um <a href="/en-US/docs/Tools/Page_Inspector#Element_popup_menu">menu popup</a> sobre o elemento.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6921/inspector-element-annotation.png" style="display: block; height: 167px; margin-left: auto; margin-right: auto; width: 389px;"></p>

<h3 id="Firefox_29">Firefox 29</h3>

<p id="No_Firefox_29.2C_a_borda_pontilhada_ao_redor_do_elemento_e_suas_anota.C3.A7.C3.B5es_s.C3.A3o_mostradas_quando_voc.C3.AA_passa_o_mouse_sobre_o_elemento_na_p.C3.A1gina_e_n.C3.A3o_apenas_quando_o_mesmo_for_selecionado._Al.C3.A9m_disso.2C_o_Inspector_n.C3.A3o_fica_travado_no_elemento_selecionado.3A_ele_exibe_as_informa.C3.A7.C3.B5es_do_elemento_correspondente_ao_que_o_mouse_est.C3.A1_em_cima._Para_selecionar_um_elemento_diferente_na_p.C3.A1gina.2C_clique_no_bot.C3.A3o_.22Select_element.22_que_aparece_na.C2.A0Barra_de_ferramentas_do_Toolbox.3A"><span style="font-size: 14px; line-height: 1.5;">No Firefox 29, a borda pontilhada ao redor do elemento e suas anotações são mostradas quando você passa o mouse sobre o elemento na página e não apenas quando o mesmo for selecionado. Além disso, o Inspector não fica travado no elemento selecionado: ele exibe as informações do elemento correspondente ao que o mouse está em cima. Para selecionar um elemento diferente na página, clique no botão "Select element" que aparece na </span><a href="/en-US/docs/Tools_Toolbox#Toolbar" style="font-size: 14px; line-height: 1.5;">Barra de ferramentas do Toolbox</a><span style="font-size: 14px; line-height: 1.5;">:</span></p>

<p>{{EmbedYouTube("zBYEg40ByCM")}}</p>

<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">A partir do Firefox 30</span></p>

<p>Aqui, o comportamento de seleção é o mesmo do Firefox 29, mas o Inspector também mostra o modelo de caixa e as <em>grid lines</em> para o elemento selecionado na página:</p>

<p>{{EmbedYouTube("y2LcsxE2pR0")}}</p>

<p> </p>

<h2 id="Menu_popup_do_Elemento"><a name="Element_popup_menu">Menu popup do Elemento</a></h2>

<p>Você pode executar algumas tarefas específicas no menu popup. Para ativá-lo, clique no contexto do elemento no painel de HTML:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7461/inspector-popup.png" style="display: block; height: 308px; margin-left: auto; margin-right: auto; width: 540px;"></p>

<p>O menu oferece as seguintes opções para você:</p>

<ul>
 <li><a href="#Editing_HTML">editar o elemento HTML</a></li>
 <li>copiar um código HTML externo ou inter para o elemento (Copy inner / Outer HTML)</li>
 <li>copiar o seletor CSS que seleciona apenas o elemento</li>
 <li>deletar o elemento</li>
 <li>selecionar as pseudo-classes CSS: <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover">:hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a> e <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS</li>
</ul>

<div>Veja outras opções:</div>

<div> </div>

<ul>
 <li>Clique no botão direito do menu quando o elemento está selecionado, conforme demostrado na imagem abaixo:</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/6347/inspector-element-selected-context-menu-cropped.png" style="display: block; height: 291px; margin-left: auto; margin-right: auto; width: 399px;"></p>

<ul>
 <li>Clique com o botão direito em cima de um elemento dentro do <a href="#HTML_pane">Painel de HTML</a> do Inspector:</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/6349/inspector-html-context-menu.png" style="display: block; height: 299px; margin-left: auto; margin-right: auto; width: 399px;"></p>

<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">Copiar a URL de imagens</span></p>

<p><span style="line-height: 1.5;">A partir do Firefox 29, se o elemento selecionado for uma imagem, há também a opção de copiar A URL da imagem.:</span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7011/inspector-copyasdatauri.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 529px;"></p>

<h3 id="Editando_HTML"><a name="Editing_HTML">Editando HTML</a></h3>

<p><br>
 <span style="line-height: 1.5;">Para editar um elemento externamente (</span><a href="/en-US/docs/Web/API/Element.outerHTML" style="line-height: 1.5;">outerHTML</a>)<span style="line-height: 1.5;">, selecione no menu popup a opção "Edit As HTML". Uma caixa para edição de HTML será aberta:</span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6351/inspector-html-edit-html.png" style="display: block; margin-left: auto; margin-right: auto;">Você pode adicionar qualquer código HTM aqui: alterando tags ou adicionando novas. Para sair, basta clicar fora da caixa e as modificações serão realizadas na página.</p>

<h2 id="Painel_de_HTML"><a name="HTML_pane">Painel de HTML</a></h2>

<p><img alt="" src="https://mdn.mozillademos.org/files/5459/inspector-html-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">O painel de HTML exibe a página HTML como uma árvore, em que é possível expandir e recolher cada nó. O início e o fim de cada tag para os elementos selecionados ficam em destaque com a cor fundo acizentada.</p>

<p><span style="line-height: 1.5;">Você pode editar o HTML - tags, atributos e conteúdo - diretamente no painel: clique no elemento que você deseja editar, realize as modificações e dê Enter que as mudanças podem já ser vistas na página.</span></p>

<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">Barra de ferramentas do painel de HTML</span></p>

<p>Na parte de cima do painel, há uma barra de ferramentas dividida em três partes:</p>

<div class="geckoVersionNote">
<p>A partir do Firefox 29, o botão "Select element" foi movido para a <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox</a>.</p>
</div>

<ul>
 <li><em>Select element (Selecione o elemento)</em>: se você clicar neste botão, você pode selecionar um elemento diferente na janela do navegador.</li>
 <li><em>HTML breadcrumbs</em>: aqui você pode verificar a hierarquia completa dos elementos da página ou da parte da página que estiver inspecionando. Se você clicar e segurar o clique sobre algum elemento, um menu popup aparecerá e permitirá que você selecione um dos elementos irmãos dele.</li>
 <li><em>Search tags (Buscar tags)</em>: aqui você pode buscar por tags presentes na página. Com o "Enter", você busca as próximas ocorrências da tag, se houver.</li>
</ul>

<h2 id="Painel_de_CSS">Painel de CSS</h2>

<p>O painel de CSS mostra as informações de estilo relacionadas ao elemento que está sendo inspecionado. Há 4 opções de visualização nesse painel:  "Rules", "Computed", "Fonts", and "Box Model". Você pode chavear entre elas clicando no menu superior:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5463/inspector-css-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Menu_Rules">Menu Rules</h3>

<p>Aqui são mostradas todas as regras aplicadas ao elemento selecionado, na ordem da mais específica à menos:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5467/inspector-css-rules.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Aqui também são listados os <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a> e as regras que eles aplicam.</p>

<h4 id="Tela_da_opção_Rules">Tela da opção <em>Rules</em></h4>

<p>Essa tela mostra todas as regras como em um folha de estilo, com uma lista de seletores seguida de uma lista de <code>propriedade:valor;</code> declarações.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="display: block; height: 206px; margin-left: auto; margin-right: auto; width: 544px;">Você pode realizar testes com todas as declarações deixando-as desabilitadas. Para isso, basta clicar no checkbox ao lado de cada uma, alterando entre habilitada ou não.</p>

<h4 id="Link_para_o_arquivo_CSS">Link para o arquivo CSS</h4>

<p>À direita de cada declaração, é exibido o link com o nome do arquivo CSS e o número da linha em que ela se encontra. Se você clicar ali, o arquivo será aberto no <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>

<p>A partir do Firefox 29, o Inspector entende o mapa do código CSS (<em>CSS source map</em>). Isso significa que se você estiver utilizando um editor CSS em que funcionem os mapas de código e se você habilitar o mapa de código no <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, o link levará você até o código original e não ao CSS gerado.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="display: block; height: 133px; margin-left: auto; margin-right: auto; width: 390px;"></p>

<p>Leia mais sobre isso em <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Style Editor documentation</a>.</p>

<h4 id="Amostra_de_cores">Amostra de cores</h4>

<div class="geckoVersionNote">
<p>A partir do Firefox 27,  você pode ver a amostra da cor próxima ao seu valor:</p>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p>

<h4 id="Seletor_de_cor">Seletor de cor</h4>

<div class="geckoVersionNote">
<p>A partir do Firefox 28, se você clicar na amostra de cor, uma paleta de cores será aberta para você selecionar qual deseja.</p>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/6659/inspector-color-picker.png" style="display: block; height: 321px; margin-left: auto; margin-right: auto; width: 411px;"></p>

<h4 id="Pré-visualização_da_imagem_de_fundo_(Imagem_background-image_preview)">Pré-visualização da imagem de fundo (Imagem background-image preview)</h4>

<div class="geckoVersionNote">
<p>A partir do Firefox 27,  você pode pré-visualizar a imagem especificada utilizando o <a href="/en-US/docs/Web/CSS/background-image">background-image</a> que funciona ao passar o mouse sobre o link da imagem:</p>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/6413/inspector-background-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h4 id="Visualização_transform">Visualização transform </h4>

<div class="geckoVersionNote">
<p>Isto é novo no Firefox 29.</p>
</div>

<p>A partir do Firefox 29 , se você passar o mouse sobre a propriedade <a href="/en-US/docs/Web/CSS/transform"><code>transform</code></a> na tela <em>Rules, </em> você consegue visualizar a transformação que ali ocorre:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h4 id="Editando_rules">Editando <em>rules</em></h4>

<p>Se você clicar em uma declaração para editar sua propriedade ou valor, você visualiza o resultado imediatamente (aqui você também pode adicionar novas declarações, basta clicar no fim de uma já existente e dar Enter). O Inspector reconhece inclusive se você inserir um valor ou propiedade errado ou inexistente: ele coloca um alerta amarelo no local.</p>

<p><span style="line-height: 1.5;">Qualquer mudança que você fizer é temporária: com um <em>reload</em> a página volta com seu estilo original.</span></p>

<p><strong>Dica:</strong> Você pode usar as setinhas do seu teclado para fazer ajustes nos valores numéricos enquanto edita, como se fosse um ajuste fino.</p>

<h3 id="Menu_Computed">Menu <em>Computed</em></h3>

<p>Nesta opção, o estilo do elemento é organizado pela propriedade. Isso lista todas as propriedades CSS que foram aplicadas ao elemento em ordem alfabética e os valores para cada uma:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5473/inspector-css-computed.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Clicando na propriedade, você vê a declaração referente àquele valor mais o link para o arquivo de código e número da linha:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5665/inspector-css-computed-show-rule.png" style="display: block; margin-left: auto; margin-right: auto;">Como padrão, só são mostrados os valores que estão sendo explicitamente usados na página: para ver todos valore, selecione a opção "Browser styles" que fica na parte de baixo do painel. </p>

<p>Utilize o campo de busca (search box) para buscar na página as declarações tanto por propriedades quanto por valores. Por exemplo, se você bucar por "font", serão exibidas todas as propriedades que estão na página que contêm a palavra "font" em seu nome.</p>

<h3 id="Menu_Fonts">Menu Fonts</h3>

<p>Aqui são listadas todas as fontes (ou a única) que estão sendo utilizadas pelo elemento selecionado. Mas, veja que são mostradas as fontes usadas no seu sistema, que não necessariamente é a fonte especificada no CSS original:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5469/inspector-css-fonts.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p><span style="font-size: 1.7142857142857142rem; letter-spacing: -0.5px; line-height: 24px;">Menu Box model</span></p>

<p>Aqui é exibida uma representação gráfica do modelo de caixa (<a href="/en-US/docs/Web/CSS/box_model" style="line-height: 1.5;" title="/en-US/docs/Web/CSS/box_model">box model</a><span style="line-height: 1.5;">) aplicado ao elemento:</span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5667/inspector-css-box-model.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<ul>
 <li>Ao lado superior esquerdo está o valor do espaço total tomado pelo elemento na página.</li>
 <li>Os números que estão do lado de fora da caixa mostram o valor da <em>margin</em> de cada lado do elemento.</li>
 <li>Os números nas bordas da caixa mostram quanto cada lado da borda ocupa. </li>
 <li>Os númeris que estão do lado de dentro da caixa mostram o valor de <em>padding</em> de cada lado do elemento.</li>
 <li>E, no centro da caixa, é mostrado o tamanho do conteúdo da caixa.</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="display: block; height: 435px; margin-left: auto; margin-right: auto; width: 680px;"></p>

<h2 id="Usando_o_Inspector_com_um_Web_Console">Usando o Inspector com um Web Console</h2>

<p>Você tamabém pode utilizar um web console ao mesmo tempo em que usa o inspetor de página. Na verdade, você inclusive possui uma feature a mais: o elemento selecionado que está sendo inspecionado pelo inspetor de página pode ser referenciado em JavaScript no Web Console através da utilização da variável <code>$0</code>.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Developer_API">Developer API</h2>

<p>O Firefox pode acessar os seguintes objetos a partir do contexto chrome://browser/content/devtools/inspector/inspector.xul:</p>

<h3 id="window.inspector">window.inspector</h3>

<p>definido em <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Atributos e funções:</p>

<ul>
 <li>.selection - informações sobre o elemento inspecionado:
  <ul>
   <li>.isNode() - retorna true se a seleção for um nó.</li>
   <li>.node - retorna o elemento real da página.</li>
   <li>.window - A janela do objeto em que o frame da seleção está.</li>
  </ul>
 </li>
 <li>.markDirty() - marca que a página foi modificada pelo inspetor - uma warning será exibida, desde que as modificações realizadas através do inspetor forem reescritas e recarregadas.</li>
</ul>

<p>Bindable events using on:</p>

<h4 id="markuploaded">markuploaded</h4>

<p>Called when the left panel has been refreshed, after page change.</p>

<h4 id="ready">ready</h4>

<p>Called on first markuploaded.</p>

<h4 id="pseudoclass">pseudoclass</h4>

<p>Called after toggle of a pseudoclass.</p>

<h4 id="layout-change">layout-change</h4>

<p>"low-priority change event for things like paint and resize."</p>

<h2 id="Atalhos_de_teclado">Atalhos de teclado</h2>

<p>{{ Page ("en-pt-BR/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>

<h3 id="Global_shortcuts">Global shortcuts</h3>

<p>{{ Page ("pt-BR/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>