Переклад цієї статті ще триває.

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

Створення

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

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.

Join the Developer tools community

Choose your preferred method for joining the discussion:

Мітки документа й учасники

Зробили внесок у цю сторінку: Sergiy_Luckys, mdnwebdocs-bot, pupenasan, yuraantonov
Востаннє оновлена: Sergiy_Luckys,