Ein Blick in die wichtigsten Firefox-Tools für Webentwickler

Firefox ist seit langem der bevorzugte Browser für die Webentwicklung. Es gibt eine Reihe nützlicher Add-Ons, um die Arbeit zu erledigen. In diesem Beitrag werden wir uns ein paar Add-Ons ansehen, die meiner Meinung nach unbedingt installiert werden müssen, wenn Sie Web-Entwicklung betreiben. Außerdem werden wir einige der Funktionen in diesen Add-Ons aufdecken, die helfen können.

Zuerst müssen wir den Firebug installieren.

Feuerbock

Firebug ist ein Muss für die Webentwicklung. Angenommen, Sie wissen nicht, wo Firebug erhältlich ist, können Sie es hier installieren. Möglicherweise müssen Sie Ihren Firefox neu starten, bevor er aktiviert wird.

Danach können Sie den Firebug auf eine der folgenden Arten anzeigen: Folgen Sie diesem Menü Extras> Webentwickler> Firebug, Klicken Sie mit der rechten Maustaste auf die Webseite und wählen Sie “Element mit Firebug prüfen”.

Alternativ können Sie ein Firebug-Symbol in Firefox finden und darauf klicken. Daraufhin wird das Firebug-Fenster angezeigt.

Firebug ist ziemlich identisch mit Chrome-Entwicklerwerkzeuge. Es enthält ein Bedienfeld zum Anzeigen der HTML-Struktur und der Stile sowie ein Konsolenfenster zum Anzeigen der Fehler, Warnungen und Protokolle. Aber ich habe noch ein paar Tipps, die hoffentlich nützlich sein könnten.

Anpassen der Boxgröße

Das HTML-Element besteht aus einem CSS-Boxmodell, das aus Rand, Auffüllung und Objektdimension (Breite / Höhe) besteht. Es gibt Zeiten, in denen wir diese Eigenschaften möglicherweise ändern müssen. In diesem Fall können Sie eines der Elemente auswählen, das Sie ändern möchten, und dann zum Element wechseln Layout Panel.

In diesem Bereich finden Sie eine Abbildung eines CSS-Box-Modells mit seinen Informationen, einschließlich der Breite und Höhe. Obwohl diese beiden Eigenschaften in CSS nicht angegeben sind, Dieses Tool ist klug genug, um den Wert zu bestimmen. Wenn Sie sie ändern müssen, klicken Sie einfach auf den Wert und verwenden Sie die Aufwärts- oder Abwärtspfeiltaste, um den Wert zu erhöhen oder zu verringern.

Berechnete Stile

In vielen Situationen wundern Sie sich wahrscheinlich, warum bestimmte Stile nicht angewendet werden. Eine der einfacheren und schnelleren Möglichkeiten, insbesondere wenn Sie Tausende von Stilzeilen haben, besteht darin, sie aus der Berechneter Stil Panel. Dieses Beispiel zeigt, dass die Textfarbe des Ankertags mit überschrieben wird .Taste Klasse, während der Hintergrund der .Taste Klasse wird mit überschrieben .button.add.

Schriftfamilie überprüfen (der einfache Weg)

Sie finden wahrscheinlich häufig so etwas in Schriftfamilie Eigenschaft in CSS mit verschiedenen Schriftfamilien. Leider sagt uns das nicht genau, welche Schriftart der Browser verwendet. Um die Identifizierung zu erleichtern, können wir diese Firebug-Erweiterung nämlich installieren FireFontFamily.

Laden Sie nach Abschluss der Installation Ihre Webseite, und wir können deutlich sehen, welche Schriftfamilie angewendet wird. In unserem Fall ist es tatsächlich so Helvetica Neue (siehe Schuss).

Leistung analysieren

Dies kann Plattheit sein, aber Site Speed ist jetzt einer der Parameter von Google (Algorithmus), um die Qualität der Website zu bestimmen. Die Website, die schneller geladen wird, gilt als gut entwickelt und wird inhaltlich höher eingestuft. Geschwindigkeit sollte also nicht übersehen werden.

Net Panel

Der erste Ort, den Sie möglicherweise besuchen müssen, um die Leistung Ihrer Website zu überprüfen, ist der Netz Panel. Dieses Fenster zeichnet die HTTP-Anforderung Ihrer Website auf, wenn diese geladen wird. Dieser Screenshot zeigt eine Webseite, die geladen wird 42 Anfrage und nimmt herum 4,36 Sekunden Laden.

Sie können die HTTP-Anfrage dann nach ihrem Typ wie HTML, CSS und Images sortieren.

Yslow!

Darüber hinaus können Sie auch installieren YSlow, eine Erweiterung für Firebug von Yahoo !. Nach der Aktivierung finden Sie ein zusätzliches Panel mit dem Namen Yslow!.

Ähnlich zu Netz Panel, Yslow! nimmt die Leistung der Webseite auf, wenn sie geladen wird, aber sie sagt Ihnen auch, warum die Webseite langsam ist und was wir tun können, um sie zu lösen. In diesem Beispiel führen wir einen Test für eine Webseite durch, und diese wird bewertet 86 für die Gesamtleistung, was als ok angesehen wird.

Seitengeschwindigkeit

Alternativ können Sie Page Speed auch von Google installieren. Ähnlich zu Yslow!, Es testet die Geschwindigkeit der Website, auch wenn das Testergebnis leicht abweichen kann. Dieses Beispiel zeigt die gleiche Webseite erzielte 82 nach Page Speed.

Webentwickler-Tools

Web Developers Tools ist offensichtlich für Webentwickler und enthält eine Reihe von Funktionen in dieser Symbolleiste. Aber dieser hier ist einer meiner Favoriten.

Bildprüfung

Es kann vorkommen, dass wir Bildinformationen von der Webseite erhalten müssen. Ich sehe häufig, dass die Leute dies tun, indem sie über den Browser stolpern oder mit der rechten Maustaste auf das Bild klicken und auswählen Bildinformationen anzeigen, wie so:

Dieser Weg ist jedoch nicht sehr effizient, wenn die Informationen aus vielen Bildern abgerufen werden müssen. In diesem Fall können wir das nutzen Bilder Feature aus dem Add-On. Diese Funktion ist leicht über das Menü Bild in der Symbolleiste zugänglich.

Dieses Beispiel zeigt, wie wir die Bildgröße und Bilddateigröße gleichzeitig anzeigen:

Integrierte Firefox-Tools

In den letzten Versionen hat Firefox seine integrierten Funktionen für Webentwickler enorm verbessert. Einige davon sind:

Native Inspect Element

Dieser gebürtige Element prüfen von Firefox kann ähnlich aussehen “Untersuchen Sie Element in Firebug”, aber es wirkt tatsächlich auf verschiedene Weise.

Dieses Mal werde ich dieses Feature nicht weiter ausführen, da es im Wesentlichen mit dem Firebug-HTML- und CSS-Bedienfeld identisch ist, allerdings mit einem Unterschied in Layout und Design. Aber es gibt eine Besonderheit, die es auszuprobieren lohnt 3D-Ansicht.

Verwenden 3D-Ansicht Sie können die Webseitenstruktur detailliert anzeigen. Um diese Ansicht zu aktivieren, finden Sie die Schaltfläche unten rechts im “Firefox Native Inspect Element”. So ist das 3D-Ansicht sieht aus wie.

Ich benutze es zwar nicht so oft wie andere Funktionen, aber ich gebe es zu, es ist ein sehr innovatives Feature von Mozilla, und in bestimmten Situationen sicherlich sehr nützlich.

Webdesign-Ansicht

Seit der zunehmenden Beliebtheit von Responsive Web Design hat Firefox ein Responsive Bookmarklet für den Browser initiiert. Mit diesem Tool können wir unsere responsive Website in verschiedenen Ansichtsfenstern testen, ohne das Browserfenster anzupassen.

Diese Ansicht ist in diesem Menü verfügbar: Extras> Web Developer> Webdesign-Ansicht. Und so sieht die Aussicht aus.

Stileditor

Wenn Sie häufig mit CSS arbeiten, werden Sie sich wahrscheinlich in diese Funktion verlieben. Seit der Version 11 hatte Firefox hinzugefügt Stileditor in seinen nativen Entwicklerwerkzeugen.

Diese Funktion ist so cool wie die Webdesign-Ansicht, Sie können das CSS bearbeiten, die Auswirkungen sofort im Browser sehen und die Änderungen speichern, die sich direkt auf die CSS-Quelldatei auswirken.

Der Stil-Editor ist im folgenden Menü verfügbar: Extras> Web Developer> Stileditor.

Letzter Gedanke

Diese Firefox-Add-Ons enthalten eine Reihe von Funktionen. Die hier besprochenen Funktionen sind nur einige der Funktionen, die ich während der Webentwicklung häufig benutze. Dennoch haben Sie möglicherweise einige andere Tipps, die zur Steigerung der Webentwicklungsproduktivität in Firefox hilfreich sein können.

Welche Funktionen nutzen Sie häufig? Sie können Ihre Gedanken in das Kommentarfeld unten teilen.