Firebug для firefox! Як користуватися розширенням firebug, блог Короткова николая
Сьогодні я розповім вам про один дуже корисний розширенні для браузерів Firebug! Плагін Firebug або в перекладі з англійської мови «вогненний жук», є справжнім проривом еволюції в світі інтернету і заслуговує на особливу увагу!
Можливо, для рядових користувачів всесвітньої павутини плагін не принесе ніякої користі. Але, якщо ви є веб майстром, і маєте в наявності свій власний ресурс, firebug вам припаде до смаку! А якщо ви ще й верстальник, то він для вас виявиться просто незамінним помічником. Отже, чим же такий хороший цей вогненний жук?
Плагін Firebug дозволяє з легкістю відшукати і відредагувати будь-яку ділянку HTML або CSS коду навіть якщо ви насилу орієнтуєтеся в цих двох мовах. Наприклад, вам потрібно знайти код, який відповідає за виведення і відображення дати і часу ваших постів або подивитися ділянку коду, що виводить основне меню вашого ресурсу.
А можливо вас не влаштовує розташування блоків в сайдбарі і ви хочете розмістити їх по іншому, змінивши при цьому їх розміри і колір. Можливо, в майбутньому ви поміняєте колірну гамму дизайну свого ресурсу, і вам захочеться змінити під нього колір посилань.
З усім цим і не тільки вам допоможе впоратися плагін Firebug. І це я перерахував тільки основні робочі моменти, з якими доводиться частенько стикатися веб майстрам. Насправді плагін має ще масу інших можливостей, але про них я не буду розповідати в рамках даної статті. Бути може, як-небудь пізніше, але не сьогодні.
Звичайно ж, зробити все те, що я перерахував, можна і без плагіна. Наприклад, якщо вам потрібно відшукати ділянку коду, який відповідає за виведення часу і дати, можна натиснути на відповідній сторінці браузера праву кнопку мишки і вибрати зі списку пункт «Вихідний код сторінки» або скористатися комбінацією клавіш Ctrl + U.
Але в цьому випадку перед вами постане HTML - код всього вмісту відкритої сторінки, а вам потрібен тільки ділянку, що відповідає за виведення часу і дати. Так як же тоді бути? Доведеться уважно переглядати весь код в пошуках потрібного. А якщо ви взагалі не розбираєтеся в HTML, то пошук буде марний. Що ж в цьому випадку пропонує нам вогненний жук?
Все дуже просто, він вам відразу ж видасть готовий ділянку того коду, який ви шукайте. Для цього достатньо навести курсор миші на потрібний елемент, натиснути праву кнопку і вибрати все з того ж списку пункт «Перевіряти елемент за допомогою Firebug» (в різних браузерах назву трохи відрізняється):
Firebug вам ту ж виведе Вас ділянку коду, підсвітивши його синім кольором:
Але і це ще не все. Ви тут же можете внести необхідні зміни в код, не боячись напортачить! Справа в тому, що плагін дозволяє редагувати HTML і CSS коди, спостерігаючи в реальному часі за всіма змінами, що відбуваються. І найбільший плюс, що їх будете бачити тільки ви.
А далі, якщо вас влаштують внесені зміни, ви зможете втілити їх в реальність, якщо ж ні, то після оновлення сторінки, всі зміни вмить зникнуть! Ось такі от справи хлопці. Зараз я на конкретному прикладі продемонструю вам, як все відбувається. Але перш ніж ми почнемо, давайте завантажити і встановити плагін Firebug на свій комп'ютер. А також потрібно згадати ще про декілька моментів, пов'язаних з різними браузерами.
Особисто я є давнім шанувальником браузера Mozilla Firefox, хоча Google Chrome мені здається досить спритніше і функціональніша. Напевно, це справа звички.
Так ось, спочатку розширення Firebug було розроблено спеціально для браузера Mozilla Firefox, але час не стоїть на місці і розробники поширили «вогняного жука» і на інші браузери. Але все ж оригінал залишився оригіналом.
І якщо на Mozilla Firefox плагін встановлюється дуже просто, то знайти сторінку з установочними розширенням для Google Chrome трохи важкувато. Тому я вирішив показати обидва варіанти установки цього чудово плагіна. Отже, переступимо.
Firebug для Firefox
Завантажити firebug для firefox можна на цій сторінці. На даний момент останньою версією плагіна є 1.12.6. Як ви вже, напевно, здогадалися, установка повинна проводитися з браузера Mozilla Firefox. Для скачування плагіна досить натиснути на кнопку «+ Додати в Firefox» і у вікні «Встановити зараз»:
Після цього, у верхній або нижній панелі навігації, в залежності від того де вона у вас розташовується, з'явиться значок жука:
Якщо раптом він з якихось причин у вас не з'явився, то запустити розширення можна за допомогою «гарячої клавіші» (F12).
Firebug для Chrome
Якщо ви користуєтеся браузером Google Chrome, то в цьому варіанті установки, відкритий, повинен бути саме він. Завантажити firebug для chrome можна перейшовши за цим посиланням. Далі, натискаємо на кнопку «+ Безкоштовно» і в меню, що з'явилося тиснемо «Додати»:
Після цього розширення буде встановлено і в навігаційної панелі браузера знову з'явиться зображення жука, але трохи відмінного від попереднього пункту:
Як користуватися Firebug
А тепер, як і обіцяв, покажу на конкретному прикладі, як користуватися цим інструментом. Для запуску firebug достатньо клікнути по значку жука або, як я вже згадав вище, скористатися «гарячою клавішею» F12. Після запуску в нижній частині сторінки з'явиться вікно з наступним змістом:
У лівій частині вікна представлений HTML - код завантаженої сторінки, в правій частині вікна ви може спостерігати CSS - коди, тобто стилі виділеної ділянки HTML - коду. Якщо ви захочете згорнути, закрити розширення або зробити так, щоб воно відкрилося в новому вікні, можна скористатися трьома кнопками в панелі управління вікна:
Firebug володіє двома можливостями управління, що спрощує роботу з кодами сторінки і допомагає впоратися з їх вмістом навіть новачкам, які не володіють знаннями HTML і CSS.
У першому випадку ви можете водити курсором мишки по самому коду в вікні плагіна і спостерігати, як на відкритій сторінці підфарбовують блакитним кольором елементи, відповідні тим кодом, на якому зупинився курсор.
Як видно з скріншоту нижче, я навів курсор мишки на ділянку коду
У другому випадку плагін пропонує повністю протилежний ефект. Для його реалізації досить натиснути косу стрілку в прямокутнику, розташовану поруч із позначкою жука в панелі управління плагіном. Після цього ви зможете навпаки, водити курсором мишки по відкритій сторінці, а плагін буде підсвічувати вам ділянки коду, що відповідають за той чи інший елемент.
У цьому прикладі я навів курсор мишки на все той же основне меню блогу і плагін підсвітив мені ділянку коду, який відповідає за його висновок:
Що ще хочеться сказати? Ви повинні знати, що будь-яка сучасна верстка сайту здійснюється за допомогою блоків, укладених в так звані контейнери div (блокова верстка). Ви їх можете спостерігати на скріншоті вище.
Причому кожен контейнер найчастіше має кілька послідовно вкладених один в одного кодів. Щоб подивитися їх вкладеність вам необхідно в лівому вікні плагіна клацнути по плюсик. Так само, працюючи з будь-яким з кодів, в панелі управління плагіном ви зможете спостерігати послідовно вкладені одна в одну контейнери, включаючи редагований контейнер:
Як редагувати HTML - код за допомогою плагіна Firebug
Для редагування ділянки коду, виділіть його кліком мишки і натисніть вкладку «Редагувати». Я покажу вам на прикладі все того ж меню. У ньому я з допомогою плагіна зміню назву сторінки з «Всі статті блогу» на «Вміст ресурсу»:
Як ви можете спостерігати, будь-які зміни відразу ж відображаються в реальному часі на сторінці браузера, що дуже зручно. Якщо взяти цей приклад, то він не викликає складнощів. Але, все ж плагін не всемогутній і при виправленні кодів, існує одна особливість, в якій початківцям веб майстрам розібратися буде складно!
Справа в тому, що всі шаблони написані на мові програмування, який носить назву php. А при відкритті сторінки в браузері вона перетворюється в HTML - код. І якщо вам сподобається реалізоване вами зміна, то для його втілення доведеться копатися в файлах шаблону, щоб відшукати потрібний код для редагування.
Після того, як потрібний файл буде знайдений, вам буде потрібно зачепитися за один з класів або id (ідентифікаторів). Якщо брати все той же приклад з меню, я міркував так:
Як редагувати CSS - код за допомогою плагіна Firebug
Тут справи йдуть набагато простіше, ніж в попередньому пункті. Всі властивості CSS відображаються в правому вікні плагіна firebug і відповідаю за виділені фрагменти HTML - коду правого вікна. Як я вже сказав, CSS властивості необхідні для коректного відображення зовнішнього вигляду дизайну вашого ресурсу.
Щоб побачити своїми очима, як працює та чи інша властивість, запустіть firebug, підведіть курсор мишки до будь-якого з ділянок коду в правому вікні плагіна. Навпаки кожного рядка буде відображатися перекреслений червоний кружок. Якщо ви натиснете на нього, то гурток разом з прописаним стилем змінить колір на блідо сірий, а на самій сторінці ви тут же побачите зміна, за яке відповідає це ділянка коду.
Як видно з прикладу нижче, я відключив позиціонування основного меню блогу (вимкнув position: absolute;) і меню виїхало в верхню частину сторінки:
Для скасування дії, потрібно знову натиснути на вже блідо сірий перекреслений гурток. І як я вже говорив на самому початку, ви з легкістю можете змінити колір посилань, розташування будь-яких елементів і т.д.
Давайте наведу в приклад зміна кольору посилання, тому що дана дія з одного боку є дуже легким, але в той же час викликає питання у початківців веб майстрів. Припустимо, я хочу змінити колір посилання після кожного поста «Читати запис повністю >>» з синього на зелений. Як я поступлю в цьому випадку?
Я запущу Firebug в Firefox і знайду потрібний мені ділянку коду, ви вже знаєте, як це зробити. За синій колір посилання на моєму блозі відповідає рядок color: # 1821B5 (# 1821B5 - це код кольору). Мені потрібно змінити 1821B5 (синій колір) на 2d8324 (зелений колір). У підсумку я побачу потрібні мені зміни:
Якщо колір мене повністю влаштовує, то я переходжу в файл шаблону style.css і міняю значення старого кольору, на нове. Але як відшукати потрібну ділянку коду у файлі style.css, що відповідає саме за колір рядки «Читати запис повністю >>»?
Все дуже просто! Якщо ви уважно подивитеся на наведений вище скріншот, то побачите що плагін firebug дає нам підказку, яку я виділив червоним контуром. В даному прикладі він нам говорить, що потрібну ділянку коду знаходиться в файлі style.css (рядок 18).
Так само в редагуванні квітів вам допоможе одна чудова програма ColorMania, вона здатна в лічені секунди визначити будь-який колір на сторінці. Як їй користуватися я вже писав у статті про унікалізації шаблону (посилання привів вище).