jens.hatlak.de / Über mich    
Atari   PHP    
Dreamweaver Manual   Linux    
Akronyme   Mozilla / Mozilla Dualboot  
  SciTE   Mozilla bauen  
This page in English This page
in English
  FASTA-Parser   Mozilla installieren  
Ich spreche...   Bookmark Indicator  
    Custom Buttons  
    MailNews Status Icons  

Do you prefer reading pages in English? This page is also available in English.

Mozilla

Wie Surfen Spaß macht und Web-Entwicklung leicht fällt

Mozilla Logo Es begann gegen Ende des letzten Jahrtausends, als im Netz erste lauffähige Versionen eines gewissen Browsers auftauchten, der seinen Ursprung in dem Vorhaben hatte, die alten Netscape 4.x-Quellen ad acta zu legen und bei Null zu beginnen. Eine weise Entscheidung.
Ich weiß nicht mehr genau, seit wann ich dabei bin, aber es wird wohl etwa M16 gewesen sein (etwa Mitte 2000). Damals hießen die Mozilla-Releases noch Milestones und wurden entsprechend benannt. Irgendwann kam dann 0.6, worauf Netscape ihre Version 6 gründeten. Die Mozilla-Entwickler wussten schon damals, warum sie eine Null vor die Versionsnummer schrieben, aber Netscape schien das nicht zu interessieren. Entsprechend schlecht fielen die Bewertungen des kommerziellen Ablegers aus, und auch gewisse Seiten wie MozillaQuest bekamen dadurch erst richtig Auftrieb.

Nun, heute sieht es anders aus. Wir schreiben eine Eins vor dem Komma und können frei entscheiden: Suite oder schlanke Einzelapplikation? Jeder, wie er mag.

Was ist so toll an Mozilla? - Meine Top 10

  1. Überragende Web-Entwicklungstools: JavaScript Debugger, DOM Inspector
  2. Nicht so anfällig für Viren & Co. wie IE/Outlook
  3. Kostenlos und doch mächtig.
  4. Tabbed Browsing. OK, Opera war zuerst, aber MultiZilla ist besser! *g*
  5. Find As You Type, Popup Blocking
  6. Erweiterbarkeit (XPIs, Extension-Community -> MozDev), Anpassbarkeit (viele Einstellungsmöglichkeiten) und Feature-Reichtum
  7. Standards. Egal ob vom W3C oder RFCs oder... Überall. Und konsequent. Und Plattform-übergreifend.
  8. Open Source-Natur: Release often, release many (Nightlies, CVS); offenes, top-organisiertes Bug-Handling (Bugzilla); unabhängig und weltumspannend / -vereinend :-)
  9. Themes (auch offen: jeder kann eigene machen oder bestehende modifizieren)
  10. Alles in einem, egal wo man ist. Zuhause, in der Uni, ...
    Wer mir hier nicht zustimmt, soll Firefox & Co. nehmen ;-)

Die Suite: Tools inbegriffen

Für Web-Entwickler bietet Mozilla einige besonders nette Werkzeuge, und das schon von Hause aus. Mit Erweiterungen kann man darüber hinaus nachrüsten, was die Suite nicht direkt anbietet (umso mehr bei den Einzelapplikationen).

JavaScript Console

Mit diesem Werkzeug sieht man sofort, wenn eine Extension (s.u.) kaputt ist oder in bestimmten Situationen etwas nicht so tut wie es sollte (zur Erinnerung: Extensions sind ein Mix aus XUL, CSS, RDF und JavaScript). Auch kann man dem jeweiligen Autor meist weiterhelfen, indem man ihm die relevanten Ausgaben schickt. Aber auch bei eigenen JavaScript-Experimenten hilft das Tool ungemein: Hier erscheinen alle Fehlermeldungen wie nicht deklarierte oder existierende Variablen und Objekte, Syntaxfehler usw. In Kombination mit den anderen Tools hat man so die Fehlerursache meist sehr schnell eingegrenzt.

DOM Inspector

