Spisie treści
Firebug to wtyczka lub rozszerzenie przeglądarki Firefox stworzone, aby móc testować kod i przeprowadzać optymalizacje podczas programowania strony internetowej. Jest to zestaw narzędzi, za pomocą których można analizować szybkość ładowania różnych elementów tworzących sieć, strukturę sieci. edytuj, znajduj błędy, debuguj kod źródłowy i zobacz, jak działa kod CSS, HTML lub JavaScriptMożemy również edytować lub modyfikować dowolny aspekt, a podgląd zostanie natychmiast wyświetlony.
Firebug Jest to niezbędne narzędzie dla tych, którzy programują lub optymalizują strony internetowe, niezależnie od tego, czy są projektantami, czy webmasterami. Dzięki temu możemy wyeliminować błędy programistyczne lub projektowe, wiedzieć, jak działają i jak wygląda struktura strony internetowej, jak wszystkie elementy ją tworzące.
Instalujemy wtyczkę Firebug
Aby zainstalować wtyczkę, wchodzimy na stronę pobierania firebuga i tam szukamy najnowszej wersji narzędzia do pobrania.
Zakładka Konsola
Konsola Firebug To tam będą wyświetlane komunikaty o tym, co robi sieć i jakie błędy się pojawiają. Możemy zobaczyć komunikaty o wywołaniach funkcji lub stron, które tworzy sieć podczas interakcji, pokazując nam funkcje, wywołania wywołań zwrotnych lub usług internetowych oraz wartości, które są wymieniane w czasie wykonywania podczas kontrolowania przepływu aplikacji.
Zobaczmy kilka przykładów, wchodzimy na stronę motores.com.ar, klikamy prawym przyciskiem myszy i aktywujemy Firebug.
Możemy też zobaczyć, jak dodając produkt do koszyka, wysyła następujące parametry: funkcja, ilość produktu, id produktu.
Wywołano funkcję Ajax insertItem cant 1 Id 5850326Chociaż widzimy, że zostanie dodany tylko wtedy, gdy jesteśmy zalogowani jako użytkownicy, w przeciwnym razie poprosi o rejestrację.
Możemy więc zobaczyć, jak działa aplikacja i jaki parametr wysyła lub odbiera oraz jakie odpowiedzi udziela i jaki był czas odpowiedzi, np. aby dodać produkt, który zajęło 335 milisekund.
Karta HTML
pozwala zobaczyć strukturę sieci i edytować kod strony internetowej w czasie rzeczywistym. Możemy na przykład zmodyfikować kod HTML strony internetowej lub kodu css i przeglądać je bezpośrednio, bez trwałych zmian. Na przykład, jeśli uzyskujemy dostęp do witryny Ebay, możemy użyć programu Firebug do zmiany koloru bloku treści głównej lub internetowej.
tło: czerwony brak powtórz przewijanie 0 0;Po zakończeniu pisania środkowy blok zmieni kolor na czerwony, jeśli zaktualizujemy stronę, zmiany zostaną utracone i powróci do pierwotnego wyglądu.
Możemy również spróbować manipulować kodem html i kodem css, aby zmienić logo Ebay na Google, odbywa się to poprzez zmianę adresu URL obrazu logo Ebay na inny adres URL obrazu, który chcemy.
Ta funkcjonalność nie służy do zmiany całego projektu, ale do wykonywania małych testów i wizualizacji zmian bez konieczności dostępu do edytora.
Karta CSS
Zakładka panelu CSS Pokazuje wszystkie klasy i identyfikatory CSS, które tworzymy lub które ma sieć, którą analizujemy. Z tego panelu możemy modyfikować nasze klasy i zdania css, tak jak robiliśmy to wcześniej w zakładce Style panelu HTML.
Zakładka Skrypt
Ten panel służy do debugowania kodu JavaScript lub jQuery. Pokazuje nam wszystko, co robi skrypt, jego zmienne, funkcje, debugowanie według punktów przerwania, wykonywanie skryptu krok po kroku, ekran do kontrolowania stosu zmiennych, a także możemy zobaczyć zachowanie funkcji.
Karta DOM
Panel SŁOŃCE lub Tryb obiektu dokumentuTo on otrzymuje informacje o różnych właściwościach DOM i ich metodach. DOM jest częścią elementów sieci i pozwala programistom na dostęp i manipulowanie stronami XHTML.
JQuery udostępnia metody efektywnego manipulowania DOM. Możemy uzyskać dostęp do dowolnego atrybutu dowolnego elementu lub wyodrębnić kod HTML z akapitu lub bloku. Oprócz tego zapewnia metody takie jak .attr (), .HTML (), Tak .val () Działają one jako pobierające i pobierające informacje z elementów DOM do późniejszego wykorzystania.
Zobaczmy w tym przykładzie jQuery i DOM, jak kontrolować div i wyodrębnić tekst:
Jquery i DOMWyodrębnij tekst z bloku:
To jest tekst testowy DOM
Tagi HTML Dostęp do elementu uzyskuje się poprzez klasę css lub identyfikator, a następnie właściwość, która może być tekstem lub inną, która umożliwia jQuery i DOM.
Karta Sieć
Celem panelu Sieć jest monitorowanie ruchu internetowego oraz obciążenia i zużycia każdego żądania internetowego HTTP, raport ten składa się z listy wpisów, gdzie każdy z nich reprezentuje żądanie / odpowiedź w obie strony wykonane przez stronę.
Okno panelu sieci przedstawia listę żądań, gdy sieć jest ładowana i używana. Każda pozycja na liście zawiera informacje generowane przez żądanie, a graficzna oś czasu pokazuje zużyte bajty, czas potrzebny na odpowiedź, który reprezentuje fazy ładowania w czasie. Poniżej znajduje się lista informacji, które są wyświetlane dla każdego żądania:
- Metoda żądania HTTP
- Kod odpowiedzi HTTP i opis (200 301 404 itp.)
- Wywoływana nazwa pliku
- Nazwa domeny, z której pochodzi odpowiedź
- Rozmiar odpowiedzi w bajtach
- Czas odpowiedzi w milisekundach.
