path: root/files/ru/tools/index.html

---
title: Инструменты разработчика Firefox
slug: Tools
tags:
  - Developing Mozilla
  - Tools
  - TopicStub
  - 'l10n:priority'
  - Веб-разработка
  - Разработка Mozilla
  - 'веб-разработка:инструменты'
  - инструменты
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>

<p>Исследуйте, редактируйте и отлаживайте HTML, CSS и JavaScript на компьютерах и мобильных устройствах. Для получения последних обновлений для инструментов разработки <a href="https://www.mozilla.org/ru/firefox/developer/">скачайте Firefox Developer Edition</a>.</p>

<p>Если вы ищете информацию по использованию инструментов веб-разработчика доступных в Firefox, вы зашли в правильное место - на этой странице даётся подробная информация обо всех основных и дополнительных инструментах веб-разработчика, а также информацию о том как подсоединять и настраивать Firefox для Android, как расширить набор инструментов разработчика, как настраивать браузер.<br>
 Пожалуйста, посмотрите описания инструментов разработчика, расположенные далее на этой странице. Если у вас возникнут замечания или вопросы об указанном наборе инструментов, то пришлите нам сообщение на нашу почту или IRC канал ( <a href="https://developer.mozilla.org/en-US/docs/Tools#Join_the_Developer_tools_community"> соответствующие ссылки находятся внизу страницы</a>). Если у вас возникнут замечания или вопросы, касающиеся документации, то напишите в <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a>.</p>

<p>На заметку: если вы только начинаете веб разработку и использование инструментов разработчика, наши документы <a href="https://developer.mozilla.org/en-US/docs/Learn">по изучению веб разработки</a> помогут вам - для начала посмотрите <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (Начало работы в веб) и <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools </a>(Инструменты разработки браузера).</p>

<h2 id="Основные_инструменты">Основные инструменты</h2>

<p>Вы можете открыть Средства Разработчика Firefox (Firefox Developer Tools) с помощью меню, выбрав <em>Открыть меню &gt; Веб-разработка &gt; Инструменты разработчика</em> или используя комбинации клавиш <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> или <kbd>F12</kbd> на Windows и Linux, или  <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> на macOS.</p>

<p>Меню в виде многоточия в правой верхней части окна Средств Разработчика содержит команды, позволяющие вам выполнить некоторые общие действия или изменить настройки Средств Разработчика.</p>

<p><img src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; margin: 0 auto;"></p>

<table class="standard-table" style="height: 178px; width: 840px;">
 <tbody>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="max-width: 32px;"></td>
   <td>Эта кнопка доступна только в случае, если на странице присутствует несколько фреймов (тегов <code>iframe</code>). Нажатие на эту кнопку отображает список фреймов (тегов <code>iframe</code>) на текущей странице и позволяет выбрать тот фрейм (тег <code>iframe</code>) с которым вы хотите работать.</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="max-width: 32px;"></td>
   <td>Щелчок по данной кнопке создаёт снимок экрана (screenshot) текущей страницы. (<strong>Внимание:</strong> По умолчанию данная функция отключена и, при необходимости, должна быть включена в настройках.)</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="max-width: 32px;"></td>
   <td>Переключение в/из Режима Адаптивного Дизайна (Responsive Design Mode).</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="max-width: 32px;"></td>
   <td>Открывает меню, которое включает настройки "прилипания" (docking) окна Средств Разработчика, возможности отобразить или скрыть консоль, а также переход к диалогу настроек Средств Разработчика. Это меню также содержит ссылки на документацию по Веб-инструментам Firefox (Firefox Web Tools) и на Mozilla Community.</td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="max-width: 32px;"></td>
   <td>Закрывает окно Средств Разработчика</td>
  </tr>
 </tbody>
</table>

<div class="column-container">
<div class="column-half">
<h3 id="Инспектор_страницы">Инспектор страницы</h3>

<p><a href="https://wiki.developer.mozilla.org/ru/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid #0080f0;"></a></p>

<p>Инструмент для просмотра и редактирования содержимого и макета страницы. Позволяет рассмотреть страницу с разных точек зрения, включая блочную модель, анимацию и grid компоновку.</p>
</div>

<div class="column-half">
<h3 id="Web-консоль">Web-консоль</h3>

<p><a href="https://wiki.developer.mozilla.org/ru/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid #0080f0;"></a></p>

<p>Позволяет просматривать отладочные сообщения страницы и взаимодействовать с ней посредством JavaScript.</p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Отладчик_JavaScript">Отладчик JavaScript</h3>

<p><a href="https://wiki.developer.mozilla.org/ru/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid #0080f0;"></a></p>

<p>Позволяет остановить, выполнять по шагам, исследовать и изменять JavaScript код выполняемый на странице.</p>
</div>

<div class="column-half">
<h3 id="Сетевой_монитор">Сетевой монитор</h3>

<p><a href="https://wiki.developer.mozilla.org/ru/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid #0080f0;"></a></p>

<p>Показывает сетевые запросы возникающие в процессе загрузки страницы.</p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Инструменты_производительности">Инструменты производительности</h3>

<p><a href="/en-US/docs/Tools/Performance"><img alt="" src="https://mdn.mozillademos.org/files/14536/performance.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Позволяют провести общий анализ отзывчивости вашего сайта, а также производительности кода JavaScript и макета.</p>
</div>

<div class="column-half">
<h3 id="Режим_адаптивного_дизайна">Режим адаптивного дизайна</h3>

