Firefox інструменти для розробників

Переклад цієї статті ще не завершено. Будь ласка, допоможіть перекласти цю статтю з англійської мови

Переглядайте, редагуйте та налагоджуйте 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.
Закриває Інструменти для розробників

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

The all-new Inspector panel in Firefox 57.

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

Веб-консоль

The all-new Console in Firefox 57.

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

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

The all-new Firefox 57 Debugger.html

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

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

The Network panel in Firefox 57 DevTools.

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

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

Performance Tools in Firefox 57 Developer Tools

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

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

Responsive Design mode in Firefox 57.

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

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

Performance Tools in Firefox 57 Developer Tools

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

Примітка: Колективний термін для інтерфейсу, всередині якого живе 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.