manski's blog

Firefox WebDeveloper-Profil

Neben den Add-ons für den täglichen Bedarf bietet Firefox auch zahlreiche Add-ons, die speziell für Webentwickler nützlich sind, allen vorran: Firebug.

Neues Firefox-Profil anlegen

Da man aber meistens diese Add-ons nicht während normaler Surfsitzungen benötigt, empfiehlt es sich, extra für die Web-Entwicklung ein eigenes Firefox-Profil anzulegen.

Zunächst führt man folgenden Befehl aus (ohne “no-remote” müssen vorher alle Browser-Fenster geschlossen werden):

  • Windows: "c:\Programme\Mozilla Firefox\firefox.exe" -no-remote -P
  • Linux: firefox -no-remote -ProfileManager
  • MacOSX: /Applications/firefox.app/Contents/MacOS/firefox -no-remote -P

Firefox Profilmanager

Hiermit erstellt man ein neues Profil (im Folgenden nenne ich es “WebDev”) über “Profil erstellen” und beendet dann den Profilmanager.

Hinweis: Es empfiehlt sich, die Option “Beim Starten nicht nachfragen” aktiviert zu lassen und stattdessen eine Verknüpfung (o.ä. unter Nicht-Windows-Betriebssystemen) für das Profil zu erstellen.

Um Firefox jetzt mit dem neuen Profil zu starten, ruft man Firefox wie oben auf, nur dass man jetzt noch zusätzlich den Profilnamen spezifiziert. Unter Windows sähe der Aufruf dann z. B. so aus:

"c:\Programme\Mozilla Firefox\firefox.exe" -no-remote –P "WebDev"

Für weitere Informationen und Problemlösungshilfen, siehe hier.

Hinweis: Es empfiehlt sich evtl., das Icon für die Verknüpfung auszutauschen. Ich verwende hierfür dieses Iconset.

Web-Entwickler Add-ons

Im Folgenden findet sich eine Liste aller Firefox-Addons, die ich speziell in dem Web-Entwickler-Profil verwende.

  • Firebug: Schlechthin das Add-on für Web-Entwickler. Bietet u.a. die Möglichkeit, sich den momentan angezeigten DOM-Baum und für jeden Knoten dessen CSS anzusehen. Es gibt sogar noch Add-ons für Firebug (sog. Add-on Add-ons ).
    • Page Speed: Analysiert eine Seite und gibt Vorschläge, wie deren Geschwindigkeit verbessert werden kann. (Im Gegensatz zu YSlow funktionierte dieses Add-on bei mir auf anhieb. YSlow konnte ich nicht zum Laufen brignen.)
    • Firecookie: Zeigt die Cookies und deren Werte an, die zur momentan angezeigten Seite gehören.
    • SenSEO: Zeigt ein paar Hinweis zur Suchmaschinenoptimierung der aktuellen Seite an.
    • CodeBurner: Zeigt für HTML-Tags und CSS-Attribute an, von welchen Browsern diese wie unterstützt werden. Dazu muss entweder ein Element im Tab “HTML” oder “CSS” rechtsangeklickt und dann “Look up …” gewählt werden – oder man klickt (nachdem man ein mal auf den HTML-Tab geklickt hat) auf den Tab “Reference”.
  • Web Developer Toolbar: Eine Toolbar mit diversen, nützlichen Werkzeugen.
  • JSView: Bietet einen Toolbar knopf, mit dem man sich schnell die CSS- und JS-Datei, die zur momentan angezeigten Seite gehören, anzeigen lassen kann.
  • MeasureIt: Bietet die schnelle Möglichkeit, die Größe von Elementen auf der Seite auszumessen. Das “Maßband” wird über einen Knopf unten links in der Statusleiste aktiviert.
  • ColorZilla: Bietet eine Pipette zum Ermitteln eines Farbwerts auf einer Webseite. Wird genau wie MeasureIt in der Statuszeile aktiviert.
  • IE Tab (nur Windows): Zeigt im Firefox auf Wunsch die aktuelle Seite mit der Internet-Explorer-Engine an. Nützlich für’s Testen der Seite.
  • FireShot: Erzeugt Screenshots der Seite, die gerade betrachtet wird. Außerdem können dieses Screenshots dann mit Anmerkungen versehen werden.

Dazu kommen noch die obligatorischen Add-ons:

No comments yet

Leave a Reply

Your email address will not be published. Required fields are marked *