Inhaltsverzeichnis
Feuerwanze ist ein Firefox-Plugin oder eine Erweiterung, die erstellt wurde, um Code zu testen und Optimierungen beim Programmieren einer Website durchzuführen. Es handelt sich um eine Reihe von Tools, mit denen Sie die Ladegeschwindigkeit der verschiedenen Elemente, aus denen das Web besteht, und die Struktur des Webs analysieren können. bearbeiten, Fehler finden, den Quellcode debuggen und sehen, wie der Code funktioniert CSS, HTML oder JavaScriptWir können auch jeden Aspekt bearbeiten oder ändern und er wird sofort in der Vorschau angezeigt.
Feuerwanze Es ist ein unverzichtbares Werkzeug für diejenigen, die Websites programmieren oder optimieren, egal ob sie Designer oder Webmaster sind. So können wir Programmier- oder Designfehler eliminieren, wissen, wie sie funktionieren und wie die Struktur einer Webseite ist, wie alle Elemente, aus denen sie besteht.
Wir installieren das Firebug-Plugin
Um das Plugin zu installieren, gehen wir auf die Firebug-Download-Website und suchen dort nach der neuesten Version des Tools zum Download.
Registerkarte Konsole
Konsole Feuerwanze Hier werden die Meldungen über die Aktivitäten des Webs und die aufgetretenen Fehler angezeigt. Wir können Nachrichten über die Aufrufe von Funktionen oder Seiten sehen, die das Web während unserer Interaktion durchführt, die uns Funktionen, Aufrufe von Callbacks oder Webservices und die Werte anzeigen, die zur Laufzeit ausgetauscht werden, während der Fluss der Anwendung gesteuert wird.
Sehen wir uns einige Beispiele an, wir greifen auf das Web motores.com.ar zu, wir klicken mit der rechten Maustaste und aktivieren Feuerwanze.
Wir können auch sehen, wie beim Hinzufügen eines Produkts zum Warenkorb die folgenden Parameter gesendet werden: Funktion, Produktmenge und Produkt-ID.
Ajax-Funktion aufgerufen insertItem cant 1 Id 5850326Wir sehen zwar, dass es nur hinzugefügt wird, wenn wir als Benutzer eingeloggt sind, andernfalls werden wir zur Registrierung aufgefordert.
So können wir sehen, wie die Anwendung funktioniert und welche Parameter sie sendet oder empfängt und welche Antworten sie liefert und wie lange die Antwortzeit war, zum Beispiel um ein Produkt hinzuzufügen, das 335 Millisekunden dauerte.
HTML-Tab
ermöglicht es Ihnen, die Struktur des Webs zu sehen und den Webseitencode in Echtzeit zu bearbeiten. Wir können zum Beispiel den Code ändern HTML der Website oder des CSS-Codes und zeigen Sie ihn direkt an, ohne dass diese Änderungen dauerhaft sind. Wenn wir beispielsweise auf die Ebay-Website zugreifen, können wir Firebug verwenden, um die Farbe des Haupt- oder Webinhaltsblocks zu ändern.
Hintergrund: rot keine wiederholen scrollen 0 0;Wenn Sie mit dem Schreiben fertig sind, wird der zentrale Block rot. Wenn wir die Seite aktualisieren, gehen die Änderungen verloren und sie kehrt zu ihrem ursprünglichen Design zurück.
Wir können auch versuchen, den HTML-Code und den CSS-Code zu manipulieren, um das Ebay-Logo für das Google-Logo zu ändern. Dies geschieht durch Ändern der URL des Ebay-Logobilds durch eine andere URL eines gewünschten Bildes.
Diese Funktionalität funktioniert nicht, um ein komplettes Design zu ändern, sondern um kleine Tests durchzuführen und Änderungen zu visualisieren, ohne auf einen Editor zugreifen zu müssen.
CSS-Tab
Die Panel-Registerkarte CSS Es zeigt alle CSS-Klassen und -Bezeichner, die wir erstellen oder die das von uns analysierte Web hat. Von diesem Panel aus können wir unsere Klassen und CSS-Sätze ändern, wie wir es zuvor auf der Registerkarte Styles des HTML-Panels getan haben.
Registerkarte Skript
Dieses Panel dient zum Debuggen von Code JavaScript oder jQuery. Es zeigt uns alles, was ein Skript macht, seine Variablen, seine Funktionen, das Debuggen durch Breakpoints, die schrittweise Ausführung eines Skripts, einen Bildschirm zur Steuerung des Variablenstapels und wir können auch das Verhalten der Funktionen sehen.
Registerkarte DOM
Das Panel SONNE oder DokumentobjektmodusEr ist derjenige, der Informationen über all die verschiedenen DOM-Eigenschaften und deren Methoden erhält. Das DOM ist Teil der Elemente eines Webs und ermöglicht Programmierern den Zugriff auf und die Manipulation von XHTML-Webseiten.
JQuery bietet Methoden zur effizienten Manipulation des DOM. Wir können auf jedes Attribut eines beliebigen Elements zugreifen oder den HTML-Code aus einem Absatz oder Block extrahieren. Darüber hinaus bietet es Methoden wie .attr(), .HTML(), Ja .val() Sie fungieren als Getter und Abrufen von Informationen aus DOM-Elementen zur späteren Verwendung.
Sehen wir uns in diesem jQuery- und DOM-Beispiel an, wie Sie ein Div steuern und einen Text extrahieren:
Jquery und DOMText aus Block extrahieren:
Dies ist ein DOM-Testtext
Die Tags HTML Der Zugriff auf das Element erfolgt über die CSS-Klasse oder -ID und dann über die Eigenschaft, die text oder eine andere sein kann, die jQuery und DOM zulässt.
Registerkarte "Netzwerk"
Der Zweck des Netzwerk-Panels besteht darin, den Webverkehr sowie die Auslastung und den Verbrauch jeder HTTP-Webanfrage zu überwachen.
Das Netzwerk-Panel-Fenster zeigt eine Liste von Anfragen an, während das Web geladen und verwendet wird. Jedes Element in der Liste zeigt Informationen, die von der Anfrage erzeugt werden, und eine grafische Zeitleiste zeigt die verbrauchten Bytes, die Reaktionszeit, die die Ladephasen im Zeitverlauf darstellt. Im Folgenden finden Sie eine Liste der Informationen, die für jede Anfrage angezeigt werden:
- HTTP-Anfragemethode
- HTTP-Antwortcode und -beschreibung (200.301.404 usw.)
- Dateiname, der aufgerufen wird
- Domainname, von dem die Antwort stammt
- Antwortgröße in Byte
- Antwortzeit in Millisekunden.
