Firebug для firefox

Зручно, коли змінювати оформлення сайту і знаходити помилки в його роботі можна прямо в браузері в процесі роботи з сайтом. Для цього у різних браузерів передбачений свій функціонал. Наприклад, Засоби розробника в Internet Explorer або Dragonfly в Opera. У браузера Mozilla Firefox для цих цілей є ціле меню «Веб-розробка» і чудове розширення Firebug. яке зробить життя будь-якого веб-майстри трохи легше. Про можливості Firebug ми і розповімо в сьогоднішній статті, дізнаємося як користуватися цим полезнейшим розширенням.

Після перезапуску браузера в правому нижньому кутку Firefox з'явиться іконка симпатичного жучка. Клацніть по ній, щоб відкрити вікно Firebug.

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

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

Якщо помилка на сайті пов'язана з розміткою сторінки, то клікнувши по ній в консолі, ви потрапите на панель HTML. Тут відображається код сторінки, завантаженої в даний момент в браузер. Панель дозволяє не тільки переглядати, але і редагувати HTML-код сторінки. Для цього двічі клацніть по потрібному параметру або клікніть правою кнопкою миші по виділеному коду і в контекстному меню виберіть команду «Редагувати HTML».

Для виявлення помилок в HTML-коді сайту зручно використовувати інструмент «Перевіряти». Натисніть кнопку зі стрілкою і підведіть курсор миші до проблемного місця сторінки.

Ви побачите код підсвіченого на сторінці елемента, а трохи правіше - стилі CSS, що застосовуються до даного елементу.

Як і код, стилі можна правити в реальному часі, клікаючи по атрибутам і їх властивостями. Зміни негайно будуть відображатися на веб-сторінці і діяти до її поновлення в браузері.

Повна інформація про стилях на веб-сторінці представлена ​​на панелі CSS. Тут перераховані всі файли стилів, що завантажуються разом зі сторінкою. Ви можете вибрати зі списку потрібний файл стилів для редагування.

Експериментувати зі стилями можна в реальному часі, змінюючи атрибути CSS і їх значення. Для цього достатньо клікнути по потрібного атрибуту або його параметру.

Редагування CSS відбувається в двох режимах:

Виправлення коду - правка вихідного коду CSS в тому вигляді, в якому він завантажений браузером;

Жива правка - правка вихідного коду CSS в тому вигляді, в якому він витягнутий з браузера.

Другий режим доцільно використовувати, якщо CSS формується «на льоту», наприклад в результаті виконання сценаріїв.

DOM - Document Object Model або Об'єктна Модель Документа. Дана панель містить ієрархію об'єктів на відкритій в браузері веб-сторінці. Як ви, ймовірно, знаєте найголовніший об'єкт в цій системі - об'єкт window (вікно). Далі об'єкти розташовуються в міру вкладеності - ієрархії. При необхідності можна переглядати властивості того чи іншого об'єкта, і навіть змінювати їх при натисканні миші, негайно бачачи результати внесених змін на екрані.

При наведенні миші на індикатор ви побачите точну розкладку за кількістю витраченого на завантаження часу.

Панель Мережа особливо корисна при вирішенні проблем повільного завантаження веб-сторінок. У більшості випадків достатньо стиснути зображення і оптимізувати завантаження сценаріїв, щоб порадувати користувача швидкістю роботи вашого сайту.

Як бачите, розширення Firebug для браузера Mozilla Firefox надає вебмайстру зручні і функціональні інструменти не тільки для вирішення проблем, але і проведення експериментів з веб-сторінками в реальному часі. Наприклад, зміни стилів CSS і HTML-коду сайту. Ми дізналися як користуватися Firebug для Moziila Firefox. Чекаємо питання на форумі.

Спеціально для Сайтогон, Олена Карлтон