initial commit

13 files changed, 789 insertions, 0 deletions

diff --git a/files/pt-pt/tools/page_inspector/atalhos_de_teclado/index.html b/files/pt-pt/tools/page_inspector/atalhos_de_teclado/index.html
new file mode 100644
index 0000000000..4fb8d75fb7
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/atalhos_de_teclado/index.html
@@ -0,0 +1,93 @@
+---
+title: Atalhos de teclado do inspetor de página
+slug: Tools/Page_Inspector/atalhos_de_teclado
+translation_of: Tools/Page_Inspector/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div><p>{{ Page ("pt-PT/docs/Tools/atalhos_de_teclado", "page-inspector") }}</p>
+
+<h3 id="Atalhos_globais">Atalhos globais</h3>
+
+<p>{{ Page ("pt-PT/docs/Tools/atalhos_de_teclado", "all-toolbox-tools") }}</p>
+
+<div id="SL_balloon_obj" style="display: block;">
+<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%; display: none; opacity: 1; left: -8px; top: -25px;"> </div>
+
+<div id="SL_shadow_translation_result2" style="display: none;"> </div>
+
+<div id="SL_shadow_translator" style="display: none;">
+<div id="SL_planshet">
+<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_Bproviders">
+<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div>
+
+<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div>
+</div>
+
+<div id="SL_alert_bbl" style="display: none;">
+<div id="SLHKclose" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_alert_cont"> </div>
+</div>
+
+<div id="SL_TB">
+<table id="SL_tables">
+ <tbody>
+  <tr>
+   <td class="SL_td"><input></td>
+   <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Alternar Idiomas"> </div>
+   </td>
+   <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td>
+   <td class="SL_td">
+    <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ouça"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Copiar"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_font_patch"> </div>
+
+    <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Tamanho da fonte"> </div>
+   </td>
+   <td class="SL_td">
+    <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Ajuda"> </div>
+   </td>
+   <td class="SL_td">
+    <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+
+<div id="SL_shadow_translation_result" style=""> </div>
+
+<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<div id="SL_player2"> </div>
+
+<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div>
+
+<div id="SL_Balloon_options" style="background: rgb(255, 255, 255)  repeat scroll 0% 0%;">
+<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;"> </div>
+
+<table id="SL_tbl_opt" style="width: 100%;">
+ <tbody>
+  <tr>
+   <td><input></td>
+   <td>
+    <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0)  repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div>
+   </td>
+   <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td>
+   <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+</div>
+</div>
diff --git a/files/pt-pt/tools/page_inspector/guia_de_iu/index.html b/files/pt-pt/tools/page_inspector/guia_de_iu/index.html
new file mode 100644
index 0000000000..271798ce5c
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/guia_de_iu/index.html
@@ -0,0 +1,101 @@
+---
+title: Guia de IU
+slug: Tools/Page_Inspector/Guia_de_IU
+tags:
+  - Ferramentas
+  - Guia(2)
+  - Inspetor
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<div>{{ToolsSidebar}}</div><p>Este artigo é um guia rápido das secções principais da interface do utilizador de Inspetor de Página.</p>
+
+<p>Esta abrange três componentes de topo da IU do Inspetor:</p>
+
+<ul>
+ <li>o botão de "Selecionar elemento"</li>
+ <li>o painel de HTML</li>
+ <li>o painel de CSS</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13114/inspector-overview.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;">This guide is intentionally kept as short as possible. It links to various how to guides for the details of how to work with the Inspector.</p>
+
+<h2 id="Botão_de_selecionar_elemento">Botão de selecionar elemento</h2>
+
+<p>The Inspector gives you detailed information about the currently selected element. The Select element button is one way you can select an element for inspection:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13122/select-element.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;"></p>
+
+<p>Note that it's actually part of the <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">main toolbox toolbar</a>, so it's immediately accessible from any tool, not just the Inspector.</p>
+
+<p>To learn how to select an element, see the guide to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">selecting an element</a>.</p>
+
+<h2 id="Painel_de_HTML">Painel de HTML</h2>
+
+<p>The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13116/markup-in-context.png" style="display: block; height: 1754px; margin-left: auto; margin-right: auto; width: 932px;"></p>
+
+<p>To learn more about the structure of the HTML pane, see the guide to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examining and editing HTML</a>.</p>
+
+<h2 id="Painel_de_CSS">Painel de CSS</h2>
+
+<p>The right-hand side of the Inspector is occupied by the CSS pane:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13118/rules-in-context.png" style="display: block; height: 1778px; margin-left: auto; margin-right: auto; width: 932px;">The CSS pane is divided into 4 views:</p>
+
+<ul>
+ <li>Rules view</li>
+ <li>Computed view</li>
+ <li>Fonts view</li>
+ <li>Animations view</li>
+</ul>
+
+<p>Use the tabs along the top to switch between the different views.</p>
+
+<h3 id="Visualizar_Regras">Visualizar Regras</h3>
+
+<p>The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13120/rules-view.png" style="display: block; height: 866px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> for more details.</p>
+
+<h3 id="Visualização_computada">Visualização computada</h3>
+
+<p>The Computed view shows you the complete computed CSS for the selected element, and an editable visual representation of the box model for the element:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13855/computed-shadowed-squashed.png" style="display: block; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>To learn more about the box model view, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a>. Note that before Firefox 50, the box model view did not appear in the "Computed view" tab, but had its own tab.</p>
+
+<p>To learn more about the CSS declarations listed in this view, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examine computed CSS</a>.</p>
+
+<h3 id="Visualizar_tipo_de_letra">Visualizar tipo de letra</h3>
+
+<div class="warning">
+<p><strong>Apenas </strong>na versão 47 do Firefox , a visualzaição dos Tipos de Letra está desativada por predefinição. Se pretender ver a visualização dos tipos de Letra na versão 47 do Firefox, visite <code>about:config</code>, encontre a preferência <code>devtools.fontinspector.enabled</code>, e defina-a para "<code>true"</code>.</p>
+
+<p>Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.</p>
+</div>
+
+<p>The Fonts view shows all the fonts in the page along with editable samples.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>Consultar <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra">Visualizar tipos de letra</a> para mais detalhes.</p>
+
+<h3 id="Visualizar_animações">Visualizar animações</h3>
+
+<p>The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13126/animations-view.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 519px;"></p>
+
+<p>Consulte <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> para mais detalhes.</p>
+
+<h3 id="Mostrarocultar_painel_CSS">Mostrar/ocultar painel CSS</h3>
+
+<p>From Firefox 40 onwards, there's a button in the toolbar that you can use to show or hide the CSS pane:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13124/show-hide-css.png" style="display: block; height: 419px; margin-left: auto; margin-right: auto; width: 630px;"></p>
diff --git a/files/pt-pt/tools/page_inspector/how_to/abrir_o_inspetor/index.html b/files/pt-pt/tools/page_inspector/how_to/abrir_o_inspetor/index.html
new file mode 100644
index 0000000000..43385936ed
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/abrir_o_inspetor/index.html
@@ -0,0 +1,21 @@
+---
+title: Abrir o Inspetor
+slug: Tools/Page_Inspector/How_to/Abrir_o_inspetor
+tags:
+  - Ferramentas
+  - Guía
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Existem dois modos principais para abrir o Inspetor:</p>
+
+<ul>
+ <li><em>sem um elemento selecionado</em>: escolha "ferramentas -&gt; Programador Web -&gt; Inspetor" na Barra de Menu ou o <a href="/pt-PT/docs/Tools/atalhos_de_teclado#Abrir_e_fechar_ferramentas">atalho de teclado </a>equivalente.</li>
+ <li><em>com um elemento selecionado</em>: clique direito do rato num elemento na página da Web e selecione "Inspecionar Elemento"</li>
+</ul>
+
+<p>O 'Inspetor' irá aparecer no fundo da janela do navegador:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10055/inspector-in-context.png" style="display: block; margin-left: auto; margin-right: auto; width: 845px;">Para começar a encontrar a sua direção em torno do Inspetor, consulte <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU">Guia de IU</a>.</p>
diff --git a/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_css/index.html b/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_css/index.html
new file mode 100644
index 0000000000..5f0bd41323
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_css/index.html
@@ -0,0 +1,223 @@
+---
+title: Examinar e editar CSS
+slug: Tools/Page_Inspector/How_to/Examinar_e_editar_CSS
+tags:
+  - Ferramentas
+  - Guia(2)
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+---
+<div>{{ToolsSidebar}}</div><p>Pode examinar e editar CSS no <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Painel_de_CSS">painel de CSS</a> do Inspetor.</p>
+
+<h2 id="Examinar_regras_de_CSS">Examinar regras de CSS</h2>
+
+<p>A <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_Regras">visualização de Regras</a> lista todas regras que se aplicam ao elemento selecionado, ordenada pela mais específica para 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>The Rules view lists <a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a> (styles applied by the browser) if the option to do so is checked in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">developer tool settings</a>. Note that this setting is independent of the "Browser styles" checkbox in the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</p>
+
+<p>The Rules view displays all authored styles, 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="Exibir_regra">Exibir regra</h3>
+
+<p>It displays each rule as in a stylesheet, with a list of selectors followed by a list of <code>property:value;</code> declarations.</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>Highlight matched elements</em>: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector.</li>
+ <li><em>Overridden declaration</em>: declarations that are overridden by later rules are crossed out. 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>Show cascade</em>: next to overridden declarations is a 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>: if you hover over a declaration, a checkbox appears next to it: you can use this to toggle the declaration on or off.</li>
+ <li><em>Filename and line number</em>: on the right-hand side is a link to the rule. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">link to CSS file</a>.</li>
+</ul>
+
+<p>Starting in Firefox 52, if the element has a <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display">display: grid</a></code> declaration, then it gets a grid icon next to it, like this: <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;">. Click that icon to display the grid overlaid on the page, including grid lines and tracks. See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine grid layouts</a> for more on this.</p>
+
+<p>User-agent styles are displayed with a different background, and the link to the filename and line number contains the prefix <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="element_rule">element {} rule</h3>
+
+<p>The <code>element {}</code> rule at the top of the rules list isn't actually a CSS rule. It represents the CSS properties assigned to the element via its {{htmlattrxref("style")}} attribute.</p>
+
+<p>Starting in Firefox 52, this also gets the target icon: <img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">, giving you a convenient way to highlight the currently selected element in the page.</p>
+
+<p>{{EmbedYouTube("bQzOAFvEDco")}}</p>
+
+<h3 id="Filtrar_regras">Filtrar regras</h3>
+
+<p>There's a box at the top of the Rules view labeled "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;">As you type:</p>
+
+<ul>
+ <li>any rules which don't contain the typed string at all are hidden</li>
+ <li>any declarations which contain the typed string are highlighted</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;">Click the "X" at the end of the search box to remove the filter.</p>
+
+<div class="note">
+<p>While in the Rules view, you can press <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> to focus the search field. Once you've typed in a filter, you can press <kbd>Esc</kbd> to remove it again.</p>
+</div>
+
+<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p>
+
+<h4 id="Strict_search">Strict search</h4>
+
+<p>By default, the search box highlights all declarations which contain any part of the string. For example, searching for "color" will highlight declarations containing <code><a href="/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> and <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> as well as just <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>If you enclose the search query in ticks, like this: `color`, the search is restricted to exact matches:</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="Expanding_shorthand_properties">Expanding shorthand properties</h3>
+
+<p><a href="/en-US/docs/Web/CSS/Shorthand_properties">Shorthand properties</a> can be expanded to display their related longhand properties by clicking the arrow besides them.</p>
+
+<h3 id="Displaying_pseudo-elements">Displaying pseudo-elements</h3>
+
+<p>The Rule view displays the following <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, if they are applied to the selected element:</p>
+
+<p><code>::after<br>
+ ::backdrop</code><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>If the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle:</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>Clicking the triangle displays them:</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="Setting_hover_active_focus">Setting :hover, :active, :focus</h3>
+
+<p>There's a button to the right of the filter box:</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;">Click the button to see three checkboxes, which you can use to set the {{cssxref(":hover")}}, {{cssxref(":active")}} and {{cssxref(":focus")}} pseudo-classes for the selected element:</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;">This feature can also be accessed from the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">popup menu in the HTML view</a>.</p>
+
+<p>If you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:</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="Hiperligação_para_ficheiros_CSS">Hiperligação para ficheiros CSS</h3>
+
+<p>At the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<p>You can copy the location of the source file: right-click the link and select "Copy Location".</p>
+
+<p>The Inspector understands CSS source maps. That means that if you are using a CSS preprocessor that has support for source maps, and you've enabled source map support in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, then the link will take you to the original source, not the generated CSS. Read more about CSS source map support in the <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Style Editor documentation</a>.</p>
+
+<h3 id="Obter_ajuda_para_as_propriedades_de_CSS">Obter ajuda para as propriedades de CSS</h3>
+
+<p>If you context-click on a CSS property name in the Rules view, you can open a popup displaying help for that property from MDN:</p>
+
+<p>{{EmbedYouTube("ptVtAEOK7y4")}}</p>
+
+<p>Note that for the moment, this doesn't cache responses from MDN, so it requires network connectivity.</p>
+
+<h3 id="Overridden_declarations">Overridden declarations</h3>
+
+<p>If a CSS declaration is overridden by some other CSS rule with a greater weight, then the declaration is shown with a line through it.</p>
+
+<p>Overridden declarations have a magnifying glass next to them. Click the magnifying glass to filter the rule view to show only the rules applying to the current node that try to set the same property: that is, the complete cascade for the given property.</p>
+
+<p>This makes it easy to see which rule is overriding the declaration:</p>
+
+<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p>
+
+<h2 id="Examinar_CSS_computada">Examinar CSS computada</h2>
+
+<p>To see the complete computed CSS for the selected element, switch to the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Computed view</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>You can <kbd>Tab</kbd> through them to select them, and from Firefox 49 onwards, you can find more information about these properties — pressing <kbd>F1</kbd> on a selected property will open up its MDN reference page.</p>
+
+<p>Clicking the arrow next to the property name (or pressing <kbd>Enter</kbd> or <kbd>Space</kbd> while it is selected) shows the rule that set this value, along with a link to the source filename and line number:</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>By default, this view only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box. You can <kbd>Tab</kbd> through the filenames/line numbers; pressing <kbd>Enter</kbd>/<kbd>Return</kbd> will open up the relevant file at that point in the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<p>Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.</p>
+
+<div class="note">
+<p>While in the Computed view, you can press <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> to focus the search field. Once you've typed in a filter, you can press <kbd>Esc</kbd> to remove it again.</p>
+</div>
+
+<h2 id="Editar_regras">Editar regras</h2>
+
+<p>If you click on a declaration or a selector in the Rules view you can edit it and see the results immediately. You can also <kbd>Tab</kbd> through the different existing properties and values, and start editing them by pressing <kbd>Enter</kbd> or <kbd>Space</kbd>. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace).</p>
+
+<p>As you start typing a property name, you'll see a list of autocomplete suggestions. Press <kbd>Tab</kbd> to accept the current suggestion or <kbd>Up</kbd> and <kbd>Down</kbd> to move through the list. The default choice is the most common property that starts with the letters you've typed. For example, here the user has typed "c" and the default choice is "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>If you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears besides the declaration.</p>
+
+<p>Any changes you make are temporary: reloading the page will restore the original styling.</p>
+
+<p>You can use the arrow keys to increase/decrease numeric rules while editing. The <kbd>Up</kbd> arrow will turn "1px" to 2px, and <kbd>Shift</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> will increment by 10. <kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> change values by 0.1, and <kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> will add or subtract 100 from the value.</p>
+
+<p>Edits that you make in the Rules view are reflected in the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, and vice versa.</p>
+
+<p>Starting in Firefox 52, if you're editing CSS, the context menu you'll see is the normal one for working with editable text:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p>
+
+<h2 id="Adicionar_regras">Adicionar regras</h2>
+
+<p>You can add new rules in the Rules view. Just right-click to show the context menu and select "Add rule". This will add a new CSS rule whose selector matches the currently selected node.</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>There's also a button that enables you to do the same thing:</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="Copiar_regras">Copiar regras</h2>
+
+<p>To copy rules, and pieces of rules, use one of the following context menu items in the Rules view:</p>
+
+<ul>
+ <li>Copy Rule</li>
+ <li>Copy Selector</li>
+ <li>Copy Property Declaration</li>
+ <li>Copy Property Name</li>
+ <li>Copy Property Value</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="Consultar_também">Consultar também</h2>
+
+<ul>
+ <li>Lista completa dos <a href="/pt-PT/docs/Tools/Page_Inspector/atalhos_de_teclado">talhos de Teclado</a> do Inspetor de Página.</li>
+ <li>The Inspector also includes a number of specialized tools for working with particular CSS features, such as colors, fonts, and animations. To read about these see the list of <a href="/pt-PT/docs/Tools/Page_Inspector">guias de como...</a>.</li>
+</ul>
diff --git a/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_o_modelo_de_caixa/index.html b/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_o_modelo_de_caixa/index.html
new file mode 100644
index 0000000000..0b8815816b
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/examinar_e_editar_o_modelo_de_caixa/index.html
@@ -0,0 +1,41 @@
+---
+title: Examinar e editar o modelo de caixa
+slug: Tools/Page_Inspector/How_to/Examinar_e_editar_o_modelo_de_caixa
+tags:
+  - Ferramentas
+  - Guia(2)
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model
+---
+<div>{{ToolsSidebar}}</div><h2 id="Visualização_do_modelo_de_caixa">Visualização do modelo de caixa</h2>
+
+<p>Com o <a href="/pt-PT/Tools/Page_Inspector/Guia_de_IU/#Selecionar_botão_de_elemento">botão de selecionar Elemento</a> pressionado, se passar o rato por cima de um elemento na página, é mostrado o <a href="/pt-PT/docs/Web/CSS/CSS_Box_Model/Introducao_modelo_caixa_CSS">modelo de caixa</a> para o elemento sobreposto na página:</p>
+
+<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p>
+
+<p>Também é mostrado sobreposto se passar com o rato sobre uma marcação de elemento no painel de HTML:</p>
+
+<p>{{EmbedYouTube("xA4IxTttNLk")}}</p>
+
+<p>Se o elemento está em linha e é dividido em várias caixas de linha, o marcador mostra a cada caixa de linha individual que formam o elemento:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p>
+
+<h3 id="A_visualização_do_Modelo_de_Caixa">A visualização do Modelo de Caixa</h3>
+
+<p>Quando é selecionado um elemento, pode obter uma visão detalhada do modelo na <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualização_computada">visualização do Modelo de Caixa</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p>
+
+<p>Se passar o rato sobre um valor, verá uma dica de ferramenta a dizer qual é a regra que o valor provém de:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p>
+
+<p>Se passar o rato sobre uma parte do modelo de caixa na visualização do Modelo de Caixa, a parte correspondente da página é realçada:</p>
+
+<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p>
+
+<h2 id="Edição_do_modelo_de_caixa">Edição do modelo de caixa</h2>
+
+<p>Também pode editar os valores na <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_o_modelo_de_caixa#A_visualização_do_Modelo_de_Caixa">visualização do Modelo de Caixa</a>, e ver os resultados imediatatamente na página:</p>
+
+<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p>
diff --git a/files/pt-pt/tools/page_inspector/how_to/index.html b/files/pt-pt/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..4bf8c51b69
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: Como...
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<div>{{ToolsSidebar}}</div><p><span class="seoSummary">As hiperligações para os vários 'Como...' podem ser encontradas aqui. Estas hiperligações descrevem em profundidade as técnicas de 'Como...'.</span></p>
+
+<p>{{ ListSubpages () }}</p>
+
+<p> </p>
diff --git a/files/pt-pt/tools/page_inspector/how_to/inspecionar_e_selecionar_cores/index.html b/files/pt-pt/tools/page_inspector/how_to/inspecionar_e_selecionar_cores/index.html
new file mode 100644
index 0000000000..1ababa4904
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/inspecionar_e_selecionar_cores/index.html
@@ -0,0 +1,26 @@
+---
+title: Inspecionar e selecionar cores
+slug: Tools/Page_Inspector/How_to/Inspecionar_e_selecionar_cores
+tags:
+  - Ferramentas
+  - Guia(2)
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors
+---
+<div>{{ToolsSidebar}}</div><p>Em <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_Regras">visualizar Regras</a> no Painel de CSS, se uma regra contém um valor de cor, irá ver uma amostra da da cor junto ao valor:</p>
+
+<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>
+
+<p>Se clicar na amostra de cor, verá uma janela para selecionar a cor, permitindo-lhe alterar a cor:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p>
+
+<p>O selecionador de cores inclui um ícone 'conta-gotas': ao clicar neste ícone permite-lhe utilizar o 'conta-gotas' para selecionar uma nova cor para o elemento da página:</p>
+
+<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>
+
+<p>A partir da versão 40 do Firefox, ao clicar na amostra de cor enquanto mantém pressionada a tecla 'Shift' irá alterar o formato da cor:</p>
+
+<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p>
+
+<p>A partir da versão 53 do Firefox e superior, este suporta os valores de cor de <a href="https://drafts.csswg.org/css-color/">nível 4 de CSS</a> (EN).</p>
diff --git a/files/pt-pt/tools/page_inspector/how_to/reposicao_de_elementos_na_pagina/index.html b/files/pt-pt/tools/page_inspector/how_to/reposicao_de_elementos_na_pagina/index.html
new file mode 100644
index 0000000000..f565ca5bd4
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/reposicao_de_elementos_na_pagina/index.html
@@ -0,0 +1,22 @@
+---
+title: Reposição de elementos na página
+slug: Tools/Page_Inspector/How_to/Reposicao_de_elementos_na_pagina
+translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page
+---
+<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">New in Firefox 48</div>
+
+<p>A partir da versão 48 do Firefox pode mover absolutamente os elementos posicionados, arrastando-os em redor da página.</p>
+
+<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p>
+
+<p>Se um elemento tem a sua propriedade <code>{{cssxref("position")}}</code> definida para <code>absoluta</code>, <code>relativa</code> ou <code>fixa e uma ou mais propriedades de </code>{{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} ou {{cssxref("right")}}, a <a href="https://developer.mozilla.org/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualização_computada">visualização do Modelo de Caixa</a> exibe um botão:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p>
+
+<p>Se clicar nesse botão, aparecem dois pontos de apoio junto ao elemento:</p>
+
+<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p>
+
+<p>Pode esses pontos de apoio para arrastar o elemento em redor da página.</p>
+
+<p>Se o elemento estiver absolutamente posicionado, as linhas tracejadas são mostrados a representar o deslocamento original. Para os elementos relativamente posicionados, as linhas tracejadas indicam a posição original do nodo. Os deslocamentos são indicados por uma linha e uma dica da ferramenta para cada lado.</p>
diff --git a/files/pt-pt/tools/page_inspector/how_to/trabalhar_com_animacoes/index.html b/files/pt-pt/tools/page_inspector/how_to/trabalhar_com_animacoes/index.html
new file mode 100644
index 0000000000..6074a4f513
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/trabalhar_com_animacoes/index.html
@@ -0,0 +1,108 @@
+---
+title: Trabalhar com animações
+slug: Tools/Page_Inspector/How_to/Trabalhar_com_animacoes
+translation_of: Tools/Page_Inspector/How_to/Work_with_animations
+---
+<div>{{ToolsSidebar}}</div><p>Este artigo aborda três ferramentas que pode utilizar para visualizar e editar animações:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">O inspector de animação</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">Edição de @keyframes</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">Edição de funções de sincronização</a></li>
+</ul>
+
+<h2 id="Inspetor_de_animação">Inspetor de animação</h2>
+
+<div class="note">
+<p>Although this tool was introduced in Firefox 41, its UI was revamped in Firefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p>
+</div>
+
+<p>From Firefox 41, the Page Inspector includes an <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">extra view labeled "Animations"</a>.</p>
+
+<p>This view displays CSS transitions and CSS animations 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>To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.</p>
+
+<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p>
+
+<p>Let's use the animation inspector to see what's going on in this example.</p>
+
+<ul>
+ <li>Using Firefox 43 or later, right-click one of the icons and select "Inspect Element".</li>
+ <li>You'll probably also want to adjust the selected node up a level, to the <code>&lt;div class="channel"&gt;</code> node.</li>
+ <li>Switch over to the "Animations" tab.</li>
+</ul>
+
+<p>{{EmbedYouTube("U2eJYacf5XY")}}</p>
+
+<p>Now play the animation:</p>
+
+<p>{{EmbedYouTube("CwXXXEllB3o")}}</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/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p>
+
+<p>It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.</p>
+
+<p>Cada animação ou transição é mostrada como uma barra horizontal disposta através da barra cronológica:</p>
+
+<ul>
+ <li>The bar is blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property, and orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used.</li>
+ <li>From Firefox 44 onwards, the bar contains a lightning bolt icon (<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) 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>).</li>
+ <li>The bar is labeled with the name of the property being animated or the name of the <code>@keyframes</code> animation.</li>
+ <li>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.</li>
+ <li>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition.</li>
+</ul>
+
+<p>To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.</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;">). From Firefox 44, clicking this icon will lock the highlighter on the element.</p>
+
+<p>Aplicando tudo isto para o nosso exemplo, nós podemos ver que:</p>
+
+<ul>
+ <li>The animation involved two elements, <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the channel name "Firefox Nightly" and the channel icon: {{EmbedYouTube("EOUjHt0V1No")}}</li>
+ <li>Each element had two properties animated:
+  <ul>
+   <li><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> for the channel name</li>
+   <li><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> for the icon.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+  </ul>
+ </li>
+ <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li>
+ <li>The <code>transform</code> property transition ends after 0.5 seconds.</li>
+ <li>The <code>transform</code> property was animated on the compositor thread.</li>
+</ul>
+
+<h3 id="Reprodução_de_animação">Reprodução de animação</h3>
+
+<p>No topo do inspetor de animação:</p>
+
+<ul>
+ <li>there are buttons to play/pause and rewind the animation (new in Firefox 44)</li>
+ <li>the current time in the animation is displayed (new in Firefox 44).</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("1hqNaMsB48g")}}</p>
+
+<h2 id="Editar_keyframes">Editar @keyframes</h2>
+
+<p>Quaisquer <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">regras de @keyframes </a> associadas com o elemento atualmente selecionado são exibibas na <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Visualização das Regras </a>e são editáveis:</p>
+
+<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
+
+<h2 id="Editar_funções_de_sincronização">Editar funções de sincronização</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>Esta funcionalidade utiliza o código fonte de <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p>
+
+<p>O editor cúbico Bézier inclui um número de pré-ajustes, agrupados sob "Ease-in", "Ease-out", and "Ease-in-out":</p>
+
+<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>
diff --git a/files/pt-pt/tools/page_inspector/how_to/utilizar_a_api_do_inspetor/index.html b/files/pt-pt/tools/page_inspector/how_to/utilizar_a_api_do_inspetor/index.html
new file mode 100644
index 0000000000..ccfe9ea71b
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/utilizar_a_api_do_inspetor/index.html
@@ -0,0 +1,43 @@
+---
+title: Utilizar a API do Inspetor
+slug: Tools/Page_Inspector/How_to/Utilizar_a_API_do_Inspetor
+tags:
+  - Ferramentas
+  - Inspetor
+  - Referência(2)
+translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API
+---
+<div>{{ToolsSidebar}}</div><p>Firefox add-ons may access the following objects from the chrome://browser/content/devtools/inspector/inspector.xul context:</p>
+
+<h3 id="window.inspector">window.inspector</h3>
+
+<p>defined in <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>. Attributes and functions:</p>
+
+<ul>
+ <li>.selection - information about the inspector's selection:
+  <ul>
+   <li>.isNode() - returns true if selection is node.</li>
+   <li>.node - returns the actual element from the page</li>
+   <li>.window - the window object of the frame the selection is in.</li>
+  </ul>
+ </li>
+ <li>.markDirty() - marks that the page has been changed by the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload.</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>
diff --git a/files/pt-pt/tools/page_inspector/how_to/visualizar_tipos_de_letra/index.html b/files/pt-pt/tools/page_inspector/how_to/visualizar_tipos_de_letra/index.html
new file mode 100644
index 0000000000..fef74a5306
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/visualizar_tipos_de_letra/index.html
@@ -0,0 +1,28 @@
+---
+title: Visualizar tipos de letra
+slug: Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra
+tags:
+  - Ferramentas
+  - Guia(2)
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Edit_fonts
+---
+<div>{{ToolsSidebar}}</div><h2 id="Dica_da_ferramenta_da_família_do_tipo_de_letra">Dica da ferramenta da família do tipo de letra</h2>
+
+<p>Se passar o rato sobre uma propriedade da <a href="/pt-PT/docs/Web/CSS/font-family"><code>família do tipo de letra</code></a> em <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_Regras">visualizar Regras</a>, irá obter uma dica de ferramenta com uma amostra desse tipo de letra:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9957/font-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 565px;"></p>
+
+<h2 id="Visualizar_tipos_de_letra">Visualizar tipos de letra</h2>
+
+<div class="warning">
+<p><strong>Apenas </strong>na versão 47 do Firefox , a visualzaição dos Tipos de Letra está desativada por predefinição. Se pretender ver a visualização dos tipos de Letra na versão 47 do Firefox, visite <code>about:config</code>, encontre a preferência <code>devtools.fontinspector.enabled</code>, e defina-a para "<code>true"</code>.</p>
+
+<p>Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.</p>
+</div>
+
+<p>Em <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_tipo_de_letra">visualizar Tipos de Letra </a>mostra todos os tipos de letra em utilziação pelo elemento selecionado. Note que esta mostra o tipo de letra utilizado no seu sistema, que poderá ser diferente dos tipos de letra especificados na CSS:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>O texto em 'visualizar tipo de letra' é "Abc" por predefinição, e a partir da versão 41 do Firefox o texto da pré-visualização pode ser editado livremente.</p>
diff --git a/files/pt-pt/tools/page_inspector/how_to/visualize_transforms/index.html b/files/pt-pt/tools/page_inspector/how_to/visualize_transforms/index.html
new file mode 100644
index 0000000000..1ad38640b4
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/how_to/visualize_transforms/index.html
@@ -0,0 +1,12 @@
+---
+title: Visualizar transformações
+slug: Tools/Page_Inspector/How_to/Visualize_transforms
+tags:
+  - Ferramentas
+  - Guia(2)
+  - Inspetor
+translation_of: Tools/Page_Inspector/How_to/Visualize_transforms
+---
+<div>{{ToolsSidebar}}</div><p>Se passar o rato sobre uma propriedade <a href="/pt-PT/docs/Web/CSS/transform"><code>transform</code></a> em <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU#Visualizar_Regras">visualizar Regras</a>, irá ver a transformação sobreposta na página:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9961/transform.png" style="display: block; height: 1670px; margin-left: auto; margin-right: auto; width: 1968px;"></p>
diff --git a/files/pt-pt/tools/page_inspector/index.html b/files/pt-pt/tools/page_inspector/index.html
new file mode 100644
index 0000000000..66745268f4
--- /dev/null
+++ b/files/pt-pt/tools/page_inspector/index.html
@@ -0,0 +1,58 @@
+---
+title: Inspetor de Página
+slug: Tools/Page_Inspector
+tags:
+  - CSS
+  - DOM
+  - Desenvolvimento da Web
+  - 'Desenvolvimento da Web: Ferramentas'
+  - Folhas de estilo
+  - HTML
+  - Precisa de Tradução
+  - 'l10n:prioridade'
+translation_of: Tools/Page_Inspector
+---
+<div>{{ToolsSidebar}}</div><p>Utilize o 'Inspetor de Página' para examinar e modificar o HTML e CSS de uma página.</p>
+
+<p>Pode examinar as páginas carregadas na cópia local do Firefox ou num destino remoto, tal como um dispositivo com o Firefox OS ou Firefox para Android. Consulte a <a href="/pt-PT/docs/Tools/Remote_Debugging">depuração remota </a>para saber como ligar as ferramentas de desenvolvimento a um destino remoto.</p>
+
+<hr>
+<h2 id="Guia_da_Interface_do_Utilizador">Guia da Interface do Utilizador</h2>
+
+<p>Para se movimentar no Inspector, pode ver um <a href="/pt-PT/docs/Tools/Page_Inspector/Guia_de_IU">guia rápido da IU</a>.</p>
+
+<hr>
+<h2 id="Como...">Como...</h2>
+
+<p>Saiba o que pode fazer com o Inspetor, consulte os seguintes guias de como...:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Abrir_o_inspetor">Abrir o Inspetor</a></li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_HTML">Examinar e editar HTML</a></li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_o_modelo_de_caixa">Examinar e editar o modelo de caixa</a></li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Inspecionar_e_selecionar_cores">Inspecionar e selecionar cores</a></li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Reposicao_de_elementos_na_pagina">Reposicionar elementos na página</a></li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra">Ver tipos de letra</a></li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualizar 'transforms</a>'</li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Utilizar_a_API_do_Inspetor">Utilizar a API do Inspetor</a></li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Selecionar_um_elemento">Selecionar um elemento</a></li>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Examinar_e_editar_CSS">Examinar e editar CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examinar escutas de evento</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabalhar com animações</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Editar filtros de CSS</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">Ver imagens de fundo</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Utilizar o Inspetor a partir da Consola da Web</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Referência">Referência</h2>
+
+<div class="onecolumn">
+<ul>
+ <li><a href="/pt-PT/docs/Tools/Page_Inspector/atalhos_de_teclado">Atalhos de teclado</a></li>
+ <li><a href="/pt-PT/docs/Tools/Tools_Toolbox">Configurações</a></li>
+</ul>
+</div>