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

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:

Download gibt es hier und hier.

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:

• Update Notifier (hier mit kann man u.a. Firefox schnell neustarten)
• Aging Tabs
• Mouse Gestures Redox
• Perspectives

Addons

Im folgenden will ich die Add-ons auflisten, die sich bei mir über die Jahre hinweg als “nützlich” herauskristalisiert haben:

• Adblock Plus: Werbefilter, so dass man endlich (größtenteils) ohne Werbung surfen kann.
• Searchbar Autosizer: Verändert die Größe des Suchfelds, das sich im Firefox oben rechts neben der Adresszeile befindet, automatisch, so dass es immer nur so groß ist, wie es maximal sein muss.
• Smart Stop/Reload (Button) (oder Stop-or-Reload Button): Verschmilzt den Stopp- und den Neu-Laden-Knopf. Der Stopp-Knopf wird dann nur dann angezeigt, wenn gerade eine Seite geladen wird; ansonsten wir der Neu-Laden-Knopf angezeigt.
• Fission: Zeigt den Ladezustand der Seite in der Adresszeile an.
• Update Notifier: Benachrichtigt über Updates für die installierten Firefox Add-ons.
• Mouse Gestures Redox: Mausgesten zu schnelleren Bedienen vom Firefox. Am praktischsten finde ich das Vor- und Zurück-Blättern mit den Maustasten. Wenn man z.B. erst die rechte Maustaste gedrückt hält und dann die linke Maustaste drückt, geht man eine Seite zurück. Umgekehrt geht man eine Seite vor. Ebenso praktisch ist das Wechseln durch die Tabs: Dazu hält man die rechte Maustaste gedrückt und dreht dann das Mausrad. (Dazu müssen allerdings in den Einstellungen die Mausrad-Gesten aktiviert werden.)
• Cookie Button in the status bar: Erlaubt es, die Cookie-Einstellungen für die gerade angezeigte Seite ganz einfach zu ändern. Als Standard-Einstellung würde ich dann vorschlagen, Cookies nur solange zu akzeptieren, bis Firefox geschlossen wird. (via Extras > Einstellungen > Datenschutz > Cookies)
• XMarks: Synchronisiert die eigenen Bookmarks zwischen mehreren Rechnern. Kann auch die eigenen Passwörter synchronisieren, aber dieser Sache vertraue ich nicht ganz.
• delicious Bookmarks: del.icio.us ist ein sog. “Social Bookmarking Service”. Hier kann man ebenfalls Bookmarks ablegen und diese mit Tags (dt. Schlüsselworten) belegen. (Meine Bookmarks befinden sich übrigens hier.) Im Unterschied zu Bookmarks Synchronizer werden die Bookmarks direkt auf den Server hochgeladen, wenn man den Bookmark anlegt. Leider unterstützt del.icio.us keine Ordner. Aus diesem Grund verwende ich beide Add-ons.
• Aging Tabs: Unbenutzte Tabs verblassen mit zunehmendem Alter, während der aktive Tab besonders hervorgehoben wird.
• OpenBook (nicht kompatibel zu FF3.6): Erweitert den Dialog zum Hinzufügen von Bookmarks. So kann z.B. die zu bookmarkende URL geändert oder der Lesezeichen-Baum automatisch ausgeklappt werden.
• File Title: Beim Speichern einer HTML-Seite wird nicht mehr deren Dateiname als Vorschlag gewählt sondern der Titel des Seite.
• Fetch Text URL (nicht kompatibel zu FF3.6): Erlaubt das Öffnen von URLs, die nur als Text vorliegen, via Context-Menü.
• Link Alert: Wenn man mit dem Mauscursor über einen Link fährt, wird als kleines Tooltip angezeigt, zu welchem “Typ” (z.B. verschlüsselt, neues Fenster, PDF-Dokument, …) der Link führt.
• Fast Video Download: Erlaubt den einfachen Download von Videos von diversen Video-Portalen (u.a. YouTube). Wer das Search-Menü nicht braucht, das zusammen mit diesem Addon kommt, der sollte dieses in den Addon-Einstellungen deaktivieren.

Allgemeine Einstellungen

Noch ein paar Konfigurationseinstellungen (einfach “about:config” in die Adresszeile des Browsers eingeben):

