Firefox Developer Edition 6 Прохолодні інструменти

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

Якщо ви хтось, хто ніколи не користувався інструментами розробників, або хто не дуже добре знайомий з ними, навіть у стандартному випуску, перевірте це прохолодне "DevTools Challenger" від Mozilla. Тут ви можете скористатися деякими інструментами, наведеними нижче у браузері видання розробника Firefox. Приклади весело і легко слідувати, інструкції просто, і якщо ви не можете наздогнати, просто слідуйте відео-підручник замість.

1. Інструмент інспектора анімації

Анімації CSS стають все більш поширеними, а засоби анімації CSS, що надаються в програмі для розробників Firefox, дозволяють легко переглядати та перевіряти кожен крок створеної анімації. Ви можете призупиняти, відтворювати та відміняти будь-яку анімацію; Ви також можете переглядати це відбувається за кадром за допомогою очищення.

Щоб отримати доступ до інструмента, відкрийте вікно Інспектор інструментом, клацнувши правою кнопкою миші на елемент анімації і вибравши пункт "inspect element", потім у правій частині вікна програми dev, натисніть кнопку "Animations".

2. Редактор функції синхронізації анімації

Час анімації можна редагувати в інструменті dev, просто натисніть піктограму поруч із функцією в Правила розділ Інспектор і відкривається спливаюче вікно, що показує криві функцій. Ви можете перетягувати і змінювати цей параметр, щоб налаштувати час анімації. Після внесення змін у криві швидкість анімації буде відповідно змінюватися.

Якщо ви ще не знайомі з кубічною функцією анімації Безьє, я рекомендую цю статтю, щоб дізнатися більше про неї.

3. Палітра кольорів для властивостей CSS

У стандартній версії Firefox вже є вибір кольорів (докладніше про це читайте в цій публікації), який вибирає колір зі сторінки та копіює її до буфера обміну. Вибір кольору, про який я згадую зараз, є специфічні для кольорів CSS властивостей.

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

Якщо ви вже маєте потрібний колір, і той, який є на сторінці, просто натисніть інструмент піпетки в нижній частині спливаючого вікна, щоб відкрити вибір кольорів, а потім перетягніть піктограму до потрібного кольору та натисніть його . Значення кольору CSS буде змінено на колір вибраного кольору.

4. Вимірювальний інструмент

Цей інструмент дає змогу побачити положення курсору XY, а також висоту, ширину і діагональні вимірювання в пікселях вибраної частини. Щоб скористатися інструментом, спочатку потрібно ввімкнути його в розробнику Параметри панелі інструментів, встановіть прапорець "Виміряти частину сторінки" в розділі "Доступні кнопки інструментів".

Після ввімкнення, піктограма лінійки з'явиться у верхній частині вікна програми dev, натисніть цю піктограму та перемістіть курсор на сторінку. Ви побачите позиції XY біля курсору. Щоб виміряти ширину, висоту та діагональ, просто натисніть і перетягніть, щоб вибрати частину, яку потрібно виміряти.

5. Редактор фільтрів CSS

Якщо ви застосували фільтр CSS до елемента на сторінці, поруч із ним з'явиться піктограма Правила розділ Інспектор Інструмент, який відкриває редактор CSS-фільтра після натискання.

Щоб видалити фільтр, натисніть позначку × у правому кінці назви фільтра. Щоб додати фільтр, клацніть поле фільтра внизу та виберіть потрібний фільтр і натисніть кнопку + знак. Також можна переставити фільтри в будь-якому порядку, перетягуючи кожен елемент.

6. Інструмент пам'яті

Ви можете дізнатися, що забирає пам'ять у вашій веб-сторінці, за допомогою цього інструменту. Це допоможе вам вжити заходів для зменшення використання пам'яті і відповідно поліпшити швидкість сторінки.

Щоб скористатися цим інструментом, спочатку потрібно ввімкнути його Параметри панелі інструментів встановивши прапорець "Пам'ять" у розділі "За замовчуванням Інструменти розробників Firefox". Після того, як буде позначено цей пункт, ви побачите розділ "Пам'ять" у верхній частині вікна програми dev безпосередньо після "Performance". Виберіть це.

Щоб скористатися інструментом, натисніть кнопку "Зробити знімок" або кнопку камери. Ви побачите список елементів, таких як об'єкти та сценарії, які займають пам'ять .