initial commit

8 files changed, 791 insertions, 0 deletions

diff --git a/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html b/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html
new file mode 100644
index 0000000000..26eb590aae
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/edit_css_filters/index.html
@@ -0,0 +1,32 @@
+---
+title: Edit CSS filters
+slug: Tools/Page_Inspector/How_to/Edit_CSS_filters
+tags:
+  - CSS
+  - DevTools
+  - Ferramentas
+  - Filtros
+  - Inspetor de Página
+translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters
+---
+<div>{{ToolsSidebar}}</div><p><code>propriedades do <a href="/en-US/docs/Web/CSS/filter">filter</a></code> nas <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> tem uma amostra de cinza e branco circular ao lado deles:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10873/filter-editor-swatch.png" style="display: block; height: 70px; margin-left: auto; margin-right: auto; width: 768px;"></p>
+
+<p>Clicando na amostra abre um editor de filtro:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11309/filter-editor.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 603px;">Você pode adicionar, remover e editar os filtros, e arrastá-los para alterar a ordem em que eles são aplicados:</p>
+
+<p>{{EmbedYouTube("yws01SEPTvg")}}</p>
+
+<h2 id="Salvar_predefinições_de_filtro">Salvar predefinições de filtro</h2>
+
+<p>Do Firefox 42 em diante, você também pode adicionar filtros para uma lista de predefinições:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11311/filter-editor-presets.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 603px;">Você pode salvar o filtro atual na lista de predefinições:</p>
+
+<p>{{EmbedYouTube("bHcfLlZE8T8")}}</p>
+
+<p>Em seguida, você pode aplicar filtros salvos para novos elementos:</p>
+
+<p>{{EmbedYouTube("PK85L7ztQto")}}</p>
diff --git a/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html
new file mode 100644
index 0000000000..b1c8414a5b
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/examinando_eventos_escuta/index.html
@@ -0,0 +1,26 @@
+---
+title: Examinando Eventos de Escuta
+slug: Tools/Page_Inspector/How_to/Examinando_eventos_escuta
+translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners
+---
+<div>{{ToolsSidebar}}</div><p>No Firefox 33 você verá um ícone "ev" no <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML Pane</a>, próximo a elementos que tem eventos de escuta como mostra a figura abaixo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9955/ev-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 571px;"></p>
+
+<p>Clicando no ícone, então você verá um popup listando todos eventos de escuta para este elemento:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">Cada linha contém:</p>
+
+<ul>
+ <li>um botão pause: clique neste para ir ao evento de escuta no <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Debugger</a>, onde você poderá setar um <em>breakpoint in it</em></li>
+ <li>o nome do evento</li>
+ <li>o nome, o número da linha para o evento de escuta: clique neste para ver a função de escuta no popup</li>
+ <li>o label indicando se o evento bubbles</li>
+ <li>a label indicando o sistema que define o evento. O Firefox pode mostrar:
+  <ul>
+   <li>evento padrão - DOM</li>
+   <li><a class="external external-icon" href="http://api.jquery.com/category/events/">eventos jQuery</a></li>
+   <li><a href="https://facebook.github.io/react/docs/events.html">eventos React</a> (novo no Firefox 53)</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html
new file mode 100644
index 0000000000..5779b9403f
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/examine_and_edit_css/index.html
@@ -0,0 +1,216 @@
+---
+title: Examinar e editar CSS
+slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+tags:
+  - Barra de Ferramentas
+  - CSS
+  - Estilos
+  - Ferramentas
+  - Firefox
+  - Guia(2)
+  - Inspetor
+  - Regras de CSS
+  - Utilidades
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+---
+<div>{{ToolsSidebar}}</div><p>Você pode examinar e editar CSS no <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">painel CSS</a> do Inspetor.</p>
+
+<h2 id="Analisar_regras_de_CSS">Analisar regras de CSS</h2>
+
+<p>A <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">visualização das listas de todas regras</a> que se aplicam a um elemento selecionado são ordenados das formas mais específica até a menos específica:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>As regras também podem ser visualizadas pelo <a href="/en-US/docs/Web/CSS/Cascade">estilo de agente-visualizador</a> (estilos que são aplicados pelo navegador), para ativar esta opção, a própria dever ser marcada <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">nas configurações da barra de ferramentas</a>. Note que essa configuração é independente da checkbox "Estilo do Navegador" na <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">aba de visualização de estilos "Computado"</a>.</p>
+
+<p>Do Firefox versão 44 em diante, todas as Regras do CSS são exibidas, including styles that are not supported or that are invalid. This can help you understand why certain styles are not being applied:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h3 id="Regra_de_exibição">Regra de exibição</h3>
+
+<p>Cada regra é exibida como uma folha de estilo, com uma lista de seletores seguida de uma lista de declarações <code>propriedade:valor;</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p>
+
+<ul>
+ <li><em>Destaque de elementos combinados</em>: junto ao seletor está um ícone de destino: clique nele para destacar todos os nós correspondentes da página a este seletor.</li>
+ <li><em>Declaração de sobrescrita</em>: declarações que são sobrescritas por regras posteriores são cruzadas. Veja <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">declarações de sobrescrita</a>.</li>
+ <li><em>Exibição em cascata</em>: junto a declarações de sobrescritas está uma magnifying glass: click this to see the cascade of rules containing the overridden property. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">overridden declarations</a>.</li>
+ <li><em>Enable/disable</em>: se você passar o mouse sobre a declaração, uma checkbox aparecerá proximo a ela: você pode usar para alterar a declaração entre on ou off.</li>
+ <li><em>Nome do arquivo e número da linha</em>: no lado direto exite um link com as regras. Veja o <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">link para o arquivo CSS</a>.</li>
+</ul>
+
+<p>User-agent styles são exibidos com o fundo diferente, e o link com nome do arquivo e o número da linha contendo o prefixo <code>(user agent)</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p>
+
+<h3 id="Regras_de_Filtragem">Regras de Filtragem</h3>
+
+<p>Iniciado no Firefox 40, ela é uma caixa que fica no topo da vizualização das regras "Filter Styles":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;">Enquanto você digita:</p>
+
+<ul>
+ <li>qualquer regra que não contenha o valor digitado são ocultadas</li>
+ <li>qualquer regra que estiver com o valor digitado serão destacadas</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Clique no "X" para fechar a caixa de pesquisa e remover os filtros.</p>
+
+<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p>
+
+<h4 id="Pesquisa_restrita">Pesquisa restrita</h4>
+
+<div class="geckoVersionNote">
+<p>Novo no Firefox 43</p>
+</div>
+
+<p>Por padrão, a caixa de pesquisa destaca todas as declaraçõs que contem qualquer parte do valor digitado. Por exemplo, pesquise por "color" irá destacar uma linha que tenha o valor digitado <code><a href="/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> e <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> bom como apenas <code><a href="/en-US/docs/Web/CSS/color">color</a></code>.:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>Iniciado no Firefox 43, se você incluir aspas simples na pesquisa , dessa forma: `color`, a pesquisa será restringida a ter somente o que está entre aspas simples:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h3 id="Mostrando_pseudo-elementos">Mostrando pseudo-elementos</h3>
+
+<p>Do Firefox 41, a regra é exibir os seguintes <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>, <span class="short_text" id="result_box" lang="pt"><span>se forem aplicados ao elemento selecionado</span></span>:</p>
+
+<p><code>::after<br>
+ ::backdrop</code> (Novo no Firefox 46)<br>
+ <code>::before<br>
+ ::first-letter<br>
+ ::first-line<br>
+ ::selection<br>
+ :-moz-color-swatch<br>
+ :-moz-number-spin-box<br>
+ :-moz-number-spin-down<br>
+ :-moz-number-spin-up<br>
+ :-moz-number-text<br>
+ :-moz-number-wrapper<br>
+ :-moz-placeholder<br>
+ :-moz-progress-bar<br>
+ :-moz-range-progress<br>
+ :-moz-range-thumb<br>
+ :-moz-range-track<br>
+ :-moz-selection</code></p>
+
+<p>Se o elemento selecionado for um pseudo-elemento aplicado a ele, ele mostrará antes do elemento selecionado porém oculto por um triângulo de divulgação:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p>
+
+<p>Clicando no triângulo irá mostrar os elementos:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<h3 id="Configuração_hover_active_focus">Configuração :hover, :active, :focus</h3>
+
+<p>Do Firefox 41, ele é um novo botão a direita da caixa de filtros:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">Clique no botão para ver três checkboxes, que você pode usar para {{cssxref(":hover")}}, {{cssxref(":active")}} e {{cssxref(":focus")}} pseudo-classes para o elemento selecionado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">Apesar desse botão ser novo no Firefox 41, o recurso já existia em versões anteriores do Firefox. Poderia - e ainda pode - ser acessado a partir do <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">na janela HTML</a>.</p>
+
+<div class="geckoVersionNote">
+<p>Novo no Firefox 43</p>
+</div>
+
+<p>Iniciado no Firefox 43, se você definir uma dessas pseudo-classes para um nó, <span id="result_box" lang="pt"><span>um ponto laranja aparecerá na exibição de marcação ao lado de todos os nós aos quais a</span></span> pseudo-class foi aplicada:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h3 id="Link_para_arquivo_CSS">Link para arquivo CSS</h3>
+
+<p>No canto superio direito de cada regra, O nome do arquivo fonte e o número da linha é exibida como link: cliquenele para abrir no <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<p>Do Firefox 41 você pode copiar o local do arquivo fonte: Clique com botão direito no link e selecione "Copar localização".</p>
+
+<p><span id="result_box" lang="pt"><span>O Inspetor entende os mapas de origem CSS</span></span>. <span id="result_box" lang="pt"> <span>Isso significa que se você estiver usando um pré-processador CSS que tenha suporte para mapas de origem e ativado o suporte ao mapa de origem nas</span></span> <a href="/en-US/docs/Tools_Toolbox#Style_Editor">configurações do editor de estilo</a>, <span id="result_box" lang="pt"><span>o link o levará para a fonte original e não para o CSS gerado</span></span> . <span id="result_box" lang="pt"> <span>Leia mais sobre o suporte ao mapa de origem CSS na</span></span> <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">documentação do edtiro de estilo</a>.</p>
+
+<h3 id="Obtendo_ajuda_para_propriedades_CSS">Obtendo ajuda para propriedades CSS</h3>
+
+<p>Iniciado no Firefox 40, <em><font face="Yu Gothic UI Semibold, sans-serif"><span style="font-style: normal;">se você clicar no nome da propriedade na visualização das regras, você pode abrir uma janela mostrando ajuda com aquela propriedade no MDN</span></font></em>:</p>
+
+<p>{{EmbedYouTube("ptVtAEOK7y4")}}</p>
+
+<p>Perceba que nesse momento, <span id="result_box" lang="pt"><span>isso não armazena em cache respostas de MDN, por isso requer conectividade de rede.</span></span></p>
+
+<h3 id="Substituir_declarações">Substituir declarações</h3>
+
+<p>Se uma declaração no CSS pode ser substituído por qualquer regra CSS com um peso maior, <span id="result_box" lang="pt"><span>Então a declaração é mostrada com uma linha através dele</span></span>.</p>
+
+<div class="geckoVersionNote">
+<p>Novo no Firefox 43</p>
+</div>
+
+<p>Iniciado no Firefox 43, d <span id="result_box" lang="pt"><span>eclarações de substituição têm uma lupa ao lado deles</span></span> . Clique na lupa para filtrar a regra <span id="result_box" lang="pt"><span>para mostrar apenas as regras que se aplicam ao notação atual que tentam definir a mesma propriedade</span></span>: <span id="result_box" lang="pt"><span>isto é, a cascata completa para a propriedade dada.</span></span></p>
+
+<p><span id="result_box" lang="pt"><span>Isso torna mais fácil ver qual regra está substituindo a declaração:</span></span></p>
+
+<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p>
+
+<h2 id="Examine_CSS_calculado">Examine CSS calculado</h2>
+
+<p>Para ver o calculo compelo to CSS par ao elemento selecionado, altere para a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Janela Computed</a>. This shows the calculated value that each CSS property has for the selected element:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p><em><font face="Yu Gothic UI Semibold, sans-serif"><span style="font-style: normal;">Clicando na flecha próximo ao nome da propriedade mostra a regra que define esse valor, j</span></font></em><em><font face="Yu Gothic UI Semibold, sans-serif"><span lang="pt-PT"><span style="font-style: normal;">untamente com um link para o nome do arquivo fonte e o número da linha</span></span></font></em>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;">Por padrão, exibe apenas valores expicitamente definidos pela página: para ver todos os valores clique na caixa "Browser styles"</p>
+
+<p style="margin-bottom: 0cm; line-height: 100%;"> </p>
+
+<p>Digitar na caixa de pesquisa executa uma filtragem automática na lista, portanto, por exemplo, se você quiser apenas ver as configurações relacionadas a fontes, você pode digitar “font” na caixa de pesquisa e somente propriedades com “font” no nome serão listados. Você também pode pesquisar para valores das propriedades: para encontrar a regra responsável por definir a fonte para “Lucida Grande”, digite isso na caixa de pesquisa.</p>
+
+<h2 id="Editar_regras">Editar regras</h2>
+
+<p>Se você clicar na declaração ou em algum seletor na visualização das regras, poderá editar e ver o resultado imediatamente. Para adicionar uma nova declaração para uma regra, clique na última linha da regra(a linha ocupada pela chave de fecho)</p>
+
+<p>Quando você começar a digitar o nome da propriedade, você verá uma lista de sugestões de auto-preenchimento. Pressione <kbd>Tab</kbd> para aceitar a sugestão destacada ou <kbd>Cima</kbd> e <kbd>Baixo</kbd> para mover entre as sugestões.</p>
+
+<p>Iniciado no Firefox 48, <span class="short_text" id="result_box" lang="pt"><span>a escolha padrão é a propriedade mais comum</span></span> <span class="short_text" id="result_box" lang="pt"><span>que começa com as letras que você digitou</span></span> . Por exemplo, aqui nós escrevemos "c" e o padrão escolheu "color":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p>Se você colocar um valor inválido para uma propriedade ao editar, ou uma propriedade desconhecida, um icone de alerta amarelo aparece além da declaração.</p>
+
+<p>Qualquer mudança é temporária: Atualizando a página voltará ao normal.</p>
+
+<p><span id="result_box" lang="pt"><span>Você pode usar as teclas de seta para aumentar/diminuir regras numéricas durante a edição</span></span> . O botão <kbd>Cima</kbd> transformará "1px" para 2px, e <kbd>Shift</kbd> + <kbd>Cima</kbd>/<kbd>Baixo</kbd> irá acrescentar ou diminuir 10. <kbd>Alt</kbd> + <kbd>Cima</kbd>/<kbd>Baixo</kbd> altera os valores por 0.1, e <kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> você adiciona ou subtrai 100 do valor.</p>
+
+<p>Do Firefox 44, a <span id="result_box" lang="pt"><span>s edições feitas na visualização regras são refletidas no</span></span> <a href="/en-US/docs/Tools/Style_Editor">editor de estilo</a>, e vicce-versa.</p>
+
+<h2 id="Regras_adicionais">Regras adicionais</h2>
+
+<p>Você pode adicionar novas regras na vizualização de regras. Basta clicar com o botão direito para exibirr um menu e selecionar "Add rule". Isso vai adionar uma nova regra cujo o seletor corresponde a seleção atual.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>Inicio no Firefox 41, <span id="result_box" lang="pt"><span>Há um botão que permite que você faça a mesma coisa</span></span>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h2 id="Copiando_regras">Copiando regras</h2>
+
+<p>Inciado no Firefox 41, há itens extras no menu de regras que permite copiar regras ou partes de regras para a área de transferência:</p>
+
+<ul>
+ <li>Copar Regra</li>
+ <li>Copiar Seletor</li>
+ <li>Copiar Declaração da  Propriedade</li>
+ <li>Copiar Nome da Propriedade</li>
+ <li>Copiar Valor da propriedade</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>O Inspetor também inclui um número de ferramentas especializadas para trabalhar com funcionalidades particulares em CSS, tais como cores, fontes, e animações. Para saber mais sobre leia a lista <a href="/en-US/docs/Tools/Page_Inspector">como guiar</a>.</li>
+</ul>
diff --git a/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html
new file mode 100644
index 0000000000..9feb12e545
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/examine_grid_layouts/index.html
@@ -0,0 +1,34 @@
+---
+title: 'CSS Grid Inspector: Examine grid layouts'
+slug: Tools/Page_Inspector/How_to/Examine_grid_layouts
+tags:
+  - Ferramentas
+  - Guía
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts
+---
+<div>{{ToolsSidebar}}</div><h2 id="Ícones_da_grade_na_visão_de_Réguas">Ícones da grade na visão de Réguas</h2>
+
+<div class="geckoVersionNote">Novo no Firefox 52</div>
+
+<p>Começando na Ferramenta de Desenvolvedores do Firefox 52, você pode soliciar ao inspetor que sobreponha uma representação da grid quando inspecionar layouts com grids.</p>
+
+<p>Quando um elemento na visão de Régua possui uma declaração <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code>, ele leva um ícone de grade (grid) ao lado dele: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. Clique no ícone para apresentar a grade (grid) sobreposta na página, incluindo as linhas da grid e faixas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14526/inspector-grid-overlay.png" style="display: block; height: 893px; margin-left: auto; margin-right: auto; width: 695px;">A sobreposição (overlay) continua a ser apresentada quando você seleciona outros elementos, então você pode editar o CSS de outros itens da grid e ver como a grid é afetada.</p>
+
+<p>{{EmbedYouTube("lzjIe-8WhiQ")}}</p>
+
+<h2 id="O_painel_de_layout_da_grid">O painel de layout da grid</h2>
+
+<div class="geckoVersionNote">Novo no Firefox 56</div>
+
+<p>Firefox 56 baseia-se nos recursos anteriores de grade, provendo um inteiramente novo painel de layout cheio de opções e informações para grades de depuração. Você pode encontrar todas as informações que precisa sobre isto em <a href="https://hacks.mozilla.org/2017/06/new-css-grid-layout-panel-in-firefox-nightly/">Novas adições poderosas para o Inspetor de grades CSS no Firefox Nightly</a>.</p>
+
+<p>{{EmbedYouTube("dU7xtnzfqxQ")}} </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Para diversos exemplos interessantes de grid, confira em <a href="http://labs.jensimmons.com/">labs.jensimmons.com</a>.</li>
+</ul>
diff --git a/files/pt-br/tools/page_inspector/how_to/index.html b/files/pt-br/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..2f18038ec9
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: How to
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p>
+
+<p>{{ ListSubpages () }}</p>
+
+<p> </p>
diff --git a/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html b/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html
new file mode 100644
index 0000000000..3f7af895dd
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/open_the_inspector/index.html
@@ -0,0 +1,19 @@
+---
+title: Open the Inspector
+slug: Tools/Page_Inspector/How_to/Open_the_Inspector
+tags:
+  - Ferramentas
+  - Guía
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>Há duas formas principais de abrir o Inspector:</p>
+
+<ul>
+ <li><em>sem um elemento selecionado</em>: selecione "Developer -&gt; Toggle Tools" do Botão de Menu ou o <a href="https://developer.mozilla.org/en-US/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">atalho de teclado</a> correspondente</li>
+ <li><em>com um elemento selecionado</em>: clique em um elemento em uma página web com o botão direito do mouse e selecione "Inspecionar Elemento"</li>
+</ul>
+
+<p>O Inspector aparecerá no final da janela do navegador:</p>
+
+<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15493/57-inspector-starfish.png" style="display: block; height: 647px; margin-left: auto; margin-right: auto; width: 845px;">Para começar a utilizar o Inspector, veja a <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">UI tour</a>.</p>
diff --git a/files/pt-br/tools/page_inspector/how_to/trabalho_com_animaçoes/index.html b/files/pt-br/tools/page_inspector/how_to/trabalho_com_animaçoes/index.html
new file mode 100644
index 0000000000..8d2d788d50
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/how_to/trabalho_com_animaçoes/index.html
@@ -0,0 +1,175 @@
+---
+title: Trabalho Com Animações
+slug: Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes
+translation_of: Tools/Page_Inspector/How_to/Work_with_animations
+---
+<div>{{ToolsSidebar}}</div><p>This article covers three tools you can use to visualize and edit animations:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">the animation inspector</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">editing @keyframes</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">editing timing functions</a></li>
+</ul>
+
+<h2 id="Animation_inspector">Animation inspector</h2>
+
+<div class="note">
+<p>This page describes the Animation inspector as it appears in Firefox 48. Note that the example requires Firefox 47 or higher.</p>
+</div>
+
+<p>The Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">Animations view</a> displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point.</p>
+
+<p>It displays animations created using <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS @keyframes rules</a>, or the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>. Starting in Firefox 48, it will show animations applied to the <code><a href="/en-US/docs/Web/CSS/::before">::before</a></code> and <code><a href="/en-US/docs/Web/CSS/::after">::after</a></code> pseudo-elements.</p>
+
+<p>To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect.</p>
+
+<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API") }}</p>
+
+<p>These animations are made using the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>.</p>
+
+<p>Let's use the animation inspector to see what's going on in this example.</p>
+
+<ol>
+ <li>Using Firefox 47 or later, right-click in the box and select "Inspect Element"</li>
+ <li>Make sure the selected element is the <code>&lt;div class="channel"&gt;</code></li>
+ <li>Switch over to the "Animations" tab</li>
+ <li>Play the animation</li>
+</ol>
+
+<p>{{EmbedYouTube("OYkFARSgQB8")}}</p>
+
+<p>Let's take a closer look at the contents of the animation inspector here:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13104/animation-inspector-firefox-48-part-1.png" style="display: block; height: 196px; margin-left: auto; margin-right: auto; width: 762px;"></p>
+
+<p>It shows a synchronized timeline for every animation applied to the selected element or its children. The timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).</p>
+
+<h3 id="Animation_bars">Animation bars</h3>
+
+<p>Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is:</p>
+
+<ul>
+ <li>blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property</li>
+ <li>orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used</li>
+ <li>green if the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> was used</li>
+</ul>
+
+<p>The bar contains a lightning bolt icon <img alt="" src="https://mdn.mozillademos.org/files/13106/compositor.png" style="width: 15px;"> if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</p>
+
+<p>If the animation used CSS transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. If the animation used CSS <code>@keyframes</code>, there is one bar for each animation, labeled with its name.</p>
+
+<p>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar. <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>delay</code> and <code>endDelay</code></a> are both represented.</p>
+
+<p>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including:</p>
+
+<ul>
+ <li>the type of animation: CSS transition, CSS animation, or Web Animations API</li>
+ <li>the duration of the animation</li>
+ <li>the animation's start and end delay</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13108/animation-inspector-firefox-48-part-2.png" style="display: block; height: 210px; margin-left: auto; margin-right: auto; width: 762px;"></p>
+
+<h3 id="Information_about_the_animated_element">Information about the animated element</h3>
+
+<p>To the left of each bar is a selector for the element that the animation applies to. If you hover over this selector, the element is highlighted in the page. Click the selector to select the element in the inspector.</p>
+
+<p>{{EmbedYouTube("AvICwiWpYiE")}}</p>
+
+<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). Clicking this icon will lock the highlighter on the element.</p>
+
+<h3 id="Animation_details">Animation details</h3>
+
+<p>If you click one of the bars, you'll see details of all the properties that were changed in the animation. For example, try clicking on the bar for <code>img#icon</code>'s animation:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13110/animation-inspector-firefox-48-part-3.png" style="display: block; height: 223px; margin-left: auto; margin-right: auto; width: 762px;"></p>
+
+<p>This is telling us that two properties were modified: <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code>. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. <code>filter</code> was given a value at 250ms and <code>transform</code> at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13112/animation-inspector-firefox-48-part-4.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 762px;"></p>
+
+<p>This is essentially a visual representation of the animation's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API#JavaScript_Content">keyframes</a>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> iconKeyframeSet <span class="operator token">=</span> <span class="punctuation token">[</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1)'</span><span class="punctuation token">,</span>   filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'                </span><span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span>                          filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.333</span><span class="punctuation token"> }</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span>                            offset<span class="punctuation token">:</span> <span class="number token">0.666</span> <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(0%)'</span><span class="punctuation token">                  }</span>
+<span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<h3 id="Application_to_the_example">Application to the example</h3>
+
+<p>Applying all this to our example, we can see that:</p>
+
+<ul>
+ <li>The animation involved two elements, <code>span#note</code> and <code>img#icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon.</li>
+ <li>The <code>img#icon</code> animation:
+  <ul>
+   <li>animated the <code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> properties, to scale the icon and color it</li>
+   <li><span style="display: none;"> </span><span style="display: none;"> </span> lasted 750ms, had an <code>endDelay</code> of 100ms</li>
+   <li>used the compositor thread.</li>
+  </ul>
+ </li>
+ <li><span style="display: none;"> </span><span style="display: none;"> </span>The <code>span#note</code> animation:
+  <ul>
+   <li>animated the <code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> properties, to make the name gradually appear</li>
+   <li>lasted 500ms, and had a <code>delay</code> of 150ms.</li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="Further_information_about_animation_compositing">Further information about animation compositing</h3>
+
+<p>In Firefox 49 and above, the information exposed by the Animation Inspector about animation performance/compositing has been improved. We've created a couple of examples to demonstrate this. If you open up <a href="https://mdn.github.io/animation-examples/animation-inspector-compositing.html">animation-inspector-compositing.html</a> and click the red rectangle, a simple {{cssxref("opacity")}} animation will start. If you look at this in the Animation Inspector in Firefox 49+, you'll see that:</p>
+
+<ul>
+ <li>The white lightning bolt icon now indicates whether all the animation properties have been optimized by running them through the compositor, where possible.</li>
+ <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "All animation properties are optimized."</li>
+ <li>The expanded animation information now includes a lightning bolt icon next to the properties whose animation has been optimized via the compositor.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13589/compositing-information-1.png" style="display: block; height: 349px; margin: 0px auto; width: 1065px;"></p>
+
+<p>Let's now look at <a href="https://mdn.github.io/animation-examples/animation-inspector-compositing-silly.html">animation-inspector-compositing-silly.html</a> — this is the same example, except that now once the red rectangle is clicked we animate both the {{cssxref("left")}} and {{cssxref("transform")}} (with a translation) properties at the same time as {{cssxref("opacity")}}. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the <code>transform</code> property is deliberately not handed over to the compositor to handle. The Animation Inspector will rather helpfully tell you this in Firefox 49+ — look at it now and you'll see that:</p>
+
+<ul>
+ <li>The white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the relevant properties are being optimized by the compositor.</li>
+ <li>The bar tooltip also includes this information, as a further reminder. You'll get a message of "Some animation properties are optimized."</li>
+ <li>Properties whose animation is <strong>not</strong> being optimized, but could be if you improved your code, are now given a dotted underline — see transform in the screenshot below. Hovering over this gives you a tooltip that explains why. In this case, the message is "Animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time."</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13591/compositing-information-2.png" style="display: block; height: 394px; margin: 0px auto; width: 1158px;"></p>
+
+<h3 id="Animation_playback">Animation playback</h3>
+
+<p>At the top of the animation inspector:</p>
+
+<ul>
+ <li>there are buttons to play/pause and restart the animation</li>
+ <li>there's a dropdown to change the animation playback rate</li>
+ <li>the current time in the animation is displayed.</li>
+</ul>
+
+<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:</p>
+
+<p>{{EmbedYouTube("Xo6rUf0kGyM")}}</p>
+
+<h2 id="Edit_keyframes">Edit @keyframes</h2>
+
+<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p>
+
+<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
+
+<h2 id="Edit_timing_functions">Edit timing functions</h2>
+
+<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p>
+
+<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p>
+
+<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p>
+
+<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p>
+
+<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p>
+
+<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>
diff --git a/files/pt-br/tools/page_inspector/index.html b/files/pt-br/tools/page_inspector/index.html
new file mode 100644
index 0000000000..9bb012d40d
--- /dev/null
+++ b/files/pt-br/tools/page_inspector/index.html
@@ -0,0 +1,276 @@
+---
+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>