Инструмент за уеб разработчици на Firebug

Това е пакет от помощни програми, с които можете да анализирате и тествате скоростта на зареждане според всеки компонент, файл, можем също така да редактираме, наблюдаваме и отстраняваме грешки в изходния код, CSS, HTML и Javascript на уеб страница незабавно и в реално време да наблюдаваме промяната в мрежата. Той също така служи за анализ на поведението на променлива или url с параметри, като може да види какви параметри се изпращат и какво отговаря сървърът.
Някои от функциите, които носи Firebug:

• HTML редактиране в реално време.
• CSS редактиране в реално време.
• Javascript редактиране в реално време.
• CSS оформление.
• Отстраняване на грешки в JavaScript.
• Интегрирана търсачка.
• Мониторинг на мрежовата активност.
• DOM Explorer.
• Манипулатор на грешки в Javascript, CSS и XML

Ще започнем с изтеглянето и инсталирането на приставката Firebug:
[color = # 2f4f4f] Изтеглете Firebug [/ color]

От уебсайта на Mozilla addons ще ни бъде разрешен достъп и инсталиране на добавката
След като Firebug е инсталиран и Firefox рестартиран, можем бързо да получим достъп до Firebug, като щракнем с десния бутон върху екрана на мрежата, върху който искаме да работим, или от менюто с инструменти
Вземаме мрежата на примерите на обединените нации http://www.un.org/en/, правим десен лиценз на екрана и ще се отвори екран с Firebug.

Увеличете

В този случай в раздела мрежа виждаме теглото в kb и в каква последователност браузърът е изобразявал елементите и колко време е отнело показването на всеки елемент, интересно е да се отбележи, че от 6,61 секунди на страницата е необходимо render, две секунди съответстват на едно единствено изображение, което е езиковата лента, тогава бихме могли да мислим дали може да се оптимизира.
В раздела HTML и CSS можем да посочим блок от структурата и той ще ни покаже кода.

Увеличете

Тук например посочваме горния банер div, който съответства на id #topbanner във файла style.css. Ако щракнем върху css кода, можем да го променим и това ще бъде отразено временно в мрежата. Разделът на конзолата е този, който ще ни позволи да виждаме и наблюдаваме извикванията и грешките в javascript в случай на повреда. В случай на грешка, той ще покаже файловете и номера на кодовия ред, където възниква грешката.

Увеличете

Firebug ни помага да намираме DOM обекти бързо и след това да ги редактираме в движение. Позволява извършване на DOM проверка.
The Обект модел на документ или DOM („Обектен модел на документ“ или „Обектен модел за представяне на документи“) по същество това е интерфейс за програмиране на приложения, който предоставя стандартен набор от обекти за изобразяване на HTML и XML документи.