10 корисних інструментів для розробників Firefox, які ви повинні знати
Firefox, який є "браузером розробника", має безліч чудових інструментів, які допоможуть нам полегшити нашу роботу. Докладніше про його колекцію інструментів можна знайти на веб-сторінці Інструментів розробників Firefox, а також спробувати їхній веб-переглядач для розробників, який має більше функцій і інструментів, які тестуються.
Для цього посту я перерахував 10 зручних інструментів вам може сподобатися зі своєї колекції інструментів розробника. Я також продемонстрував, що ці інструменти можуть робити з GIF, а також як отримати доступ до них для швидкого посилання.
1. Перегляд горизонтальних і вертикальних лінійок
У Firefox є інструмент лінійки відображає горизонтальні та вертикальні лінійки з піксельними одиницями на сторінці. Інструмент корисний для організації елементів по сторінці.
Щоб отримати доступ до лінійок через меню, перейдіть до: ☰> Розробник > Панель інструментів для розробників (ярлик: Shift + F2). Після того, як панель інструментів з'явиться внизу сторінки, введіть правителів і натисніть Enter.
Щоб зробити це у вікні інструментів розробника, перейдіть до "Параметри панелі інструментів". У розділі "Доступні кнопки на панелі інструментів" позначте "Перемикайте лінійки для сторінки".
2. Створюйте скріншоти за допомогою CSS-селекторів
Незважаючи на те, що панель інструментів Firefox дозволяє робити скріншоти повної сторінки або видимих частин, на мою думку, метод селектора CSS є більш корисним для захоплення скріншоти окремих елементів а також для елементи, які видно при наведенні миші тільки (наприклад, меню).
Щоб зробити скріншоти через меню, перейдіть до ☰> Розробник > Панель інструментів для розробників (shortcutShift + F2). Після того, як панель інструментів з'явиться внизу сторінки, введіть скріншот --селектор any_unique_css_selector і натисніть введіть.
Щоб це відобразилося в вікні інструментів розробника: натисніть "Параметри панелі інструментів" і в розділі "Доступні кнопки інструментів" розділ, позначте "Зробити знімок екрана на повній сторінці " прапорець.
3. Виберіть кольори з веб-сторінок
Firefox має вбудований інструмент вибору кольору на ім'я "Піпетка". Для доступу до інструмента "Піпетка" через меню перейдіть до ☰> Розробник > Піпетка.
Щоб це з'явилося в вікні інструментів розробника: натисніть "Параметри панелі інструментів" і в розділі "Доступні кнопки інструментів" перевірте розділ "Візьміть колір зі сторінки".
4. Переглянути макет сторінки в 3D
Перегляд веб-сторінок в 3D допомагає з проблемами макета. Ви зможете побачити різні шаруваті елементи набагато чіткіше в 3D-перегляді. Щоб переглянути веб-сторінку в 3D, натисніть кнопку "3D-перегляд".
Щоб це з'явилося в вікні інструментів розробника, натисніть "Параметри панелі інструментів" і в розділі "Доступні кнопки інструментів" розділ перевірте "3D-перегляд".
5. Перегляньте стиль веб-переглядача
Стилі браузера складаються з двох типів: стиль за замовчуванням, який браузер призначає для кожного елемента, і стилі, специфічні для браузера (ті з префіксом браузера). Подивившись на стилі веб-переглядача діагностувати будь-які проблеми перевизначення у таблиці стилів а також дізнатися про існуючі стилі браузера .
Щоб отримати доступ до "Стилів браузера" через меню, перейдіть до ☰> Розробник > Інспектор. Потім перейдіть на вкладку "Обчислити" у правій частині та встановіть прапорець "Стилі браузера".
Ви також можете відкрити "Інспектор"" через ярлик Ctrl + Shift + C і потім доступ до "Стилів браузера".
6. Вимкніть JavaScript для поточного сеансу
Для кращої практики та сумісності з екраном завжди рекомендується кодувати будь-який веб-сайт таким чином, щоб його функціональність не заважала в середовищі, де вимкнено javascript. Щоб перевірити такі середовища, можна вимкніть JavaScript для сесії, в якій ви працюєте.
Щоб вимкнути JavaScript для поточного сеансу, натисніть "Параметри панелі інструментів", а в розділі "Додаткові налаштування" перевірте "Вимкніть JavaScript* "прапорець.
7. Сховати стиль CSS зі сторінки
Так само, як і JavaScript, у зв'язку з проблемами доступності краще розробляти веб-сайти таким чином сторінки повинні бути доступними для читання навіть без будь-яких стилів. Щоб побачити, як виглядає сторінка без стилю, ви можете вимкнути їх у інструментах розробника.
Щоб видалити будь-який стиль CSS (вбудований, внутрішній або зовнішній), застосований на веб-сторінці, просто натисніть на символ очей перелічених таблиць стилів на вкладці "Редактор стилів". Натисніть її знову, щоб повернутися до початкового вікна.
Для доступу до "Редактор стилів" через меню перейдіть до ☰> Розробник > Редактор стилів (ярлик: Shift + F7.
8. Перегляньте відповідь HTML-контенту на запит
Інструментарій для розробників Firefox має можливість перегляньте відповіді типу HTML-вмісту. Це допомагає розробникові переглядати будь-які перенаправлення 302 і перевіряти, чи була в відповіді будь-яка конфіденційна інформація відтворена.
Щоб відкрити меню "Попередній перегляд", перейдіть до пункту ☰> Розробник > Мережа (ярлик: Ctrl + Shift + Q. Потім відкрийте веб-сторінку за вашим вибором або перезавантажте поточну сторінку, натисніть кнопку бажаний запит (за допомогою відповіді HTML) зі списку запитів і натисніть кнопку "Попередній перегляд"" у правій частині.
9. Перегляньте веб-сторінку в різних розмірах екрану
Для тестування веб-сторінки на його реагування використовуйте "Responsive Design View", який можна отримати за допомогою ☰> Розробник > Адаптивний перегляд дизайну або за допомогою комбінації клавіш: Ctrl + Shift + M.
Для того, щоб з'явилася кнопка інструменту "Реагування адаптивного режиму", натисніть "Параметри панелі інструментів", а в розділі "Доступні кнопки набору інструментів" встановіть прапорець "Реагуючий режим дизайну".
10. Запустіть JavaScript на сторінках
Для швидкого виконання JavaScript на будь-якій веб-сторінці використовуйте інструмент "Scratchpad" Firefox. Для доступу до "Scratchpad" через меню перейдіть до; .> Розробник > Scratchpad або скористайтеся клавіатурним скороченням Shift + F4.
Для швидкого використання кнопки інструментів "Scratchpad" у вікні інструментів розробника натисніть "Параметри панелі інструментів"і під"Доступні кнопки інструментів"Відзначте розділ" Scratchpad " прапорець.
