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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
title: Toolbox
slug: Tools/Tools_Toolbox
tags:
- инструменты
translation_of: Tools/Tools_Toolbox
---
<div>{{ToolsSidebar}}</div><p>Окно Инструменты включает в себя все встроенные в Firefox инструменты. Его можно открыть, выбрав «Инструменты разработки» из меню Веб разработка (в «Инструменты» на OS X и Linux, или «Firefox» в Windows), или активировав любой включённый туда инструмент (например, Отладчик JavaScript Debugger или Инспектор страниц). Ещё можно нажать Ctrl + Shift + I на Windows и Linux, или Cmd + Opt + I на OS X.</p>
<p>По умолчанию окно появляется прикреплённым к нижнему краю окна Firefox, но его можно и отсоединить. Вот как оно выглядит прикреплённым:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">Само окно разделено на две части: панель инструментов вверху и главная панель внизу:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Режим_Прикрепления">Режим Прикрепления</h2>
<p>По умолчанию Панель инструментов прикреплена к низу окна браузера. Используя иконки настройки Панели управления, Вы можете прикрепить его к правой части окна браузера или открепить его и вывести в отдельное окно.</p>
<h2 id="sect1"> </h2>
<h2 id="Панель_инструментов">Панель инструментов</h2>
<p>Панель содержит набор контролов (управляющих элементов интерфейса), с помощью которых можно выбрать инструмент или отсоединить/присоединить/закрыть окно.</p>
<p> </p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Инструмент_для_выбора_объекта">Инструмент для выбора объекта</h3>
<p>Крайняя левая иконка Панели инструментов служит для включения инструмента выбора различных элементов. Она позволяет кликом выбрать элемент кода, который Вам необходим для исследования. См. <a href="/ru/docs/Tools/Page_Inspector/How_to/Select_an_element">«Выбор элемента»</a>.</p>
<h3 id="Основной_набор_инструментов">Основной набор инструментов</h3>
<p>Далее располагается раздел кнопок, позволяющий активировать основные инструменты Панели. В этом разделе могут находится следующие инструменты:</p>
<ul>
<li><a href="/ru/docs/Tools/Web_Console" title="/ru/docs/Tools/Web_Console">Веб-консоль</a></li>
<li><a href="/ru/docs/Tools/Debugger" title="/ru/docs/Tools/Debugger">Отладчик JavaScript</a></li>
<li><a href="/ru/docs/Tools/Page_Inspector" title="/ru/docs/Tools/Page_Inspector">Инспектор страниц</a></li>
<li><a href="/ru/docs/Tools/Style_Editor" title="/ru/docs/Tools/Style_Editor">Редактор стилей</a></li>
<li><a href="/ru/docs/Tools/Profiler" title="/ru/docs/Performance/Profiling_with_the_Built-in_Profiler">Профайлер</a></li>
<li><a href="/ru/docs/Tools/Network_Monitor" title="/ru/docs/Performance/Profiling_with_the_Built-in_Profiler">Монитор Сетевых Параметров</a></li>
</ul>
<p>Учтите, что в этом разделе не всегда могут быть видны все инструменты Панели: в этом разделе показываются только те инструменты, которые доступные в данном контексте (например, пока еще не все инструменты поддерживают функцию удалённой отладки. Таким образом, если элементом отладки, из-за которого открыта Панель инструментов, является объект, который не поддерживает функцию отладки Firefox, то в этом разделе будут показаны не все инструменты Основного набора).</p>
<h3 id="Дополнительные_инструменты">Дополнительные инструменты</h3>
<p>Дальше идёт ряд кнопок, которые можно добавлять и удалять через <a href="https://developer.mozilla.org/ru/docs/Tools/Tools_Toolbox$edit#Settings">окно настроек инструментов разработки</a>. По умолчанию этот ряд включает:</p>
<ul>
<li><a href="https://developer.mozilla.org/ru/docs/Tools/Web_Console#The_split_console">Toggle split console</a></li>
<li><a href="https://developer.mozilla.org/ru/docs/Tools/Responsive_Design_View">Режим адаптивного дизайна</a></li>
</ul>
<p>Следующие инструменты по умолчанию отсутствуют на панели, но их можно добавить в <a href="https://developer.mozilla.org/ru/docs/Tools/Tools_Toolbox$edit#Settings">настройках</a>:</p>
<ul>
<li><a href="https://developer.mozilla.org/ru/docs/Tools/Paint_Flashing_Tool">Подсвечивать прорисованную область</a></li>
<li><a href="https://developer.mozilla.org/ru/docs/Tools/3D_View">3D-вид</a></li>
<li><a href="https://developer.mozilla.org/ru/docs/Tools/Scratchpad">Простой редактор JavaScript</a></li>
<li><a href="https://developer.mozilla.org/ru/docs/Tools/Eyedropper">Захватить цвет со страницы</a></li>
<li>Сделать скриншот всей страницы: этот появился в Firefox 32. Он делает скриншот целой веб-страницы и сохраняет его в каталоге Загрузки.</li>
<li><a href="https://developer.mozilla.org/ru/docs/tools/Working_with_iframes">Выберите iframe в качестве текущего целевого документа</a>: появился в Firefox 34.</li>
</ul>
<h3 id="Toolbox_controls">Toolbox controls</h3>
<p>Наконец, ряд кнопок, позволяющих:</p>
<ul>
<li>закрыть окно</li>
<li>переключить место прикрепления окна между низом окна браузера и боковой стороной</li>
<li>переключиться между отдельным окном и прикреплённым к окну браузера</li>
<li>открыть <a href="https://developer.mozilla.org/ru/docs/Tools/Tools_Toolbox$edit#Настройки" title="#Settings">настройки инструментов разработчика</a></li>
</ul>
<h2 id="Настройки"><a name="Settings">Настройки</a></h2>
<p>Кнопка «Настройки» (<img alt="" src="https://mdn.mozillademos.org/files/8623/settings-cog-small.png" style="display: inline-block; height: 22px; width: 30px;">) даёт вам доступ к настройкам самого Набора инструментов и находящихся в нём инструментов:</p>
<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/10411/devtools-settings.png" style="display: block; height: 669px; margin-left: auto; margin-right: auto; width: 644px;"></p>
<h3 id="Инструменты_разработчика_Firefox_по_умолчанию">Инструменты разработчика Firefox по умолчанию</h3>
<p>Эта группа галочек определяет, какие инструменты включаются в набор инструментов. Часто бывает, что новый инструмент добавляется в Firefox, но по умолчанию выключен.</p>
<h3 id="Доступные_кнопки_инструментов">Доступные кнопки инструментов</h3>
<p>This group of checkboxes determines which "standalone tools" get buttons in the <a href="https://developer.mozilla.org/ru/docs/Tools_Toolbox#Toolbar">toolbar</a>. This defaults to the node picker, the split console, and responsive design mode.</p>
<p>Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.</p>
<h3 id="Темы">Темы</h3>
<p>This enables you to switch between a light and a dark theme:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6933/light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/6931/dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Общие_настройки">Общие настройки</h3>
<p>Settings that apply to more than one tool. There's just one of these:</p>
<ul>
<li><em>Enable persistent logs</em>: a setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</li>
</ul>
<h3 id="Инспектор">Инспектор</h3>
<ul>
<li><em>Show browser styles</em>: a setting to control whether styles applied by the browser (<a href="https://developer.mozilla.org/ru/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. This setting is new in Firefox 32. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</li>
<li><em>Default color unit</em>: a setting to control how colors are represented in the inspector:
<ul>
<li>Hex</li>
<li>HSL(A)</li>
<li>RGB(A)</li>
<li>name.</li>
</ul>
</li>
</ul>
<h3 id="Редактор_стилей">Редактор стилей</h3>
<ul>
<li><em>Show original sources</em>: when a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="https://developer.mozilla.org/ru/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</li>
<li><em>Autocomplete CSS</em>: enable the Style Editor to offer autocomplete suggestions.</li>
</ul>
<p> </p>
<h3 id="Профайлер_JavaScript">Профайлер JavaScript</h3>
<p> </p>
<ul>
<li><em>Show Gecko platform data</em>: a setting to control whether or not profiles should include Gecko platform symbols.</li>
</ul>
<h3 id="Настройки_редактора">Настройки редактора</h3>
<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="https://developer.mozilla.org/ru/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="https://developer.mozilla.org/ru/docs/Tools/Style_Editor">Style Editor</a>.</p>
<ul>
<li><em>Определять стиль отступов</em>: auto-indent new lines based on the current indentation</li>
<li><em>Автозакрытие скобок</em></li>
<li><em>Отступ с помощью пробелов</em></li>
<li><em>Размер отступа табуляции</em></li>
<li><em>Сочетания клавиш</em>: choose the default CodeMirror keybindings, or keybindings from one of several popular editors:
<ul>
<li>Vim</li>
<li>Emacs</li>
<li>Sublime Text</li>
</ul>
</li>
</ul>
<h3 id="Расширенные_настройки">Расширенные настройки</h3>
<ul>
<li><em>Отключить кэш</em>: позволяет отключить кэш браузера, чтобы определить скорость загрузки всех данных из сети. Начиная с Firefox 33 и новее эта настройка сохраняемая. Это означает, что если Вы отключите кэш, закроете инструменты разработчика и откроете снова, то обнаружите, что кэш все еще отключен. Тем не менее кэширование автоматически будет включено когда инструменты разработчика закрыты.</li>
<li><em>Отключить JavaScript</em>: позволяет выключить JavaScript (требуется перезагрузить страницу)</li>
<li><em>Enable Service Workers over HTTP:</em> enable Service Worker registrations from insecure websites</li>
<li><em>Включить отладку chrome и дополнений</em>: позволяет инструментам разработчика получить доступ к контексту самого браузера, а не только веб контента</li>
<li><em>Включить удаленную отладку</em>: позволяет выполнять <a href="/ru/docs/Tools/Remote_Debugging">отладку удаленных экземпляров Firefox</a> с помощью инструментов разработчика</li>
</ul>
<h2 id="Главная_панель">Главная панель</h2>
<p>The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.</p>
|
