Firebug – це багатофункціональний плагін для браузера FireFox, який покликаний спростити процес розробки та налагодження web-сторінок. Дане розширення дозволяє в режимі реального часу інспектувати код сторінки, виявляти в ньому помилки і відразу їх виправляти.
Також плагін firebug надає наступний функціонал:
- Інспектор (Inspect)– функція, призначена для швидкого виявлення тега і перегляду всіх «прив’язаних» до нього властивостей і стилів;
- Можливість редагувати HTML-код таблиці стилів CSS безпосередньо у вікні браузера. Можна вносити різні зміни в атрибути тега і відразу ж спостерігати результат. Це дуже зручно для знаходження потрібного оформлення;
- Можливість налагодження JavaScript;
- Додатковий функціонал, який дозволяє переглянути процес завантаження сторінки.
Це далеко не повний список функцій, які є плагін для веб-розробників. Крім усього іншого були створені доповнення до firebug:
- Firecookie — інструмент для перегляду і управління cookies;
- FirePHP — інструмент для налагодження PHP-коду за допомогою HTTP-заголовків;
- FireRainbow — інструмент, який виділяє (підсвічує) вставки JavaScript;
- Page speed firebug — додаток, що дозволяє виміряти і оптимізувати швидкість завантаження сайту.
Firebug для firefox
Для того щоб встановити firebug для firefox, необхідно перейти на офіційну сторінку, на якій наведено версій даного продукту: слід вибрати останню на даний момент.
Якщо сторінка була відкрита в Firefox, то при наведенні курсору на посилання з версією firebug відобразиться пропозицію у вигляді кнопки з написом «+Додати в Firefox». Для початку установки плагіна необхідно клацнути по цій кнопці, а після її закінчення перезавантажити браузер:
Використання firebug
Як користуватися firebug? Щоб запустити плагін, необхідно клікнути на значок у формі жука. Після завантаження відкривається вікно плагіна, і користувач спостерігає приблизно наступне:
На цьому скріншоті видно, що у вікні зліва представлений HTML-код сторінки, а праворуч –CSS стилі виділеного фрагмента коду. Це прискорює пошук і налагодження. Також в меню присутні наступні розділи для обробки:
- HTML;
- CSS;
- Script;
- DOM;
- NET.
Редагування HTML-коду
Для редагування html-коду досить виділити потрібний фрагмент і вибрати пункт «Редагувати». Зміни відразу ж відображаються на web-сторінці. Якщо навести курсор на ділянку коду, то firebug виділить на сторінці елемент, описаний даним кодом, як показано на наступному скріншоті:
Редагування CSS
CSS стилі представлені в правій частині вікна firebug. У вікно виводяться стилі, що відповідають виділеним на даний момент фрагментами html-коду. Щоб побачити, як стиль змінює зовнішній вигляд елементів сторінки, можна «відключити» властивість, натиснувши на червоний перекреслений кружечок. Для повернення до початкового виду елемента, необхідно повторно натиснути на гурток:
На малюнку видно, що після відключення властивості меню, змінилася позиція даного елемента.
Page speed firebug
Розглянемо важливе доповнення до плагіну firebug – page speed firebug. Цей інструмент призначений для аналізу завантаження веб-сторінки. При правильному використанні отриманих даних, можна підвищити швидкість завантаження сайту.
Це розширення firebug можна знайти, перейшовши за наступним посиланням: https://developers.google.com/speed/pagespeed/?csw=1. Після установки і запуску немає ніяких перешкод для того, щоб почати аналіз:
Результатом аналізу є список порад по оптимізації оброблюваної сторінки, приклад якого представлений на наступному скріншоті:
Виконання даних рекомендацій значно підвищить швидкість завантаження web-сторінок. Червоні кружки вказують на те, що відповідні пункти надають великий вплив на швидкість, а поради, позначені жовтими трикутниками, не так важливі для оптимізації.
Гарячі клавіші firebug
Гарячі клавіші (комбінації клавіш) прискорюють процес роботи в кілька разів. Нижче наведено список деяких корисних гарячих клавіш, що діють в плагіні firebug:
Firebug для інших браузерів
Щоб встановити firebug для chrome, потрібно зайти в налаштування браузера, вибрати вкладку «розширення», потім клікнути на «ще розширення» і за допомогою пошуку знайти плагін:
Встановити плагін для opera можна на офіційному сайті:
Firebug для safari і для IE можна знайти на сайті. Потрібно відзначити, що версії для браузерів, відмінних FireFox, мають не повний функціонал, а є Lite-версіями плагіна.
Firebug є проривом в сфері web-конструювання. Це відмінний інструмент, який дає можливість зробити роботу верстальника більш приємною і цікавою, а головне – більш швидкою.
Також даний плагін є хорошим допоміжним інструментом для тих, хто тільки починає знайомитися з розробкою сайтів. Для більшості браузерів існує аналог firebug, так що ви можете пізнати його принади, навіть не використовуючи Firefox.