• Tab-Preview aktivieren: Unter FF 3.6 ist es möglich, für die geöffneten Tabs eine Vorschau zu aktivieren. Dabei gibt es mehrere Möglichkeiten (die alle – bis auf das Addon – ohne Neustart von FF funktionieren):
  • Beim Wechseln mit Tastenkombination: Unter about:config die Option browser.ctrlTab.previews auf true setzen. Dann erhält man eine Tab-Vorschau, wenn man die Tabs mit Strg+Tab wechselt. Eine Übersicht über alle Tabs erhält man mit Strg+Shift+Tab.
  • Beim Klicken auf den “Alle Tabs”-Knopf ganz rechts auf der Tab-Leiste: Unter about:config die Option browser.allTabs.previews auf true setzen, dann wird beim Klicken auf den Knopf statt einer Liste ein Preview-Fenster für alle Tabs angezeigt (identisch mit der Strg+Shift+Tab-Version von oben).
  • Taskbar-Previews unter Windows 7: Unter about:config die Option browser.taskbar.previews.enable auf true setzen. Damit erhält man Vorschau-Fenster auf der Windows 7 Taskbar (wie beim Internet Explorer).
  • Preview bei Maus über Tab: Das Addon Tab Preview ermöglich eine Vorschau eines Tabs, wenn man den Mauszeiger über den Tab bewegt.
• Nicht-EVSSL-Zertifikate besser hervorheben: Nicht-EVSSL-Zertifikate (blau statt grün hinterlegt) werden in der Adresszeile standardmäßig nur mit dem Favicon dargestellt. Damit zusätzlich zum Favicon auch der Domainname in der Adresszeile im Zertifikatfeld angezeigt wird (siehe Bild rechts oder diese Beispielseite), unter about:config die Einstellung browser.identity.ssl_domain_display auf 1 ändern.
• Vereinfachte Handhabung von Zertifikaten: Wie die Handhabung mit Zertifikat im Firefox 3 vereinfacht wird, ist hier beschrieben.
• Auto-Scroll per mittlerer Maustaste deaktivieren: Dazu unter about:config die Einstellung general.autoScroll auf false ändern.

Tablet-PC Benutzer

Hier noch ein paar Einstellungen für Tablet-PC-Benutzer:

• Touch-Eingabe-Feld-Integration aktivieren: In about:config die Einstellung intl.enable_tsf_support auf true setzen und FF neustarten.
• Scroll-Balken auf die linke Seite: In about:config die Einstellung layout.scrollbar.side auf 3 setzen und FF neustarten.

Für Linux-Benutzer

Noch ein paar Worte zu Linux (im Unterschied zu Windows):

• Standardmäßig versucht der Firefox unter Linux (z.B. unter Ubuntu), den Inhalt der Zwischenablage als neue URL zu interpretieren, wenn man an einer beliebigen Stelle im Browser-Fenster mit der mittleren Maustaste klickt. Mich hat dieses Verhalten immer sehr genervt (gerade dann, wenn man aus Versehen ein wenig neben einen Link klickt, den man eigentlich in einem neuen Tab öffnen wollte). Um es zu deaktivieren, gibt man in der Adresszeile “about:config” (ohne Anführungszeichen) ein und sucht dann nach dem Wert “middlemouse.contentLoadURL”, den man auf “false” setzt. Und schon ist das Problem erledigt.
• Wenn man normalerweise unter Windows arbeitet, möchte man evtl. den Menüpunkt “Einstellungen” wieder im Menü “Extras” (und nicht im Menü “Bearbeiten”, wo erunter Linux ist) haben. Um das zu erreichen, installiert man einfach das Add-on Preferences in Tools Menu. Dann sind die Einstellungen wieder an der gleichen Stelle wie unter Windows.
• Wenn man in die Adresszeile im Firefox klickt, dann wird unter Windows der gesamte Inhalt markiert. Unter Linux ist das nicht der Fall. Um das Windows-Verhalten wieder herzustellen, geht man auf die Seite “about:config” und setzt die Einstellung “browser.urlbar.clickSelectsAll” auf “true”. Nach einem Neustart von Firefox markiert ein Klick in die Adresszeile dann deren gesamten Inhalt.

Das Style kann man hier herrunterladen:

Download (201 kB)

Der Inhalt der ZIP-Datei muss in das Verzeichnis “C:\Windows\Resources\Themes” kopiert werden. (Es sollte dann also im Verzeichnis “Themes” ein Verzeichnis “MayaStyle” geben, in dem sich eine Datei namens “MayaStyle.msstyles” und ein Verzeichnis names “Shell” befinden.)

Dann kann der Style über “Systemsteuerung” – “Anzeige” – “Darstellung” im Drop-Down-Feld “Fenster und Schaltflächen” aktiviert werden. (Der Eintrag lautet “MayaStyle”.)

Auf den meisten Computern muss allerdings noch ein zusätzlicher Schritt durchgeführt werden – und zwar dann, wenn der Style in der Liste nicht angezeigt wird. Um den Style verwenden zu können, muss dann noch ein Patch installiert werden. Diesen gibt es einzeln oder in einem Paket namens “XPize” (das übrigens sehr zu empfehlen ist). Durch diesen Patch kann man Visual Styles verwenden, die nicht von Microsoft stammen.

PS: Die Schatten unter den Fenstern werden übrigens von dem Tool Y’z Shadow (Version 1.9) erzeugt.