Wenn es richtig konfiguriert ist, kann Firefox zum ultimativen Web-Entwicklungstool werden, mit dem Sie direkten Zugriff auf die Seite haben, an der Sie gerade arbeiten. So können Sie Ihre Seite in Echtzeit gestalten, Javascript debuggen oder sogar die HTML-Datei bearbeiten.

Erstellen Sie ein separates Profil für die Webentwicklung

Durch die Installation all dieser Entwicklungstools wird Firefox zu einem sehr umfangreichen Browser. Daher müssen wir zunächst 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 detailliertere Erklärung, wie das geht.

firefox.exe -P WebDev -no-remote

Nachdem Sie Firefox mit einem separaten Profil nur für die Webentwicklung konfiguriert haben, werfen wir einen Blick auf die Erweiterungen, mit denen Firefox zum ultimativen Webentwicklungstool werden kann.

Must-Have Web Dev Erweiterungen

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

Feuerfieber

Firebug ist die leistungsfähigste Erweiterung zum Debuggen von Javascript, zum Anzeigen von CSS und HTML. Sie können dynamische Änderungen an Code und CSS vornehmen und damit den Ajax-Code debuggen. Es ist wirklich die beste Erweiterung da draußen.

Web Developer Extension

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.

Aardvark-Erweiterung

Diese Erweiterung ist eine sehr leichte Erweiterung, mit der Sie leicht die Elemente auf der Seite und ihre zugewiesene Klasse / ID anzeigen können. Es ist einfacher als die Webentwicklererweiterung zu verwenden, wenn Sie nur die Quick-Info für ein Element benötigen. Sie können es auch verwenden, um Elemente von der Seite zu entfernen.

Colorzilla

Farben einfach auswählen. Kein Problem mehr, Farben irgendwo in einem Stylesheet zu finden.

Quelle anzeigen mit

Sie können mehrere Ansichtsprofile einrichten, um die Quelle in verschiedenen Anwendungen zu öffnen.

HTML-Validator

Mit dieser Erweiterung können Sie den HTML-Code Ihrer Seite einfach überprüfen und im Fenster "Quelltext anzeigen" installieren.

Fettaffe

Es ist nicht gerade eine Webentwicklererweiterung, aber Greasemonkey ist großartig, nicht zuletzt wegen der Möglichkeit, häufig durchgeführte Aktionen zu automatisieren, was für Webentwickler eine große Zeitersparnis bedeutet.

Messe Es

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

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

Mit diesen Erweiterungen können Sie die aktuelle Seite problemlos in verschiedenen Browsern anzeigen. IE Tab erlaubt Ihnen sogar, IE innerhalb einer Registerkarte auszuführen, wenn Sie dazu neigten.

Cache-Schaltfläche löschen

Löscht den Cache. Besonders nützlich zum Überprüfen neuer CSS-Änderungen.

Starten Sie Firefox neu

Die Erweiterung Firefox neu starten ist sehr nützlich, um Firefox mit allen Tabs und Sitzungen zu beenden und neu zu starten.

Tab Mix Plus

Die Erweiterung "Tab Mix Plus" ist im Allgemeinen eine großartige Erweiterung, bietet jedoch einige grundlegende nützliche Funktionen für Webentwickler: "Duplicate Tab" und "Copy Tab".

YSlow

Die YSlow-Erweiterung ist eine neue Erweiterung von Yahoo, die Ihre Seite analysiert und Ihnen zeigt, wo Sie Fehler machen. Sie erhalten sogar eine Note für die Leistung Ihrer Website. Sie werden das kleine Messgerät in der unteren rechten Ecke bemerken… es zeigt Ihnen die Gesamtgröße Ihrer Seite sowie die Ladezeit an. Sehr nützliche Erweiterung, aber die Firebug-Erweiterung ist erforderlich.

Dummy Lorem Ipsum

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

Screengrab!

Mit der Screengrab-Erweiterung können Sie Screenshots von Seiten erstellen, jedoch mit etwas, das ein normales Screenshot-Tool nicht kann. Es kann ein Bild der gesamten Seite erstellt werden, nicht nur der sichtbare Teil.

 

Es gibt unzählige andere Erweiterungen, die Sie verwenden können, aber diese sind die Besten der Besten, die ich bisher gesehen habe. Wenn Sie eine andere Erweiterung verwenden, die Sie regelmäßig verwenden, geben Sie in den Kommentaren eine Erwähnung an.

Zu diesem Zeitpunkt haben Sie Firefox jetzt zum ultimativen Webentwicklungstool gemacht. Nehmen Sie sich die Zeit, um zu lernen, wie Firebug speziell verwendet wird.

Top-Tipps:
Kommentare: