Домашня » Кодування » 10 корисних інструментів для розробників Firefox, які ви повинні знати

    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 " прапорець.