Firebug для firefox - установка і використання

У цьому уроці ми з вами розглянемо шикарне додаток Firebugдля Firefox необхідне для вебмастера. Воно допоможе знайти і виправити потрібне місце в коді Html, а також знайти і відредагувати стилі CSS. При цьому весь процес пошуку і виправлення збільшується в рази. Все це може розширення для Firefox під назвою Firebug. Давайте розглянемо його детальніше.

Тиснемо її і нас відправляють на сторінку addons.mozilla.org.

Далі все зрозуміло. «Додати в Firefox» і після перезавантаження браузера у нас з'являється вгорі праворуч або знизу праворуч ось такий значок - жучок.

Так само його можна побачити, якщо перейти в меню «Інструменти - Додатки - Розширення» в Firefox.

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

Що б запустити плагін Firebug досить натиснути правою кнопкою миші на який нас цікавить фрагменті сайту і в випадаючому меню натиснути на «інспектувати елемент за допомогою Firebug»

Після цього внизу сторінки відкриється вікно плагіна Firebug з кодом Html відповідає саме за цю ділянку сайту. Сам же ділянку сайту підсвічується синім як на фото внизу. Шикарно правда. Але це ще не всі його можливості.

Ви можете вносити зміни в код Html, а результат побачити відразу. При цьому необхідно зазначити, що зміни будуть видні тільки до тих пір поки відкрито вікно Firebug, тобто сам ресурс на сайті він не зачіпає. Таким же способом можете поекспериментувати і з файлом CSS. Змінити колір шрифту або його розмір, ну т.д. Про це розповім трохи нижче більш докладніше.

Отже, ви визначили, яку ділянку коду вам потрібен і потрібно його змінити не тільки візуально а й фізично. Але як це зробити? Для початку, необхідно визначити в якому файлі PHP Joomla 2.5 його шукати. Тут нам Firebug не помічник, але він нам підкаже за що можна зачепитися при пошуку.

Рекомендую використовувати ID або CSS клас в контейнерах. Контейнер це те, що укладено в теги DIV. Як проводити пошук, розказано в розділі Пошук по файлах в Тотал командер. Не всі відразу буде виходити. Однак «єдиної таблетки» тут немає. Як правило, вам доведеться правити код в шаблоні Джумли. У різних розробників шаблонів свої правила по найменуванню CSS класів і ID.

Можете вводити свої значення і відстежувати як це виглядає. Це дуже важливо при редагуванні шаблону Joomla 2.5 так як впевнений, що не всі в цьому шаблоні буде влаштовувати вас.

І так, підібрали потрібне значення і візуально все влаштовує, але де тепер шукати потрібний нам файл або файли CSS.

Тут все набагато простіше. Тут вказано назву файлу CSS і рядок, де це правило знаходиться.

Якщо ви не пам'ятаєте де знаходиться в шаблоні цей файл або їх може бути кілька, то шлях до нього можна дізнатися клацнувши прово кнопкою миші на назві файлу і відкрити його в новій вкладці браузера і там подивитися шлях до нього.

Швидкість завантаження сайту дуже важливий фактор. Можна перевірити цей показник і на сторонніх сервісах в інтернеті але можна перевірити і за допомогою плагіна Firebug для Firefox.

Тиснемо кнопку «Мережа» в вікні плагіна і оновлюємо (F5) нашу відкриту сторінку і бачимо результат. Далі працюємо з особливо гальмівними елементами.

І на останок хочу зазначити що даний плагін може працювати з сайтом як на хостингу, так і розташованому на локальному сервері Денвер (Denwer).

Удачі Вам у ваших починаннях.