Firebug-Webentwickler-Tool

Es ist ein Paket von Dienstprogrammen, mit dem Sie die Ladegeschwindigkeit für jede Komponente und Datei analysieren und testen können. Wir können auch den Quellcode, CSS, HTML und Javascript einer Webseite sofort und in Echtzeit bearbeiten, überwachen und debuggen im Internet. Es dient auch dazu, das Verhalten einer Variablen oder URL mit Parametern zu analysieren, um zu sehen, welche Parameter gesendet werden und was der Server antwortet.
Einige der Funktionen, die es mit sich bringt Feuerwanze:

• HTML-Bearbeitung in Echtzeit.
• CSS-Echtzeitbearbeitung.
• JavaScript-Echtzeitbearbeitung.
• CSS-Layout.
• Javascript-Debugger.
• Integrierte Suchmaschine.
• Überwachung der Netzwerkaktivität.
• DOM-Explorer.
• Fehlerbehandlung in Javascript, CSS und XML

Wir beginnen mit dem Herunterladen und Installieren des Plugins Feuerwanze:
[color = # 2f4f4f] Firebug herunterladen [/color]

Von der Mozilla-Add-On-Website aus können wir auf das Add-On zugreifen und es installieren
Sobald Firebug installiert und Firefox neu gestartet wurde, können wir schnell auf Firebug zugreifen, indem wir mit der rechten Maustaste auf den Bildschirm des Webs klicken, an dem wir arbeiten möchten, oder über das Tools-Menü
Wir nehmen das Web des Beispiels United Nations http://www.un.org/en/, machen eine rechte Lic auf dem Bildschirm und ein Bildschirm mit Firebug öffnet sich.

VERGRÖSSERN

In diesem Fall sehen wir im Netzwerk-Tab die Gewichtung in KB und in welcher Reihenfolge der Browser die Elemente gerendert hat und wie lange es dauerte, bis jedes Element angezeigt wurde. Interessant ist, dass von den 6,61 Sekunden die Seite benötigt wird rendern, zwei Sekunden entsprechen einem einzelnen Bild, also der Sprachleiste, dann könnten wir uns überlegen, ob es noch optimiert werden kann.
Auf der Registerkarte HTML und CSS können wir auf einen Block der Struktur zeigen und uns den Code anzeigen.

VERGRÖSSERN

Hier zeigen wir beispielsweise auf das oberste Banner-Div, das der ID #topbanner in der Datei style.css entspricht. Wenn wir auf den CSS-Code klicken, können wir ihn ändern und dies wird vorübergehend im Web angezeigt. Der Konsolen-Tab ist derjenige, der es uns ermöglicht, Javascript-Aufrufe und -Fehler im Fehlerfall zu sehen und zu überwachen. Im Fehlerfall werden die Dateien und die Nummer der Codezeile angezeigt, in der der Fehler auftritt.

VERGRÖSSERN

Feuerwanze hilft uns, DOM-Objekte schnell zu finden und sie dann im Handumdrehen zu bearbeiten. Ermöglicht die Durchführung einer DOM-Inspektion.
Das Document Object Model oder DOM ('Dokumentobjektmodell' oder 'Objektmodell zur Dokumentendarstellung') Es handelt sich im Wesentlichen um eine Anwendungsprogrammierschnittstelle, die einen Standardsatz von Objekten zum Rendern von HTML- und XML-Dokumenten bereitstellt.