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.Este artigo é um guia rápido das secções principais da interface do utilizador de Inspetor de Página.
Esta abrange três componentes de topo da IU do Inspetor:
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.
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:
Note that it's actually part of the main toolbox toolbar, so it's immediately accessible from any tool, not just the Inspector.
To learn how to select an element, see the guide to selecting an element.
The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:
To learn more about the structure of the HTML pane, see the guide to examining and editing HTML.
The right-hand side of the Inspector is occupied by the CSS pane:
The CSS pane is divided into 4 views:
Use the tabs along the top to switch between the different views.
The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:
See Examine and edit CSS for more details.
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:
To learn more about the box model view, see Examine and edit the box model. Note that before Firefox 50, the box model view did not appear in the "Computed view" tab, but had its own tab.
To learn more about the CSS declarations listed in this view, see Examine computed CSS.
Apenas 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 about:config, encontre a preferência devtools.fontinspector.enabled, e defina-a para "true".
Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.
The Fonts view shows all the fonts in the page along with editable samples.
Consultar Visualizar tipos de letra para mais detalhes.
The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:
Consulte Work with animations para mais detalhes.
From Firefox 40 onwards, there's a button in the toolbar that you can use to show or hide the CSS pane:
