Narzędzie programistyczne Firebug

Jest to pakiet narzędzi, dzięki którym możesz analizować i testować szybkość ładowania w zależności od każdego komponentu, pliku, możemy również edytować, monitorować i debugować kod źródłowy, CSS, HTML i Javascript strony internetowej natychmiast i w czasie rzeczywistym obserwować zmiany w sieci. Służy również do analizy zachowania zmiennej lub adresu URL z parametrami, będąc w stanie zobaczyć, jakie parametry są wysyłane i na co odpowiada serwer.
Niektóre z jego funkcji Firebug:

• Edycja HTML w czasie rzeczywistym.
• Edycja CSS w czasie rzeczywistym.
• Edycja JavaScript w czasie rzeczywistym.
• Układ CSS.
• Debuger JavaScript.
• Zintegrowana wyszukiwarka.
• Monitorowanie aktywności sieciowej.
• Eksplorator DOM.
• Obsługa błędów w JavaScript, CSS i XML

Zaczniemy od pobrania i zainstalowania wtyczki Firebug:
[kolor = # 2f4f4f] Pobierz Firebuga [/ kolor]

Ze strony dodatków Mozilli będziemy mogli uzyskać dostęp i zainstalować dodatek
Po zainstalowaniu Firebuga i ponownym uruchomieniu Firefoksa możemy szybko uzyskać dostęp do Firebuga, klikając prawym przyciskiem myszy ekran sieci, nad którą chcemy pracować, lub z menu narzędzi
Bierzemy sieć przykładu United Nations http://www.un.org/en/, tworzymy odpowiedni lic na ekranie i otworzy się ekran z Firebugiem.

POWIĘKSZAĆ

W tym przypadku na karcie sieci widzimy wagę w kb oraz w jakiej kolejności przeglądarka wyrenderowała elementy i ile czasu zajęło wyświetlenie każdego elementu, warto zauważyć, że z 6,61 sekundy zajmuje strona render, dwie sekundy odpowiadają jednemu obrazowi, który jest paskiem języka, wtedy moglibyśmy pomyśleć, czy można go zoptymalizować.
W zakładce HTML i CSS możemy wskazać blok struktury, który pokaże nam kod.

POWIĘKSZAĆ

Tutaj na przykład wskazujemy górny baner div, który odpowiada identyfikatorowi #topbanner w pliku style.css. Jeśli klikniemy na kod css, możemy go zmodyfikować i zostanie to tymczasowo odzwierciedlone w sieci. Zakładka konsoli to ta, która pozwoli nam zobaczyć i monitorować wywołania javascript i błędy w przypadku awarii. W przypadku błędu pokaże pliki i numer linii kodu, w której wystąpił błąd.

POWIĘKSZAĆ

Firebug pomaga nam szybko znajdować obiekty DOM, a następnie edytować je w locie. Umożliwia wykonanie inspekcji DOM.
ten Obiektowy model dokumentu lub DOM („Model obiektowy dokumentu” lub „Model obiektowy do reprezentacji dokumentu”) jest to zasadniczo interfejs programowania aplikacji, który zapewnia standardowy zestaw obiektów do renderowania dokumentów HTML i XML.