--- title: Firefox інструменти для розробників slug: Tools translation_of: Tools original_slug: Інструменти ---

Переглядайте, редагуйте та налагоджуйте HTML, CSS, JavaScript на десктопах та на мобільних пристроях. Щоб отримати останні оновлення інструментів розробника, завантажте Firefox Developer Edition.

Якщо ви шукаєте інформацію про використання інструментів веб-розробників, доступних у Firefox, ви підійшли до потрібного місця - на цій сторінці ви знайдете посилання на детальну інформацію про всі основні інструменти та додаткові інструменти та додаткову інформацію, як, наприклад, підключити та налаштувати Firefox для Android, як розширити devtools та як налагодити браузер у цілому.

Будь ласка, ознайомтеся з посиланнями, що знаходяться на бічній панелі, та далі вниз на сторінці. Якщо у вас є відгуки або запитання до розробників, надсилайте нам повідомлення в нашому списку розсилки або на каналі IRC (дивіться посилання на спільноту внизу сторінки) Якщо у вас є будь-які відгуки або запитання конкретно щодо документації, MDN discourse - це гарне місце для публікації.

Примітка: Якщо ви тільки починаєте розробку веб-сторінок та використовуєте інструменти для розробників, то наші документи з вивчення веб-розробки допоможуть вам — дивіться Початок роботи з Інтернетом та Що таке інструменти для розробників в браузері? для гарного старту.

Основні інструменти

Ви можете відкрити Firefox Developer Tools (Інструменти для розробників) із меню, обравши Tools > Web Developer > Toggle Tools або використовуючи комбінацію клавіш Ctrl + Shift + I або F12 на Windows та Linux, або Cmd + Opt + I на macOS.

