blob: 467b4a8edc4d2df400365860ba5c928985ee9303 (
plain)
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
|
---
title: Обзор интерфейса
slug: Tools/Page_Inspector/UI_Tour
tags:
- Guide
- Инспектор
- инструменты
translation_of: Tools/Page_Inspector/UI_Tour
---
<div>{{ToolsSidebar}}</div><p>Эта статья предлагает быстрый обзор основных разделов пользовательского интерфейса Инспектора страниц.</p>
<p>Она охватывает три основных компонента интерфейса Инспектора:</p>
<ul>
<li>кнопка выбора элемента</li>
<li>панель HTML</li>
<li>панель CSS</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/10029/inspector-ui.png" style="display: block; margin-left: auto; margin-right: auto; width: 918px;">Это руководство нарочно как можно более короткое. В нём ссылки на другие руководства, с подробностями об использовании Инспектора.</p>
<h2 id="Select_element_button" name="Select_element_button">Кнопка выбора элемента</h2>
<p>Инспектор даёт вам подробную информацию о выбранном сейчас элементе. Кнопка выбора элемента — один из способов выбрать элемент для рассмотрения:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10031/select-button.png" style="display: block; height: 640px; margin-left: auto; margin-right: auto; width: 1674px;"></p>
<p>Заметьте: она на <a href="/ru/docs/Tools/Tools_Toolbox#Панель инструментов">главной панели инструментов веб-разработчика</a>, так что быстро доступна из любого инструмента, не только Инспектора.</p>
<p>Чтобы научиться выбирать элемент, см. руководство по <a href="/ru/docs/Tools/Page_Inspector/How_to/Vybor_elementa">выбору элемента</a>.</p>
<h2 id="HTML_pane" name="HTML_pane">Панель HTML</h2>
<p>Инспектор разделён на две половины. Левую половину занимает панель HTML:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10033/html-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;"></p>
<p>Чтобы узнать больше о структуре панели HTML, см. руководство по <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">исследованию и редактированию</a>.</p>
<h2 id="CSS_pane" name="CSS_pane">Панель CSS</h2>
<p>Правую сторону Инспектора занимает панель CSS:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10035/css-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;">Панель CSS имеет 5 режимов для просмотра различных данных:</p>
<ul>
<li>Правила</li>
<li>Вычислено</li>
<li>Шрифты</li>
<li>Блоковая модель</li>
<li>Анимации</li>
</ul>
<p>Переключаться между этими режимами можно с помощью вкладок наверху панели.</p>
<h3 id="Rules_view" name="Rules_view">Просмотр правил</h3>
<p>Вкладка «Правила» содержит список всех правил, которые применены к выбранному элементу, в порядке from most-specific to least-specific:</p>
<p><img alt="Вкладка Правила Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10555/css-rules-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследование и редактирование CSS</a>.</p>
<h3 id="Computed_view" name="Computed_view">Просмотр вычисленного</h3>
<p>Вкладка «Вычислено» показывает стили, вычисленные для выбранного элемента.</p>
<p><img alt="Вкладка Вычислено Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10553/css-computed-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследование и редактирование CSS</a>.</p>
<h3 id="Fonts_view" name="Fonts_view">Просмотр шрифтов</h3>
<p>Вкладка «Шрифты» показывает все используемые на странице шрифты вместе с небольшими образцами (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1158634">которые до Firefox 36 можно было редактировать</a>).</p>
<p><img alt="Вкладка Шрифты Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10549/css-fonts-ru-20150426-2.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/View_fonts">Просмотр шрифтов</a>.</p>
<h3 id="Box_Model_view" name="Box_Model_view">Вкладка «Блоковая модель»</h3>
<p>Вкладка "Блоковая модель" отображает блоковую модель выбранного элемента. В данной вкладке можно выполнять редактирование свойств элемента. Для этого нужно двойным щелчком выбрать число на рисунке для редактирования.</p>
<p><img alt="Вкладка Блоковая модель Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10551/css-box-model-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a>.</p>
<h3 id="Animations_view" name="Animations_view">Вкладка «Анимации»</h3>
<p>Вкладка «Анимации» показывает информацию об анимациях, применяемых к выбранному элементу, и кнопку, чтобы их приостановить:</p>
<p> </p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10009/css-animations.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a>.</p>
|
