---
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>