Подивіться на основні інструменти Firefox для веб-розробників
Firefox вже давно є кращим браузером для веб-розробки. Є ціла низка корисних доповнень для виконання цієї роботи. На цій посаді ми розглянемо кілька доповнень, які, на мою думку, необхідно встановити, якщо ви збираєтеся робити веб-розробку. Також ми збираємося розкрити деякі функції цих доповнень, які можуть допомогти.
Перш за все, нам потрібно встановити Firebug.
Firebug
Firebug є обов'язковим додатком для веб-розробки. Припускаючи, що ви не знаєте, де отримати Firebug, ви можете встановити його тут. Можливо, потрібно перезапустити Firefox, перш ніж він активується.
Після цього ви можете переглядати Firebug одним із наступних способів: виконайте це меню Інструменти> Веб-розробники> Firebug, клацніть правою кнопкою миші на веб-сторінці та виберіть “Перевірте елемент Firebug”.
Крім того, ви можете знайти піктограму Firebug у Firefox і натиснути на неї, це покаже вікно firebug;
Firebug цілком ідентичний Засоби розробників Chrome. вона має панель для перегляду структури HTML та стилів, а також панелі Console, щоб побачити помилки, попередження та журнали. Але, у мене є ще кілька порад, які, сподіваюся, можуть виявитися корисними.
Налаштування розмірів вікна
Елемент HTML складається з моделі CSS, що складається з поля, розміру та розміру об'єкта (width / height). Іноді ми можемо потребувати зміни цих властивостей. У цьому випадку можна вибрати один із елементів, які потрібно змінити, а потім перейти до Макет панелі.
На цій панелі ви знайдете ілюстрацію моделі коробки CSS разом з її інформацією, включаючи ширина і висота. Хоча ці два властивості не вказані в CSS, цей інструмент досить розумний, щоб визначити значення. Якщо вам потрібно їх змінити, ви можете просто натиснути на значення і використовувати клавішу зі стрілками вгору або вниз для збільшення або зменшення значення.
Обчислені стилі
У багатьох ситуаціях, напевно, цікаво, чому певні стилі не застосовуються. Одним з простіших і швидких способів, особливо коли ви маєте тисячі рядків стилів, є перевірка його з Обчислений стиль панелі. Цей приклад показує, що колір тексту тега прив'язки перезаписується .кнопки клас, в той час як фон .кнопки клас перезаписується .button.add.
Перевірка сімейства шрифтів (легкий спосіб)
Ви, напевно, часто знаходите щось подібне до цього сімейство шрифтів властивості в CSS з різними сімействами шрифтів. На жаль, це не говорить нам конкретно, який шрифт братиме браузер. Для полегшення ідентифікації ми можемо встановити розширення Firebug саме так FireFontFamily.
Після завершення інсталяції завантажте веб-сторінку, і зараз ми можемо чітко бачити, яка сім'я шрифтів застосовується. У нашому випадку це насправді Helvetica Neue (див. знімок).
Аналіз продуктивності
Це може бути витонченість, але швидкість сайту зараз є одним з параметрів (алгоритму) Google у вирішенні якості веб-сайту; веб-сайт, який швидше завантажується, вважається добре розробленим і вищим за вмістом. Таким чином, швидкість не є чимось, що повинно бути пропущено.
Чиста панель
Перше місце, яке вам потрібно буде відвідати, щоб перевірити продуктивність вашого сайту, це Чистий панелі. Ця панель буде записувати HTTP-запит вашого веб-сайту під час завантаження. На цьому скріншоті нижче показано веб-сторінку, яка завантажується 42 запит і бере навколо 4,36 секунди для завантаження.
Потім ви можете відсортувати HTTP-запит за їх типом, наприклад, HTML, CSS і зображення.
Yslow!
Крім того, ви також можете встановити YSlow, розширення для Firebug від Yahoo !. Після його активації ви знайдете додаткову панель, яка виразно називається Yslow!.
Схожий на Чистий панель, Yslow! буде записувати продуктивність веб-сторінки, коли вона завантажується, але потім вона також повідомить вам, чому веб-сторінка повільна, і що ми можемо зробити, щоб її вирішити. У цьому прикладі ми виконуємо тест на веб-сторінку, і вона забивається 86 для загальної продуктивності, що вважається нормальним.
Швидкість сторінки
Крім того, ви також можете встановити Page Speed з Google. Схожий на Yslow!, він перевіряє швидкість роботи веб-сайту, хоча результат тесту може бути дещо іншим. Цей приклад показує, що одна й та сама веб-сторінка набрано 82 відповідно до швидкості сторінки.
Інструменти веб-розробника
Інструменти веб-розробників, очевидно, для веб-розробників, і в ньому є багато функцій, упакованих на цій панелі інструментів. Але це одна з моїх улюблених.
Інспекція зображення
Іноді нам може знадобитися отримати інформацію про зображення з веб-сторінки. Я часто бачу, як люди роблять це, спотикаючись через веб-переглядач або клацнувши правою кнопкою миші на зображенні та виберіть Перегляд інформації про зображення, так:
Але цей спосіб не є досить ефективним, коли нам потрібно отримати інформацію з багатьох зображень. У цьому випадку ми можемо використати Зображення функцію з додатка. Ця функція легко доступна з меню "Зображення" на панелі інструментів.
Цей приклад показує, як ми показуємо розмір зображення та розмір файлу зображення одночасно:
Вбудовані інструменти Firefox
У останніх версіях Firefox значно розширив свої вбудовані функції для веб-розробників, деякі з них:
Рідна перевірка елемента
Це рідний Перевірити елемент з Firefox може виглядати схожим “Перевірте елемент у Firebug”, але воно діє по-різному.
На цей раз, я не буду переглядати цю функцію далі, так як вона по суті ідентична Firebug HTML і CSS панелі, хоча і з різницею в компонуванні і дизайні. Але є одна відмінна особливість, яку варто спробувати 3D-вигляд.
Використання 3D-вигляд структуру веб-сторінок можна переглянути в глибині. Щоб активувати цей вигляд, ви можете знайти кнопку в нижньому правому куті “Firefox Native перевіряє елемент”. Ось як це 3D-вигляд виглядає як.
Я не використовую його так само часто, як інші функції, але це досить новаторська функція від Mozilla, яку я визнаю, і, звичайно, дуже корисна в певних ситуаціях.
Перегляд веб-дизайну
З моменту зростання популярності у Реагуючий Веб-Дизайн, Firefox ініціював Реагуючий Закладки для Браузера. Цей інструмент дозволить нам перевірити наш веб-сайт у різних вікнах без зміни розміру вікна веб-переглядача.
Цей вигляд доступний у цьому меню: Інструменти> Веб-розробник> Перегляд веб-дизайну. І це, як виглядає вигляд.
Редактор стилів
Нарешті, якщо ви часто працюєте з CSS, ви, швидше за все, полюбите цю функцію. Починаючи з версії 11, Firefox додав Редактор стилів у своїх власних інструментах розробника.
Ця функція настільки ж прохолодна, як і Перегляд веб-дизайну, вона дозволяє редагувати CSS, миттєво бачити вплив на браузер і зберігати зміни, які безпосередньо впливають на вихідний файл CSS.
Редактор стилів доступний в наступному меню: Інструменти> Веб-розробник> Редактор стилів.
Заключна думка
Існує безліч функцій, упакованих в ці додатки Firefox, і ті, які обговорюються тут, є лише деякими з особливостей, які я часто використовую під час веб-розробки. Тим не менш, у вас можуть з'явитися інші поради, які можуть бути корисними для збільшення продуктивності веб-розробки в Firefox.
Які функції ви часто використовуєте? Ви можете поділитися своїми думками в полі для коментарів нижче.
