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

---
title: Firefox інструменти для розробників
slug: Інструменти
translation_of: Tools
---
<p>{{ToolsSidebar}}</p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте, редагуйте та налагоджуйте HTML, CSS, JavaScript на десктопах та на мобільних пристроях.</span> <span title="">Щоб отримати останні оновлення інструментів розробника, завантажте </span></span><strong><a href="https://www.mozilla.org/uk/firefox/developer/">Firefox Developer Edition</a>.</strong></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви шукаєте інформацію про використання інструментів веб-розробників, доступних у Firefox, ви підійшли до потрібного місця - на цій сторінці ви знайдете посилання на детальну інформацію про всі основні інструменти та додаткові інструменти та додаткову інформацію, як, наприклад, підключити</span> <span title="">та налаштувати Firefox для Android, як розширити devtools та як налагодити браузер у цілому.</span></span></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Будь ласка, ознайомтеся з посиланнями, що знаходяться на бічній панелі, та далі вниз на сторінці.</span> <span title="">Якщо у вас є відгуки або запитання до розробників, надсилайте нам повідомлення в нашому списку розсилки або на каналі IRC </span></span> (дивіться <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools#Join_the_Developer_tools_community">посилання на спільноту внизу сторінки</a>) <span class="tlid-translation translation" lang="uk"> <span title="">Якщо у вас є будь-які відгуки або запитання конкретно щодо документації, </span></span> <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> <span class="tlid-translation translation" lang="uk"><span title=""> - це гарне місце для публікації.</span></span></p>

<p><strong>Примітка</strong>: <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви тільки починаєте розробку веб-сторінок та використовуєте інструменти для розробників, то</span></span> наші документи з <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn">вивчення веб-розробки</a> допоможуть вам — дивіться <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> та <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Що таке інструменти для розробників в браузері?</a> для гарного старту.</p>

<h2 id="Основні_інструменти"><span class="tlid-translation translation" lang="uk"><span title="">Основні інструменти</span></span></h2>

<p>Ви можете відкрити Firefox Developer Tools (Інструменти для розробників) із меню, обравши <em>Tools</em> &gt; <em>Web Developer</em> &gt; <em>Toggle Tools</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><span class="tlid-translation translation" lang="uk"><span title="">Меню еліпсиса в правій частині</span></span> Developer Tools, <span class="tlid-translation translation" lang="uk"><span title="">містить кілька команд, які дозволяють виконувати дії або змінювати налаштування інструменту.</span></span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></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="height: 69px; width: 69px;"></td>
   <td><span class="tlid-translation translation" lang="uk"><span title="">Ця кнопка з’являється лише тоді, коли на сторінці є кілька фреймів.</span> <span title="">Клікніть її, щоб відобразити список фреймів на поточній сторінці та виберіть той, з яким потрібно працювати.</span></span></td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
   <td><span class="tlid-translation translation" lang="uk"><span title="">Натисніть цю кнопку, щоб зробити знімок екрана поточної сторінки.</span> <span title="">(Примітка. Ця функція не вмикається за замовчуванням і повинна бути включена в налаштуваннях, перш ніж з'явиться значок.)</span></span></td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
   <td><span class="tlid-translation translation" lang="uk"><span title="">Вмикає режим адаптивного дизайну.</span></span></td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
   <td><span class="tlid-translation translation" lang="uk"><span title="">Відкриває меню, що включає параметри стикування, можливість показу або приховування розділеної консолі та налаштування Інструментів для розробників.</span> <span title="">Меню також містить посилання на документацію для веб-інструментів Firefox та спільноти Mozilla.</span></span></td>
  </tr>
  <tr>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
   <td><span class="tlid-translation translation" lang="uk"><span title="">Закриває Інструменти для розробників</span></span></td>
  </tr>
 </tbody>
</table>

<div class="column-container">
<div class="column-half">
<h3 id="Інспектор_сторінки"><span class="tlid-translation translation" lang="uk"><span title="">Інспектор сторінки</span></span></h3>

<p><a href="https://wiki.developer.mozilla.org/en-US/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 black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Перегляд та редагування вмісту та макета сторінки.</span> <span title="">Візуалізуйте багато аспектів сторінки, включаючи блочну модель, анімацію та макети сітки.</span></span></p>
</div>

<div class="column-half">
<h3 id="Веб-консоль"><span class="tlid-translation translation" lang="uk"><span title="">Веб-консоль</span></span></h3>

<p><a href="https://wiki.developer.mozilla.org/en-US/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 black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте повідомлення, зареєстровані веб-сторінкою, та взаємодійте зі сторінкою за допомогою JavaScript.</span></span></p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="JavaScript_Налагоджувач">JavaScript <span class="tlid-translation translation" lang="uk"><span title="">Налагоджувач</span></span></h3>

<p><a href="https://wiki.developer.mozilla.org/en-US/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 black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Зупиніть, перегляньте, вивчіть та змініть JavaScript, який працює на сторінці.</span></span></p>
</div>

<div class="column-half">
<h3 id="Мережевий_монітор"><span class="tlid-translation translation" lang="uk"><span title="">Мережевий монітор</span></span></h3>

<p><a href="https://wiki.developer.mozilla.org/en-US/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 black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Дивіться мережеві запити, зроблені під час завантаження сторінки.</span></span></p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Інструменти_продуктивності">Інструменти продуктивності</h3>

<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Проаналізуйте загальну чуйність, ефективність роботи JavaScript та компонування вашого сайту.</span></span></p>
</div>

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

<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, як буде виглядати ваш веб-сайт або додаток на різних пристроях та типах мережі.</span></span></p>
</div>
</div>

<div class="column-container">
<div class="column-half">
<h3 id="Інспектор_доступності"><span class="tlid-translation translation" lang="uk"><span title="">Інспектор доступності</span></span></h3>

<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>

<p><span class="tlid-translation translation" lang="uk"><span title="">Забезпечує засіб доступу до дерева доступності сторінки, що дозволяє перевірити, чого немає або потребує іншої уваги.</span></span></p>
</div>
</div>

<div class="note">
<p><strong>Примітка</strong>: <span class="tlid-translation translation" lang="uk"><span title="">Колективний термін для інтерфейсу, всередині якого живе DevTools, - це</span></span> <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Панель інструментів</a>.</p>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/14297/tools.png" style="display: block; height: 383px; margin-left: auto; margin-right: auto; width: 659px;"></p>

<div class="column-container">
<div class="column-half">
<h2 id="Створення"><span class="tlid-translation translation" lang="uk"><span title="">Створення</span></span></h2>

<p>Інструменти для створення веб-сайтів і веб-додатків.</p>

<dl>
 <dt><a href="/uk/docs/Tools/Scratchpad">Scratchpad</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Текстовий редактор, вбудований у Firefox, який дозволяє писати та виконувати JavaScript.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Style_Editor">Style Editor</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте та редагуйте стилі CSS для поточної сторінки.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Shader_Editor">Shader Editor</a>Mobile</dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляд і редагування вершинних і фрагментних шейдерів, які використовуються</span></span> <a href="/uk/docs/Web/WebGL">WebGL</a>.</dd>
 <dt><a href="/uk/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Вивчіть графік звукових вузлів у звуковому контексті та змініть їх параметри.</span></span></dd>
</dl>
</div>

<div class="column-half">
<h2 id="Вивчення_та_налагодження"><span class="tlid-translation translation" lang="uk"><span title="">Вивчення та налагодження</span></span></h2>

<p>Examine, explore, and debug websites and web apps.</p>

<dl>
 <dt><a href="/uk/docs/Tools/Tools_Toolbox">Панель інструментів (Toolbox)</a></dt>
 <dd>The Toolbox provides a single home for most of the developer tools that are built into Firefox.</dd>
 <dt><a href="/uk/docs/Tools/Web_Console">Консоль (Console)</a></dt>
 <dd><span class="tlid-translation translation"><span title="">Переглядайте повідомлення, зареєстровані веб-сторінкою, і взаємодійте зі сторінкою за допомогою JavaScript</span></span>.</dd>
 <dt><a href="/uk/docs/Tools/Page_Inspector">Інспектор сторінки (Page Inspector)</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте та змінюйте сторінку в HTML і CSS.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Debugger">Зневаджувач JavaScript (Debugger) </a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Зупиніть, пройдіть, вивчіть і змініть JavaScript, запущений на сторінці.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Network_Monitor">Монітор мережі (Network Monitor) </a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте мережеві запити, зроблені під час завантаження сторінки.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Storage_Inspector">Інспектор сховища (Storage Inspector)</a></dt>
 <dd>Перевірте файли cookie, локальне сховище, індексованеБД і сховище сеансу, присутнє на сторінці.</dd>
 <dt><a href="/uk/docs/Tools/DOM_Inspector">Інспектор DOM і стилю (DOM Inspector)</a></dt>
 <dd>Inspect the page's DOM properties, functions, etc.</dd>
 <dt><a href="/uk/docs/Tools/GCLI">Developer Toolbar</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Інтерфейс командного рядка для інструментів розробника.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Remote_Debugging">Remote Debugging</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Firefox з віддаленого комп'ютера.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Eyedropper">Eyedropper</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Виберіть колір на сторінці.</span></span></dd>
 <dt><a href="/uk/docs/Tools/about:debugging">about:debugging</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Інформаційна панель для налагодження додаткових компонентів і робочих</span></span></dd>
 <dt><a href="/uk/docs/Tools/Working_with_iframes">Working with iframes</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Як націлити певний фрейм.</span></span></dd>
</dl>
</div>
</div>

<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Мобільний"><span class="tlid-translation translation" lang="uk"><span title="">Мобільний</span></span></h2>

<p><span class="tlid-translation translation" lang="uk"><span title="">Інструменти для мобільного розвитку.</span></span></p>

<dl>
 <dt><a href="/uk/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляньте, як ваш веб-сайт або програма виглядатимуть на різних розмірах екрана, не змінюючи розмірів вікна веб-переглядача.</span></span></dd>
 <dt><a href="/uk/Firefox_OS/Using_the_App_Manager">App Manager</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Менеджер програм замінено на</span></span> <a href="/uk/docs/Tools/WebIDE">WebIDE</a>.</dd>
 <dt><a href="/uk/docs/Tools/WebIDE">WebIDE</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Створювати, редагувати, запускати та налагоджувати веб-програми за допомогою </span></span><a href="/uk/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> <span class="tlid-translation translation" lang="uk"><span title="">або реальний пристрій Firefox OS. </span></span>WebIDE <span class="tlid-translation translation" lang="uk"><span title="">є заміною для Менеджера програм, доступного від Firefox 33 і далі.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Запускайте та налагоджуйте додаток Firefox OS на робочому столі, не потребуючи реального пристрою Firefox OS.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Firefox для Android.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Для робочого столу Firefox 36+ / Android Firefox 35+ існує більш простий процес.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Valence">Valence</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Chrome на Android і Safari на iOS</span></span></dd>
</dl>
</div>

<div class="column-half">
<h2 id="Продуктивність"><span class="tlid-translation translation" lang="uk"><span title="">Продуктивність</span></span></h2>

<p><span class="tlid-translation translation" lang="uk"><span title="">Діагностика та усунення проблем із продуктивністю.</span></span></p>

<dl>
 <dt><a href="/uk/docs/Tools/Performance">Performance Tool</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Проаналізуйте загальну чутливість вашого сайту, JavaScript і продуктивність макета.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Memory">Memory</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Визначте, які об'єкти зберігають пам'ять.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляньте частоту кадрів для вашого сайту.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Визначте, що робить браузер, коли він запускає ваш сайт.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">З'ясуйте, де ваш код JavaScript витрачає свій час.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, які функції знаходяться в стеку протягом процесу виконання.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Виділяє частини сторінки, які перефарбовані у відповідь на події.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Web_Console/Console_messages#Reflow_events">Reflow Event Logging</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Див. Події перекомпонування в веб-консолі.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, як довго завантажуються частини вашого сайту.</span></span></dd>
</dl>
</div>
</div>

<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Debugging_the_browser">Debugging the browser</h2>

<p><span class="tlid-translation translation" lang="uk"><span title="">За замовчуванням інструменти розробника додаються до веб-сторінки або веб-програми.</span> <span title="">Але ви також можете підключити їх до браузера в цілому.</span> <span title="">Це корисно для розробки браузера та додаткових компонентів.</span></span></p>

<dl>
 <dt><a href="/uk/docs/Tools/Browser_Console">Browser Console</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте повідомлення, зареєстровані самим браузером та додатками, а також запустіть JavaScript-код у сфері браузера.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Приєднайте Інструменти розробника до самого веб-переглядача.</span></span></dd>
</dl>
</div>

<div class="column-half">
<h2 id="Розширення_devtools"><span class="tlid-translation translation" lang="uk"><span title="">Розширення devtools</span></span></h2>

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

<dl>
 <dt><a href="/uk/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Напишіть додатковий компонент, який додасть нову панель до панелі інструментів.</span></span></dd>
 <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Протокол, який використовується для підключення інструментів для розробників Firefox до цільової налагодження, наприклад екземпляра Firefox або пристрою Firefox OS.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Editor">Source Editor</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Редактор коду, вбудований у Firefox, який може бути вбудований у ваш додаток.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">API, який дозволяє коду JavaScript спостерігати за виконанням іншого коду JavaScript.</span> <span title="">Інструменти розробників Firefox використовують цей API для реалізації відладчика JavaScript.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Як розширити і налаштувати висновок </span></span><a href="/uk/docs/Tools/Web_Console">Web Console</a> та <a href="/uk/docs/Tools/Browser_Console">Browser Console</a>.</dd>
 <dt><a href="/uk/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Використовуйте ці приклади, щоб зрозуміти, як реалізувати надбудову devtools.</span></span></dd>
</dl>
</div>
</div>

<hr>
<h2 id="Внесок"><span class="tlid-translation translation" lang="uk"><span title="">Внесок</span></span></h2>

<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви хочете допомогти поліпшити інструменти розробника, є кілька ресурсів, щоб почати.</span></span></p>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="https://wiki.mozilla.org/DevTools/GetInvolved">Get Involved</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Вікі-сторінку Mozilla, що пояснює, як взяти участь.</span></span></dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Інструмент, який допомагає знайти помилки для роботи.</span></span></dd>
</dl>
</div>
</div>

<hr>
<h2 id="Більше_ресурсів"><span class="tlid-translation translation" lang="uk"><span title="">Більше ресурсів</span></span></h2>

<p><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі перелічено ресурси, які наразі не підтримуються командою розробників інструментів розробників Mozilla, але які широко використовуються веб-розробниками.</span> <span title="">Ми включили декілька додатків Firefox у цей список, але для повного списку див</span></span> <a href="https://addons.mozilla.org/uk/firefox/extensions/web-development/">“Web Development” category on addons.mozilla.org</a>.</p>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Дуже популярний і потужний інструмент веб-розробки, включаючи відладчик JavaScript, переглядач і редактор HTML і CSS, а також мережний монітор.</span></span></dd>
 <dt><a href="/uk/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Перевірте, перегляньте та відредагуйте DOM веб-сторінок або вікон XUL.</span></span></dd>
 <dt><a href="https://addons.mozilla.org/uk/firefox/addon/web-developer/">Web Developer</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Додає до браузера меню та панель інструментів з різними інструментами веб-розробника.</span></span></dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="https://webmaker.org">Webmaker Tools</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Набір інструментів, розроблених Mozilla, спрямований на людей, які починають роботу з веб-розробкою.</span></span></dd>
 <dt><a href="https://www.w3.org/Status.html">W3C Validators</a></dt>
 <dd><span class="tlid-translation translation" lang="uk"><span title="">Веб-сайт W3C містить ряд інструментів для перевірки правильності вашого веб-сайту, включаючи його </span></span><a href="https://validator.w3.org/" title="http://validator.w3.org/">HTML</a> та <a href="https://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
 <dt><a href="http://eslint.org/">ESLint</a></dt>
 <dd>JavaScript linting and code analysis tool.</dd>
</dl>
</div>
</div>