Zunächst einmal sollte geklärt werden, was das DOM eigentlich ist: Eine Repräsentation der Struktur eines Dokuments, sei es nun XML-basiert wie RDF oder XHTML oder reines HTML. Der DOM Inspector zeigt diese Struktur in Form eines Baumes (DOM Tree) an, ähnlich wie es etwa der Windows Explorer für das Dateisystem macht.

In der Standardeinstellung zeigt der DOM Inspector DOM Nodes (Knoten im Baum, letztlich Elemente) an, auf der linken Seite die des betrachteten Dokuments und auf der rechten die Daten des links ausgewählten Elements.

Über "File/Inspect a Window" kann man ein Fenster auswählen um es dann genauer zu untersuchen (kleiner Gag am Rande: man kann natürlich auch den DOM Inspector selbst auswählen!). Auf diese Weise kommt man aber nur an das Fenster heran, also das Chrome/XUL. Will man hingegen die in einem Fenster angezeigte Seite begutachten, muss man deren URL angeben. Hier hilft MultiZilla (s.u.), das einen Button anbietet, der genau die gerade angezeigte Seite in den DOM Inspector lädt. Ansonsten kann man sich angegebene Dokumente im sog. Browser anzeigen lassen, der am unteren Rand erscheint, wenn man "View/Browser" wählt.

Hat man dann ein passendes Dokument ausgewählt, kann es losgehen: Bei einem HTML-Dokument hängt unter der Dokumenten-Wurzel (document root, #document) zuerst einmal das <HTML>-Tag. Wählt man nun aber z.B. das <BODY>-Tag, sollte kurz ein Rahmen um das gesamte Dokument herum blinken — diese Funktion kann sehr nützlich sein, denn auch anders herum kann man mit dem Icon links oben (das mit dem kleinen Pfeil) Elemente im Dokument anklicken, wobei sie dann blinken und im DOM Tree selektiert werden.

Sowohl links als auch rechts gibt es noch einen kleinen Umschaltbutton in Form einer stilisierten Liste. Wechselt man damit z.B. auf "JavaScript Object", findet man unter target alle Eigenschaften des Objektes. Auf diese Weise kann man z.B. prima die style-Eigenschaften oder verfügbare Funktionen finden und auch direkt kleine Tests durchführen (Rechtsklick, "Evaluate JavaScript..."). Wechselt man dagegen auf "Computed Style", kann man sich die CSS-Eigenschaften des tatsächlich erzeugten Elements anschauen, also inklusive aller Mozilla-spezifischen Details. Entsprechend sieht man unter "CSS Style Rules", welche Style-Regeln aus welchen Dateien (mit resource://gre beginnende sind interne) für ein Element zur Anwendung kommen.

JavaScript Debugger (Venkman)

Das wohl mächtigste Werkzeug überhaupt. Von "echten" Programmiersprachen und entsprechenden IDEs her ist man es gewohnt, den Debugger benutzen zu können. Allein mit dem Internet Explorer oder anderen Browsern hat man das für JavaScript nicht, wohl aber mit Mozilla. Die grundsätzliche Bedienung erfolgt in wenigen Schritten:

  1. Das rote X anklicken — drei Punkte erscheinen.
  2. Die zu debuggende Seite neu laden oder zum "Open Windows" Tab wechseln und "Set as Evaluation Object" auf das Fenster/Tab mit den zu debuggenden Scripts anwenden
  3. So lange "Step over" benutzen, bis das Browserfenster wieder benutzbar wird
  4. Das tun, was man debuggen will (z.B. Events auslösen)
  5. (Zukünftige) Breakpoints setzen (erste Spalte im Source Code-Fenster: direkt vor den Zeilennummern) und das Skript neu starten
  6. Nun kann man lokale Variablen beobachten, eigene Watches setzen, ...

Siehe hierzu auch:

Find As You Type (f.k.a. Type Ahead Find)

Schnell beschrieben, aber ungleich wertvoller: Durch bloßes Eintippen kann man in jedem Dokument (auch Quelltext) suchen. Standardmäßig wird nur nach Links gesucht; leitet man jedoch die Suche mit einem Slash (/) ein, wird im ganzen Text gesucht. Das Standardverhalten kann man über "Edit/Preferences/Advanced/Keyboard Navigation" ändern.

Selection Source

Genauso einfach erklärt wie das Suchen durch Eintippen ist die Anzeige des Quelltextes der aktuellen Seite, beschränkt auf die aktuelle Selektion. Einfach einen Bereich im aktuellen Dokument selektieren und im Kontextmenü "View Selection Source" wählen.

Man sollte allerdings wissen, dass Selection Source auf Basis des nach dem Parsen des Quelltextes von Mozilla intern angelegten DOM arbeitet und nicht, wie das normale View Source, auf Basis des tatsächlichen Quelltextes einer Seite.

Erweiterungen

Mozilla an sich hat schon nette Features, aber wirklich interessant wird's erst durch Extensions in Form von sog. XPIs, Plattform-übergreifenden Installationsarchiven.
Spricht man von Extensions für Mozilla, muss man eine Site im selben Atemzug erwähnen: MozDev.

Die Bilder bei den folgenden Extensions habe ich von den jeweiligen MozDev-Seiten kopiert; die Rechte daran verbleiben natürlich bei den jeweiligen Inhabern.

MultiZilla

MultiZilla mit OSXZilla
Theme

Wer noch nie was von MultiZilla gehört hat, hat was verpasst. MultiZilla war die erste Tabbed Browsing Extension für die Mozilla Suite und bis heute wohl auch die beste. Mozilla selbst hat viel davon kopiert, aber längst nicht alles (s.u.). Ich selbst bin, glaube ich, seit Version 1.2.x dabei und seitdem treuer Fan. Chefentwickler HJ (netter Zufall: meine Initialen genau anders herum!) leistet klasse Arbeit und machte MultiZilla bislang zum wohl aktivsten MozDev-Projekt üerhaupt.

Für jede erdenkliche Aktion kann separat festgelegt werden, ob sie in einem neuen Tab/Fenster ausgeführt werden soll oder nicht. Außerdem gibt es vieles, was das Arbeiten angenehmer macht: Bereits geschlossene Tabs können wieder geöffnet, bestehende in neue Fenster exportiert oder nach einer einstellbaren Zeit automatisch neu geladen werden. Ganze Tab-Sitzungen können abgespeichert und wieder hergestellt werden. Berechtigungen wie JavaScript, Bilder, Plugins, ... können individuell für jedes Tab vergeben werden. Tabs können automatisch, wiederum nach einer einstellbaren Zeit, durch bloßen Überfahren mit der Maus aktiviert werden. Farbige Icons auf den Tabs zeigen auf Wunsch den Ladestatus der Seite an. Die mittlere Maustaste kann zum Schließen oder Wieder-Öffnen von Tabs konfiguriert werden und natürlich zum Öffnen von Links in neuen Tabs, auf Wunsch im Hintergrund ladend.

Die Buttons nicht nur der MultiZilla-Toolbar selbst, sondern auch von Mozilla, können individuell (de)aktiviert werden. Die Bookmark-Menüs können mit zusätzlichen Optionen ausgestattet werden, z.B. dem Öffnen von ganzen Ordnern in neuen Tabs, ohne dass diese Groupmarks wären. Auch das Löschen sensibler Daten beim Beenden ist möglich. Sämitliche mit JavaScript geöffneten Fenster kann man in Tabs umleiten. Bei geblockten Popups kann man ein Icon auf dem jeweiligen Tab erscheinen lassen.

Das integrierte QuickPrefs-Menü erlaubt außerdem schnellen Zugriff auf Einstellungen wie Cookies, Bilder, Popups, JavaScript, Browser- und Referrer-Spoofing, Cache- und Proxy-Einstellungen sowie sensible Daten. Darüber hinaus können alle installierten Extensions individuell (de)aktiviert werden.

Googlebox

Googlebox

Was für den Internet Explorer die Google Toolbar ist, das ist die Googlebox für MultiZilla. Eingebettet in die MultiZilla-Toolbar kann man damit auch die anderen Google-Suchen wie die nach Bildern oder in News, direkt nutzen. Besonders hilfreich sind die zu den Suchbegriffen erzeugten Buttons, mit denen sich in den Suchtreffern direkt nach selbigen suchen lässt.

MozBlog

MozBlog

Bloggen macht Spaß! Ich selbst betreibe auch einen Weblog. Mit MozBlog geht das sogar direkt aus Mozilla heraus. Neben Blogger werden auch andere gängige Weblog-Services wie Movable Type unterstützt.

Download Status Bar

Download Status Bar

Mal ehrlich, Mozillas Download-Manager ist ja besser als diese nervigen Einzel-Downloadfenster, aber doch nervig, wenn man viele kleinere Dinge wie Bilder herunter laden möchte. Hier schafft die Download Status Bar Abhilfe: Nach dem Deaktivieren der Anzeige des Downloadmanagers erscheinen Downloads nur noch am unteren Fensterrand — schön ordentlich nebeneinander und mit netten Kontextmenüs.

Web Developer Toolbar

Web Developer
Toolbar

Alles was der Web-Entwickler braucht: Deaktivieren und Umranden von Dokumentteilen wie Styles, Bildern, Formularelementen, Tabellen, ..., Anzeige von Informationen, Validierungsmöglichkeiten, Resizing uvm.

MozEx

Wie oft vermisst man schmerzlich die Funktionalität seines Lieblingseditors (bei mir ist das SciTE). In Mozilla muss das nicht sein: Mit MozEx kann man eigene Editoren für bestimmte Links, Textareas oder die Quelltext-Anzeige definieren. Auch andere Programme, wie z.B. für Downloads, News, Mail oder Telnet, ... und sogar selbstdefinierte Schemata wie meinschema:// sind möglich.

Live HTTP Headers

Ein essentielles Web-Entwickler-Werkzeug. Eigentlich so wichtig, dass es Teil der Suite sein sollte: Mit dieser Erweiterung kann man der HTTP-Kommunikation zwischen Client (Mozilla) und Server lauschen und mitprotokollieren. Dabei sieht man ganz schnell, ob etwa der falsche MIME-Type gesendet wurde oder welche zusäztlichen HTTP-Header (gerade in Verbindung mit Skriptsprachen wie PHP und Redirects interessant).

XUL Console

Im Prinzip nur eine kleines Helferlein für geplagte XUL-Freunde: Hiermit kann man mal eben den entpackten Inhalt eines JAR aus einem XPI modifizieren und direkt das Ergebnis betrachten. Die Fehlersuche wird damit z.T. erheblich vereinfacht; besonders, da auch das Mozilla-Chrome direkt zur Verfügung steht.

AdBlock

Der Werbungsblocker schlechthin. Was Mozilla bei Popups schon selbst macht, erledigt AdBlock für den Rest. Egal ob einfaches Bild, IFRAME oder Flash: Durch Angabe von Wildcards in den Bild- und IFRAME-Adressen lassen sich ganze Server und Unterverzeichnisse blocken. Einfach und doch effektiv: Rechtsklick, "AdBlock xy" und kurz die Adresse zurechtstutzen — und schon ist man den Kram los.

mozTrayBiff (f.k.a. Mozilla Free Desktop Integration)

mozTrayBiff

Was das Mozilla-Projekt in vielen Jahren nicht selbst geschafft hat (und auch für Windows erst nach langer Zeit), hat Ilya mit seinem Projekt geschafft: Ein Tray-Icon für neue Mails (Biff). Und das nicht nur für KDE, sondern z.B. auch für XFce oder IceWM. Kleine Einschränkung: Mozilla muss GTK 2 als Toolkit benutzen, was die normalen Nightlies von mozilla.org (noch) nicht tun. Das war übrigens der Hauptgrund für mich, das Toolkit beim Bauen zu wechseln. ;-)

CuteMenus

CuteMenus

Was soll man dazu groß sagen? Bundische Icons überall!

Session Saver

Tab-Sitzungen abspeichern kann MultiZilla auch. Aber Crash Recovery...

Weitere Erweiterungen:

Zur Zeit leider kaputt in Bezug auf aktuelle Suite-Nightlies:

Alte, leider nicht mehr gepflegte Erweiterungen:

Status unbekannt:

Links

 

Valid HTML 4.0!
Jens Hatlak
27. Februar 2004