Erstellen Sie das ultimative Firefox-Webentwicklungsprofil

Bei richtiger Konfiguration kann Firefox zum ultimativen Webentwicklungstool werden, das Ihnen direkten Zugriff auf die Seite gibt, an der Sie arbeiten, damit Sie Ihre Seite in Echtzeit gestalten, Javascript debuggen oder sogar den HTML-Code bearbeiten können.

Separates Profil für die Webentwicklung erstellen

Die Installation all dieser Entwicklungstools macht Firefox zu einem sehr schweren Browser, daher sollten wir zuerst ein neues Profil für Firefox erstellen.

Sie können ein separates Profil gleichzeitig mit Ihrem regulären Profil starten, indem Sie eine neue Verknüpfung mit diesen Argumenten erstellen und WebDev durch den Namen Ihres Profils ersetzen. Es gibt auch eine genauere Erklärung, wie das geht.

firefox.exe -P WebDev -no-remote

Nachdem Sie Firefox nun mit einem separaten Profil nur für die Webentwicklung konfiguriert haben, werfen wir einen Blick auf die Erweiterungen, mit denen wir Firefox zum ultimativen Webentwicklungstool machen können.

Unverzichtbare Webentwicklungserweiterungen

Dies sind alles Erweiterungen, die ich regelmäßig für die Webentwicklung verwende.

Feuerwanze

Firebug ist die leistungsstärkste Erweiterung zum Debuggen von Javascript, zum Anzeigen von CSS und HTML. Sie können den Code und CSS dynamisch ändern und damit Ihren Ajax-Code debuggen. Es ist wirklich die beste Erweiterung, die es gibt.

Webentwickler-Erweiterung

Eine der besten Erweiterungen für x Jahre in Folge. Dies ist ein Muss für jeden Entwickler, aber Sie haben bereits davon gehört.

Erdferkel-Erweiterung

Diese Erweiterung ist eine sehr einfache Erweiterung, die Ihnen die Elemente auf der Seite und ihre zugewiesene Klasse/ID leicht anzeigt. Es ist einfacher zu verwenden als die Webentwickler-Erweiterung, wenn Sie nur die schnellen Informationen für ein Element benötigen. Sie können damit auch Elemente von der Seite entfernen.

Colorzilla

Wählen Sie Farben einfach aus. Kein lästiges Suchen von Farben mehr, die irgendwo in einem Stylesheet eingebettet sind.

Quelle anzeigen mit

Sie können mehrere Quellprofile für die Ansicht einrichten, um die Quelle in verschiedenen Anwendungen zu öffnen.

HTML-Validator

Mit dieser Erweiterung können Sie ganz einfach den HTML-Code Ihrer Seite validieren und im Bereich «Quellcode anzeigen» installieren.

Fettaffe

Es ist nicht gerade eine Webentwickler-Erweiterung, aber Greasemonkey ist großartig, nicht zuletzt wegen der Fähigkeit, häufig ausgeführte Aktionen zu automatisieren, was für Webentwickler eine große Zeitersparnis ist.

Messe Es

Messen Sie mit dieser Erweiterung ganz einfach eine Entfernung auf dem Bildschirm. Nachdem Sie einen Bereich gemessen haben, können Sie das Rechteck um den Bildschirm ziehen, um es als Vergleich zu verwenden.

IE-Ansicht / IE-Registerkarte / OperaView / FirefoxView / Safari-Ansicht / IE View Lite

Mit diesen Erweiterungen (wählen Sie) können Sie die aktuelle Seite ganz einfach in verschiedenen Browsern anzeigen. Mit IE Tab können Sie sogar den IE innerhalb einer Registerkarte ausführen, wenn Sie dies wünschen.

Schaltfläche „Cache löschen“

Löscht den Cache. Besonders nützlich, um neue CSS-Änderungen zu überprüfen.

Firefox neu starten

Die Erweiterung Firefox neu starten ist sehr nützlich, um Firefox zu schließen und neu zu starten, wobei alle Registerkarten und Sitzungen intakt sind.

Tab Mix Plus

Die Tab Mix Plus-Erweiterung ist im Allgemeinen eine großartige Erweiterung, bietet jedoch einige im Wesentlichen nützliche Funktionen für Webentwickler: Tab duplizieren und URL für Tabs kopieren.

YLangsam

Die YSlow-Erweiterung ist eine neue Erweiterung von Yahoo, die Ihre Seite analysiert und Ihnen sagt, wo Sie Fehler machen. Es gibt Ihnen sogar eine Note für die Leistung Ihrer Website. Sie werden die kleine Anzeige in der unteren rechten Ecke bemerken… sie zeigt Ihnen die Gesamtgröße Ihrer Seite sowie die Ladezeit an. Sehr nützliche Erweiterung, erfordert jedoch die Firebug-Erweiterung.

Dummy Lorem Ipsum

Die Dummy Lipsum Generator-Erweiterung generiert für Sie Dummy-Inhalte basierend auf dem berühmten Lorem Ipsum-Text, der sehr nützlich ist, um gefälschte Inhalte auf Ihrer Website zu platzieren.

Bildschirmfoto!

Mit der Screengrab-Erweiterung können Sie Screenshots von Seiten erstellen, kann jedoch etwas tun, das ein normales Screenshot-Tool nicht kann – es kann ein Bild der gesamten Seite aufnehmen, nicht nur des sichtbaren Teils.

Es gibt unzählige andere Erweiterungen, die Sie verwenden können, aber diese sind die besten der besten von allem, was ich gesehen habe. Wenn Sie eine andere Erweiterung haben, die Sie regelmäßig verwenden, hinterlassen Sie eine Erwähnung in den Kommentaren.

An diesem Punkt haben Sie Firefox jetzt zum ultimativen Webentwicklungstool gemacht. Nehmen Sie sich die Zeit, um speziell die Verwendung von Firebug zu erlernen.