<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="" src="https://mdn.mozillademos.org/files/14538/rdm.png" style="display: block; height: 1542px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p>Позволяет увидеть, как будут выглядеть и работать ваши сайты или приложения на различных устройствах или типах сетей.</p>

<h3 id="Инспектор_доступности">Инспектор доступности</h3>

<p><img alt="" src="https://mdn.mozillademos.org/files/16396/Screen_Shot_2018-12-15_at_2.19.39_AM.png" style="display: block; height: 1542px; margin-left: auto; margin-right: auto; width: 425px;"></p>

<p>Предоставляет средства для доступа к дереву доступности страницы, позволяя вам проверить, что отсутствует или иным образом требует внимания.</p>
</div>
</div>

<h2 id="Больше_инструментов">Больше инструментов</h2>

<p>Эти инструменты разработчика также встроены в Firefox. В отличие от «Core Tools»  описанных выше, могут не использоваться в повседневной работе.</p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/Memory">Память</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Выясните, какие объекты сохраняют память в использовании.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Проверьте файлы cookie, локальное хранилище, indexedDB и хранилище сеансов на странице.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Проверьте свойства DOM страницы, функции и т.д.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/GCLI">Панель инструментов разработчика</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Интерфейс командной строки для инструментов разработчика.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Eyedropper">Пипетка</a></dt>
 <dd>Получите код любого цвета со страницы.</dd>
 <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Текстовый редактор, встроенный в Firefox, который позволяет вам писать и выполнять JavaScript</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Style_Editor">Редактор стилей</a></dt>
 <dd>Просмотр и редактирование стилей CSS для текущей страницы.</dd>
 <dt><a href="/en-US/docs/Tools/Shader_Editor">Редактор шейдеров</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Просмотр и редактирование вершинных и фрагментных шейдеров, используемых</span></span> <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Редактор веб аудио </a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Изучите график аудиоузлов в аудиоконтексте и измените их параметры.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Screenshot_tool">Делать скриншоты</a></dt>
 <dd>Сделайте скриншот всей страницы, или одного её элемента.</dd>
</dl>
</div>

<hr>
<h2 id="Подключение_инструментов_разработчика"><span class="tlid-translation translation" lang="ru"><span title="">Подключение инструментов разработчика</span></span></h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы откроете инструменты разработчика с помощью</span></span> <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">сочетания клавиш</a> <span class="tlid-translation translation" lang="ru"><span title="">или аналогичных пунктов меню, они будут нацелены на документ, размещённый на текущей активной вкладке.</span> <span title="">Но вы также можете прикрепить инструменты к множеству других целей, как в текущем браузере, так и в разных браузерах или даже на разных устройствах.</span></span></p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Отладка надстроек, вкладок контента и рабочих, работающих в браузере.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Подключение к Firefox для Android</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Подключите инструменты разработчика к Firefox, работающему на устройстве Android.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Working_with_iframes">Подключение к iframes</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Подключите инструменты разработчика к конкретному iframe на текущей странице.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Valence">Подключение к другим браузерам</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Подключите инструменты разработчика к Chrome на Android и Safari на iOS.</span></span></dd>
</dl>
</div>

<h2 id="Отладка_браузера"><span class="tlid-translation translation" lang="ru"><span title="">Отладка браузера</span></span></h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">По умолчанию инструменты разработчика прикрепляются к веб-странице или веб-приложению.</span> <span title="">Но вы также можете подключить их к браузеру в целом.</span> <span title="">Это полезно для разработки браузеров и надстроек.</span></span></p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/Browser_Console">Консоль браузера</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Просматривайте сообщения, зарегистрированные самим браузером и надстройками, и запускайте код JavaScript в области видимости браузера.</span></span></dd>
 <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Панель инструментов браузера</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Присоедините инструменты разработчика к самому браузеру.</span></span></dd>
</dl>
</div>

<h2 id="Расширение_инструментов_разработчика">Расширение инструментов разработчика</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты разработчика предназначены для расширения.</span> <span title="">Дополнения Firefox могут получить доступ к инструментам разработчика и компонентам, которые они используют для расширения существующих инструментов и добавления новых инструментов.</span> <span title="">С помощью протокола удалённой отладки вы можете реализовать свои собственные клиенты и серверы отладки, что позволяет отлаживать веб-сайты с помощью собственных инструментов или отлаживать различные цели с помощью инструментов Firefox.</span></span></p>

<div class="twocolumns">
<dl>
 <dt><a href="/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt>
 <dd>Use these examples to understand how to implement a devtools add-on.</dd>
 <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt>
 <dd>Write an add-on that adds a new panel to the Toolbox.</dd>
 <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
 <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd>
 <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt>
 <dd>A code editor built into Firefox that can be embedded in your add-on.</dd>
 <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt>
 <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt>
 <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd>
</dl>
</div>

<h2 id="Сделать_вклад">Сделать вклад</h2>

<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите помочь улучшить инструменты разработчика, эти ресурсы помогут вам начать работу.</span></span></p>

<div class="twocolumns">
<dl>
 <dt><a href="https://devtools-html.github.io/#getting-in-touch">Увлекитесь</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Вики-страница Mozilla, объясняющая, как принять участие.</span></span></dd>
 <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt>
 <dd><span class="tlid-translation translation" lang="ru"><span title="">Инструмент, помогающий находить ошибки для работы.</span></span></dd>
</dl>
</div>