1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
---
title: Guia de IU
slug: Tools/Page_Inspector/UI_Tour
tags:
- Ferramentas
- Guia(2)
- Inspetor
translation_of: Tools/Page_Inspector/UI_Tour
original_slug: Tools/Page_Inspector/Guia_de_IU
---
<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>
|
