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? Щоб запустити плагін, необхідно клікнути на значок у формі жука. Після завантаження відкривається вікно плагіна, і користувач спостерігає приблизно наступне:

Firebug – корисний інструмент для web-розробника

На цьому скріншоті видно, що у вікні зліва представлений HTML-код сторінки, а праворуч –CSS стилі виділеного фрагмента коду. Це прискорює пошук і налагодження. Також в меню присутні наступні розділи для обробки:

  • HTML;
  • CSS;
  • Script;
  • DOM;
  • NET.

Редагування HTML-коду

Для редагування html-коду досить виділити потрібний фрагмент і вибрати пункт «Редагувати». Зміни відразу ж відображаються на web-сторінці. Якщо навести курсор на ділянку коду, то firebug виділить на сторінці елемент, описаний даним кодом, як показано на наступному скріншоті:

Firebug – корисний інструмент для web-розробника

Редагування CSS

CSS стилі представлені в правій частині вікна firebug. У вікно виводяться стилі, що відповідають виділеним на даний момент фрагментами html-коду. Щоб побачити, як стиль змінює зовнішній вигляд елементів сторінки, можна «відключити» властивість, натиснувши на червоний перекреслений кружечок. Для повернення до початкового виду елемента, необхідно повторно натиснути на гурток:

Firebug – корисний інструмент для web-розробника

На малюнку видно, що після відключення властивості меню, змінилася позиція даного елемента.

Page speed firebug

Розглянемо важливе доповнення до плагіну firebugpage speed firebug. Цей інструмент призначений для аналізу завантаження веб-сторінки. При правильному використанні отриманих даних, можна підвищити швидкість завантаження сайту.

Це розширення firebug можна знайти, перейшовши за наступним посиланням: https://developers.google.com/speed/pagespeed/?csw=1. Після установки і запуску немає ніяких перешкод для того, щоб почати аналіз:

Firebug – корисний інструмент для web-розробника

Результатом аналізу є список порад по оптимізації оброблюваної сторінки, приклад якого представлений на наступному скріншоті:

Firebug – корисний інструмент для web-розробника

Виконання даних рекомендацій значно підвищить швидкість завантаження web-сторінок. Червоні кружки вказують на те, що відповідні пункти надають великий вплив на швидкість, а поради, позначені жовтими трикутниками, не так важливі для оптимізації.

Гарячі клавіші firebug

Гарячі клавіші (комбінації клавіш) прискорюють процес роботи в кілька разів. Нижче наведено список деяких корисних гарячих клавіш, що діють в плагіні firebug:

Firebug – корисний інструмент для web-розробника
Firebug – корисний інструмент для web-розробника

Firebug для інших браузерів

Щоб встановити firebug для chrome, потрібно зайти в налаштування браузера, вибрати вкладку «розширення», потім клікнути на «ще розширення» і за допомогою пошуку знайти плагін:

Firebug – корисний інструмент для web-розробника

Встановити плагін для opera можна на офіційному сайті:

Firebug – корисний інструмент для web-розробника

Firebug для safari і для IE можна знайти на сайті. Потрібно відзначити, що версії для браузерів, відмінних FireFox, мають не повний функціонал, а є Lite-версіями плагіна.

Firebug є проривом в сфері web-конструювання. Це відмінний інструмент, який дає можливість зробити роботу верстальника більш приємною і цікавою, а головне – більш швидкою.

Також даний плагін є хорошим допоміжним інструментом для тих, хто тільки починає знайомитися з розробкою сайтів. Для більшості браузерів існує аналог firebug, так що ви можете пізнати його принади, навіть не використовуючи Firefox.