Меню еліпсиса в правій частині Developer Tools, містить кілька команд, які дозволяють виконувати дії або змінювати налаштування інструменту.

	Ця кнопка з’являється лише тоді, коли на сторінці є кілька фреймів. Клікніть її, щоб відобразити список фреймів на поточній сторінці та виберіть той, з яким потрібно працювати.
	Натисніть цю кнопку, щоб зробити знімок екрана поточної сторінки. (Примітка. Ця функція не вмикається за замовчуванням і повинна бути включена в налаштуваннях, перш ніж з'явиться значок.)
	Вмикає режим адаптивного дизайну.
	Відкриває меню, що включає параметри стикування, можливість показу або приховування розділеної консолі та налаштування Інструментів для розробників. Меню також містить посилання на документацію для веб-інструментів Firefox та спільноти Mozilla.
	Закриває Інструменти для розробників

Інспектор сторінки

Перегляд та редагування вмісту та макета сторінки. Візуалізуйте багато аспектів сторінки, включаючи блочну модель, анімацію та макети сітки.

Веб-консоль

Переглядайте повідомлення, зареєстровані веб-сторінкою, та взаємодійте зі сторінкою за допомогою JavaScript.

JavaScript Налагоджувач

Зупиніть, перегляньте, вивчіть та змініть JavaScript, який працює на сторінці.

Мережевий монітор

Дивіться мережеві запити, зроблені під час завантаження сторінки.

Інструменти продуктивності

Проаналізуйте загальну чуйність, ефективність роботи JavaScript та компонування вашого сайту.

Режим адаптивного дизайну

Подивіться, як буде виглядати ваш веб-сайт або додаток на різних пристроях та типах мережі.

Інспектор доступності

Забезпечує засіб доступу до дерева доступності сторінки, що дозволяє перевірити, чого немає або потребує іншої уваги.

Примітка: Колективний термін для інтерфейсу, всередині якого живе DevTools, - це Панель інструментів.

Створення

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

Scratchpad: Текстовий редактор, вбудований у Firefox, який дозволяє писати та виконувати JavaScript.
Style Editor: Переглядайте та редагуйте стилі CSS для поточної сторінки.
Shader EditorMobile: Перегляд і редагування вершинних і фрагментних шейдерів, які використовуються WebGL.
Web Audio Editor: Вивчіть графік звукових вузлів у звуковому контексті та змініть їх параметри.

Вивчення та налагодження

Examine, explore, and debug websites and web apps.

Панель інструментів (Toolbox): The Toolbox provides a single home for most of the developer tools that are built into Firefox.
Консоль (Console): Переглядайте повідомлення, зареєстровані веб-сторінкою, і взаємодійте зі сторінкою за допомогою JavaScript.
Інспектор сторінки (Page Inspector): Переглядайте та змінюйте сторінку в HTML і CSS.
Зневаджувач JavaScript (Debugger): Зупиніть, пройдіть, вивчіть і змініть JavaScript, запущений на сторінці.
Монітор мережі (Network Monitor): Переглядайте мережеві запити, зроблені під час завантаження сторінки.
Інспектор сховища (Storage Inspector): Перевірте файли cookie, локальне сховище, індексованеБД і сховище сеансу, присутнє на сторінці.
Інспектор DOM і стилю (DOM Inspector): Inspect the page's DOM properties, functions, etc.
Developer Toolbar: Інтерфейс командного рядка для інструментів розробника.
Remote Debugging: Підключіть інструменти розробника до Firefox з віддаленого комп'ютера.
Eyedropper: Виберіть колір на сторінці.
about:debugging: Інформаційна панель для налагодження додаткових компонентів і робочих
Working with iframes: Як націлити певний фрейм.

Мобільний

Інструменти для мобільного розвитку.

Responsive Design Mode: Перегляньте, як ваш веб-сайт або програма виглядатимуть на різних розмірах екрана, не змінюючи розмірів вікна веб-переглядача.
App Manager: Менеджер програм замінено на WebIDE.
WebIDE: Створювати, редагувати, запускати та налагоджувати веб-програми за допомогою Firefox OS Simulator або реальний пристрій Firefox OS. WebIDE є заміною для Менеджера програм, доступного від Firefox 33 і далі.
Firefox OS Simulator: Запускайте та налагоджуйте додаток Firefox OS на робочому столі, не потребуючи реального пристрою Firefox OS.
Debugging on Firefox for Android: Підключіть інструменти розробника до Firefox для Android.
Debugging Firefox for Android with WebIDE: Для робочого столу Firefox 36+ / Android Firefox 35+ існує більш простий процес.
Valence: Підключіть інструменти розробника до Chrome на Android і Safari на iOS

Продуктивність

Діагностика та усунення проблем із продуктивністю.

Performance Tool: Проаналізуйте загальну чутливість вашого сайту, JavaScript і продуктивність макета.
Memory: Визначте, які об'єкти зберігають пам'ять.
Frame rate graph: Перегляньте частоту кадрів для вашого сайту.
Waterfall: Визначте, що робить браузер, коли він запускає ваш сайт.
Call Tree: З'ясуйте, де ваш код JavaScript витрачає свій час.
Flame Chart: Подивіться, які функції знаходяться в стеку протягом процесу виконання.
Paint Flashing Tool: Виділяє частини сторінки, які перефарбовані у відповідь на події.
Reflow Event Logging: Див. Події перекомпонування в веб-консолі.
Network Performance: Подивіться, як довго завантажуються частини вашого сайту.

Debugging the browser

За замовчуванням інструменти розробника додаються до веб-сторінки або веб-програми. Але ви також можете підключити їх до браузера в цілому. Це корисно для розробки браузера та додаткових компонентів.

Browser Console: Переглядайте повідомлення, зареєстровані самим браузером та додатками, а також запустіть JavaScript-код у сфері браузера.
Browser Toolbox: Приєднайте Інструменти розробника до самого веб-переглядача.

Розширення devtools

Інструменти розробника розроблені для розширення. Додатки Firefox можуть отримати доступ до інструментів розробників і компонентів, які вони використовують для розширення існуючих інструментів і додавання нових інструментів. За допомогою віддаленого протоколу налагодження ви можете реалізовувати власні клієнти та сервери відлагодження, дозволяючи налагоджувати веб-сайти, використовуючи власні інструменти або налагоджувати різні цілі за допомогою інструментів Firefox.

Add a new panel to the devtools: Напишіть додатковий компонент, який додасть нову панель до панелі інструментів.
Remote Debugging Protocol: Протокол, який використовується для підключення інструментів для розробників Firefox до цільової налагодження, наприклад екземпляра Firefox або пристрою Firefox OS.
Source Editor: Редактор коду, вбудований у Firefox, який може бути вбудований у ваш додаток.
The Debugger Interface: API, який дозволяє коду JavaScript спостерігати за виконанням іншого коду JavaScript. Інструменти розробників Firefox використовують цей API для реалізації відладчика JavaScript.
Web Console custom output: Як розширити і налаштувати висновок Web Console та Browser Console.
Example devtools add-ons: Використовуйте ці приклади, щоб зрозуміти, як реалізувати надбудову devtools.

Внесок

Якщо ви хочете допомогти поліпшити інструменти розробника, є кілька ресурсів, щоб почати.

Get Involved: Вікі-сторінку Mozilla, що пояснює, як взяти участь.

firefox-dev.tools: Інструмент, який допомагає знайти помилки для роботи.

Більше ресурсів

У цьому розділі перелічено ресурси, які наразі не підтримуються командою розробників інструментів розробників Mozilla, але які широко використовуються веб-розробниками. Ми включили декілька додатків Firefox у цей список, але для повного списку див “Web Development” category on addons.mozilla.org.

Firebug: Дуже популярний і потужний інструмент веб-розробки, включаючи відладчик JavaScript, переглядач і редактор HTML і CSS, а також мережний монітор.
DOM Inspector: Перевірте, перегляньте та відредагуйте DOM веб-сторінок або вікон XUL.
Web Developer: Додає до браузера меню та панель інструментів з різними інструментами веб-розробника.

Webmaker Tools: Набір інструментів, розроблених Mozilla, спрямований на людей, які починають роботу з веб-розробкою.
W3C Validators: Веб-сайт W3C містить ряд інструментів для перевірки правильності вашого веб-сайту, включаючи його HTML та CSS.
ESLint: JavaScript linting and code analysis tool.