Раніше вся робота з інструментами розробника Firefox була пов'язана з розширенням Firebug. У Firefox було кілька вбудованих інструментів, але вони не були настільки потужними, як Firebug або Chrome DevTools. Тепер все змінилося.
Власні інструменти розробника Firefox пройшли довгий шлях, і вони все ще постійно вдосконалюються. Тепер вони, напевно, на тому ж рівні, що й інші dev tools. Пропоную вам ознайомитися з функціями в Firefox Dev Tools, про які ви, можливо, нічого не знаєте.
Примітка. Деяким найновішим функціям знадобиться Firefox Nightly, але більшість з них доступні й в звичайному Firefox.
CSS Grid Inspector
CSS Grid починає кардинально змінювати в кращу сторону спосіб створення макетів веб-дизайну. Наскільки я знаю, на даний час CSS Grid Inspector присутній лише в інструментах розробника Firefox.
Серед іншого, grid inspector може:
- Визначити всі сітки (grids) на сторінці
- Накладанням показувати, як викладена сітка
- Відображати лінії сітки і їх кількість
- Відображати названі області сітки
- Візуалізувати ефекти перетворень, застосованих до контейнера сітки
Якщо ви ще не гралися з CSS Grid, вам це сподобається, і з допомогою інструментів grid inspector у Firefox процес роботи з ним стає все більш приємним.
Дізнайтеся більше на hacks.mozilla.org.
CSS Animation Inspector
Інструменти розробника Firefox тепер містять інспектор поглибленої CSS анімації, який автоматично визначає анімацію вибраного елемента, а також будь-які анімації в його дочірніх елементах. Для кожного анімованого елемента він показує часову шкалу зі скрубером, яким ви можете керувати, і дає вам змогу призупинити, прискорити або сповільнити анімацію.
Ви можете змінити властивості обраної анімації на вкладці Styles та переглянути ефект зроблених змін у реальному часі. Це корисно при налаштуванні таких речей, як пом'якшування функцій (easing functions). Те, як анімації зображуються в dev tools також допомагає вам визначити склад кожної анімації.
Дізнайтеся більше на developer.mozilla.org.
Developer Toolbar
Developer Toolbar — зручний спосіб швидко активувати функції, включені в Firefox Dev Tools та керувати ними. Це порівняно простий інтерфейс командного рядка, за допомогою якого ви можете взаємодіяти практично з усім, що роблять інструменти розробника. Наприклад, зробити швидкий знімок екрана, отримати адаптивний попередній перегляд вашого сайту в певних розмірах або захопити колір зі сторінки.
Натисніть SHIFT + F2, щоб відкрити панель інструментів, а потім введіть командну підказку, щоб дізнатися про всі команди, які є у вашому розпорядженні.
Дізнайтеся більше на developer.mozilla.org.
Режим адаптивного дизайну
Режим адаптивного дизайну допомагає вам імітувати різні пристрої; їх розміри, методи взаємодії та типову швидкість з'єднання. Ви можете вибрати зі списку заздалегідь визначених розмірів, додати свої власні визначення розміру до списку або вільно змінювати розмір попереднього перегляду.
Щоб його активувати, натисніть іконку Responsive Design Mode в інструментах розробника або у Developer Toolbar введіть resize on; введіть resize to <width> <height>, щоб протестувати певний розмір; resize off, щоб знову його вимкнути; resize toggle, щоб вимкнути та ввімкнути його.
Дізнайтеся більше на developer.mozilla.org.
Лінійки
Слідкуйте за розмірами ваших дизайнів, використовуючи лінійки сторінок, аналогічні тим, які ви можете знайти в програмах для графічного дизайну.
Для активації натисніть на іконку Rulers у верхній панелі dev tools, або у Developer Toolbar введіть rulers.
Дізнайтеся більше на developer.mozilla.org.
Eyedropper
Захопіть будь-який колір зі сторінки з допомогою піпетки (eyedropper), яка збільшить все, на що ви наведете курсором миші, щоб зробити підбір кольору легшим. Ви можете вказати формат, в якому буде вказаний колірний код, або використовувати його в авторизованому форматі.
Активувати можна з меню Web Developer або ввести у Developer Toolbar команду eyedropper.
Дізнайтеся більше на developer.mozilla.org.
Screenshot Tool
У Firefox є надзвичайно зручний інструмент для створення скріншотів; Нема потреби в додаткових розширеннях.
У звичайному режимі ви можете скористатись screenshot tool, щоб захопити область перетягування, або можете натиснути на окремі елементи сторінки для їх захоплення. В режимі адаптивного дизайну (Responsive Design mode) ви можете натиснути маленьку кнопку у верхньому правому куті попереднього перегляду, щоб захопити екран, і продивитись, як виглядає ваш сайт на певному пристрої.
Активуйте screenshot tool з головної панелі інструментів dev tools у Firefox 57 (nightly), у верхньому правому куті, або у Developer Toolbar за допомогою команди screenshot.
Дізнайтеся більше на developer.mozilla.org.
Measure Tool
Виконайте швидке вимірювання на будь-якій частині сторінки, активуючи інструмент вимірювання (measure tool) та перетягнувши прямокутник. Ви отримаєте висоту, ширину і діагональну відстань між кутами.
Темна, світла, або тема Firebug
Інструменти розробника Firefox поставляються з трьома темами: світлою (білою), темною (синьою), а також своєрідною даниною поваги оригінальним інструментам розробника Firefox — темою Firebug.
Ще немає коментарів