So optimieren Sie eine Website mit dem Firebug-Plugin

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 ist eine hervorragende Ergänzung zu einem anderen Plugin wie Web-Entwickler. Die Benutzeroberfläche ist einfach zu bedienen und wird nur aktiviert, wenn wir sie brauchen, und sie ist auch kostenlos. Der Zweck dieses Tutorials ist es, eine detaillierte und professionelle Verwendung von Feuerwanze, können wir auch andere Tutorials Firebug Web Developer Tool und Inspect HTML with Firebug sehen.
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.

Nach der Installation starten wir den Computer neu und sehen, dass er beim Starten eines Webs hinzugefügt wird. Um ihn zu aktivieren, klicken wir mit der rechten Maustaste und suchen nach der Option Element prüfen:

Nachdem wir das Tool aktiviert haben, sehen wir uns die wichtigsten Funktionalitäten an:

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.

Auf der Registerkarte Konsole bei einer Brands-Suche sehen wir, dass die Konsole anzeigt, dass eine Funktion in Ajax aufgerufen wird, die eine Datenbank mit PHP abfragt und die Modelle im JSON-Format zurückgibt und sie der Modellkombination hinzufügt Parameter gesendet, der von get oder post zurückgegebene Header und die Antwort. Schauen wir uns einen anderen Fall eines Online-Shops an.

In diesem Fall sehen wir, dass die Konsole anzeigt, dass drei Schriftarten oder Schriftarten im Ordner / css / font fehlen, vielleicht hat der Designer vergessen, sie hinzuzufügen oder die Schriftarten zu ändern, und die vorherigen Verweise nicht entfernt.
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 5850326

Wir 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.

Dazu suchen wir auf der Registerkarte HTML nach der Zeile HTML-Code, die wie folgt aussieht:

Im rechten Panel Stil Es zeigt uns den CSS-Stil dieses Elements, wir doppelklicken auf die Zeile nach dem Satz Breite: 980px und wir schreiben folgendes:

 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.

Wir suchen die Codezeile im HTML und ändern den Link src = ”urlimagen””, Dann passen wir die Größen an

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 DOM
Text 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.

Wir können auch filtern, um Teile nur als Bilder oder nur als js- oder css-Dateien zu sehen, und so bestimmen, was mehr wiegt und wie wir es optimieren können.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben