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
|
---
title: Tour por la UI
slug: Tools/Page_Inspector/UI_Tour
tags:
- Guía
- Herramientas
- Inspector
translation_of: Tools/Page_Inspector/UI_Tour
---
<p>Este artículo es un breve recorrido por las principales secciones de la interfaz de usuario del Inspector de páginas.</p>
<p>Recorre los tres componentes de máximo nivel de la interfaz de usuario del Inspector:</p>
<ul>
<li>el botón "Seleccionar elemento</li>
<li>el panel HTML</li>
<li>el panel CSS</li>
</ul>
<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;"></p>
<p>Esta guía pretende mantenerse tan breve como sea posible, y lo hace enlazando a otras guías más específicas para profundizar en el trabajo con el Inspector.</p>
<h2 id="Botón_seleccionar_elemento">Botón seleccionar elemento</h2>
<p>El Inspector ofrece información detallada sobre el elemento actualmente seleccionado. El botón Seleccionar Elemento es una de las maneras para seleccionar el elemento que queremos inspeccionar:</p>
<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p>Este botón forma parte de la <a href="/es/docs/Tools/Tools_Toolbox#Toolbar">barra de herramientas principal</a>, por tanto es accesible desde cualquier herramienta, no sólo desde el Inspector.</p>
<p>Para aprender a seleccionar un elemento ver la guía <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">seleccionar un elemento</a>.</p>
<h2 id="Panel_HTML">Panel HTML</h2>
<p>El Inspector está dividido en dos mitades. La mitad izquierda está ocupada por el panel HTML:</p>
<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p>
<p>Para aprender más sobre la estructura del panel HTML, ver a la guía <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examinar y editar HTML</a>.</p>
<h2 id="Panel_CSS">Panel CSS</h2>
<p>La mitad derecha del Inspector la ocupa el panel CSS:</p>
<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;">The CSS pane is divided into 4 views:</p>
<p>El panel CSS está dividido en 5 vistas:</p>
<ul>
<li>Vista reglas</li>
<li>Vista Calculado</li>
<li>Vista Disposición</li>
<li>Vista animaciones</li>
<li>Vista tipografía</li>
</ul>
<p>Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página</p>
<h3 id="Vista_reglas">Vista reglas</h3>
<p>La vista Reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado ordenadas desde la más específica a la menos específica</p>
<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a> para más detalles.</p>
<h3 id="Vista_calculado">Vista calculado</h3>
<p>La vista Calculada muestra el cálculo completo de CSS para el elemento seleccionado, y una representación visual editable del modelo de caja para el elemento:</p>
<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p>Para aprender más sobre la vista modelo de cajas ver <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examinar y editar el modelo de caja</a>. Ten en cuenta que antes de Firefox 50, la vista modelo de caja no estaba en la pestaña "Vista calculada", sino que tenía su propia pestaña.</p>
<p>Para aprender más sobre las declaraciones CSS listadas en esta vista ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examinar CSS calculado</a>.</p>
<h3 id="Vista_tipografía">Vista tipografía</h3>
<div class="warning">
<p>En Firefox 47 <strong>únicamente</strong>, la vista Tipografía está desactivada por defecto. Si quieres verla en Firefox 47, visita <code>about:config</code>, busca la opción <code>devtools.fontinspector.enabled</code>, y seleccionala como <code>true</code>.</p>
<p>Antes y después de Firefox 47, la vista Tipografía está habilitada por defecto.</p>
</div>
<p>La vista Tipografía muestra todas las fuentes de la página con muestras editables.</p>
<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/View_fonts">Vista tipografía</a> para más detalles.</p>
<h3 id="Vista_animaciones">Vista animaciones</h3>
<p>La Vista Animaciones ofrece los detalles de cualquier animación aplicada al elemento seleccionado, y un controlador para pausarlas</p>
<p> </p>
<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p>
<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabajar con animaciones</a> para más detalles.</p>
|
