Too Cool for Internet Explorer

Browserfarm



Browserfarm zum Testen von Web Seiten mit folgenden Browsern:

  • Internet Explorer 7.0
  • Internet Explorer 6.0
  • Internet Explorer 5.5
  • Internet Explorer 5.0
  • Firefox 3.0a (Nightly Build)
  • Firefox 2.0
  • Firefox 1.5 (JRE 1.5)
  • Firefox 1.5 (JRE 1.4)
  • Firefox 1.0
  • Konqueror 3.5
  • Opera 9.0
  • elinks 0.10



Erweiterte Console für Firefox


Ich bin letzte Woche über ein neues Firefox Plugin gestolpert, welches die in die Jahre gekommene Javascript Console ablösen soll.

Firebug ist eine Kombination aus Javascript Console, DOM Inspektor und einem Javascript Interpreter. Daneben kann man ausserdem noch den Datenverkehr bei einem XMLHttpRequest beobachten was ihn zu einem sehr nützlich Hilfsmittel für Entwickler Browser-basierter Applikationen (AJAX / XUL) macht. Ich entwickle beruflich u.a. Anwendungen auf Basis der Mozilla Plattform (Javascript / XUL) und möchte diesen kleinen Helfer nicht mehr missen.

Sehr praktisch finde ich, daß Firebug sich am unteren Rand des Browsers einnistet. Im Weggeklappten Zustand sieht man lediglich in der Statusleiste einen Hinweis auf die in der Seite aufgetretenen Fehler. Klickt man auf diesen Hinweis, wird Firebug aufgeklappt und man kann die Fehler inspizieren. Firebug arbeitet im Gegensatz zur alten Javascript Console Kontextbezogen. D.h. es werden nur die Fehler und Informationen der aktuellen Seite bzw. des aktuellen Tabs dargestellt, was die ganze Sache sehr viel übersichtlicher macht. Im gegensatz zur herkömmlichen Javascript Console verdeckt kein Fenster mehr die Anwendung bzw. hat man die Ausgaben auf der Console beim Testen immer im Blick.

Der DOM Inspektor kann zwar bei Weitem nicht den Funktionsumfang seines grossen Bruders abdecken, dennoch ist er meist die schnellere Alternative. Es genügt ein Seitenelement anzuklicken und schon kann man die Informationen XML, CSS, Javascript und das Boxlayout einsehen.

Ich habe vor einem Jahr schon einmal einige Plugins beschrieben, die meiner Ansicht nach jeder Enwickler browser-basierter Anwendungen installiert haben sollte. Firebug gehört definitiv mit auf diese Liste - nach der Installation bleibt die angestaube Javascript Console garantiert geschlossen.



HTML Editing in Safari / WYSIWYG Komponenten



Ich habe gerade - besser spät als nie - durch ein 'Versehen' - ich habe mich mal wieder mit dem Safari in Serendipity eingeloggt anstatt mit dem Firefox - herausgefunden, dass der aktuelle Safari 1.3 unter Mac OS X 10.3.9 die Microsoft IE kompatiblen Komponenten 'contentEditable' und 'designMode' unterstützt, mit denen es möglich ist, WYSIWYG Editoren zu entwickeln, die ohne Java Applet direkt im Web Browser funktionieren. Ich habe ja die Ankündigung für 'contentEditable' in Safari schon vor einer ganzen Weile im Blog von Safari Entwickler David Hyatt gelesen, bin aber davon ausgegangen, dass dieses Feature erst mit Mac OS X 10.4 kommt. Mittlerweile habe ich im Archiv aber auch den Eintrag mit den Verbesserungen von Safari 1.3 gefunden :o). Sehr, sehr cool.

Leider habe ich bisher noch keine Beispiele gefunden, die mehr können als ein Wenig Text editieren und Standardformatierungen wie fett, kursiv, unterstrichen darauf anzuwenden.

Im Weblog von Oliver Wrede habe ich noch einen sehr interessanten Link zu einer Seite gefunden, die einen Überblick über sehr viele WYSIWYG Komponenten aller Art bietet, die in einem Web Browser funktionieren. Neben den IE und Mozilla basierten werden auch Java Applet und Flash basierte WYSIWYG Komponenten genannt.



Firefox URL Shortcuts


Bei Firefox kann man sich URL Shortcuts für Lesezeichen definieren. Wenn man z.b. ein Lesezeichen zum Online Wörterbuch dict.leo.org mit dem Kürzel 't' speichert, genügt in Zukunft in der URL Adresse das Eingeben eines 't' zum Aufrufen der Seite. Das schöne daran: man kann dem Aufruf einen Parameter mitgeben, sodaß man beispielsweise direkt eine Suche auslösen kann. Die Eingabe von 't suchbegriff' löst jetzt bei mir eine direkte Suche nach dem entsprechenden Wort aus und liefert mir die Ergebnisliste zurück.

Ich habe mir für die für mich wichtigsten Seiten Shortcuts eingerichtet. Zu beachten ist, daß das '%s' in der URL den Platzhalter zur Parameterübergabe darstellt.


  • Name: LEO Wörterbuch
    Location: http://dict.leo.org/?search=%s
    Keyword: t

  • Name: PHP Referenz
    Location: http://de.php.net/search.php?pattern=%s&show=quickref
    Keyword: p

  • Name: MySQL Referenz
    Location: http://www.mysql.com/search/?q=%s
    Keyword: m



Selbstverständlich dürfen die Namen der Kürzel auch länger als ein Zeichen sein ;-).


Firefox Plugins für Web Entwickler


Es gibt eine ganze Reihe für Web Entwickler äußerst nützlicher Plugins und Add-ons für den Browser Firefox bzw. Mozilla.


  • Die Web Developer Toolbar von Chris Pederick fügt dem Browser eine komplette Toolbar mit Funktionen für HTML und Web Entwickler hinzu. Die Toolbar bietet funktionen zum markieren von HTML Elementen, Anzeigen von Elementattributen, Tools zum Testen von Formularen und vieles andere mehr.

  • HTML Validator erweitert den Browser um ein Prüfwerkzeug für HTML Seiten. Die Erweiterung gibt in der Statusleiste des Browsers die Anzahl der Fehler und Warnungen der entsprechenden HTML Seite aus. Öffnet man das Fenster zur Ansicht des Quellcodes einer HTML Seite, erhält man zusätzlich eine Übersicht sowie Details der Fehler und Unstimmigkeiten der Seite.

  • Venkman ist ein kompletter Javascript Debugger, der ursprünglich für Mozilla entwickelt wurde, aber auch unter Firefox lauffähig ist. Venkman dürfte eines der komplexesten Add-ons für den Browser sein und demonstriert gleichzeitig eindrucksvoll die Möglichkeiten Mozilla basierter Browser und Anwendungen. Venkman ist ein vollständiger Debugger mit der Möglichkeit zum setzen von Breakpoints, Überwachung von Aurufen und Inhalten von Variablen und Objekten. Da Venkman eine sehr komplexe Applikation mit unzähligen Funktionen ist, möchte ich an dieser Stelle auch auf das hervorragende Tutorial "Learning the Javascript Debugger Venkman" von Svend Tofte verweisen.

  • Live HTTP Headers schließlich ist eine Erweiterung mit der es möglich ist, die Header eines Seitenaufrufs zu inspizieren. So ist es möglich auf einfachste Art und Weise festzustellen, welche Daten bei dem Aufruf einer Web Seite zwischen dem Browser und dem Server über den HTTP Header ausgetauscht werden. Dies ist zum Debuggen von Web Applikationen und Web Formularen äußerst nützlich. Wenn man nur schnell mal die übertragenen HTTP Header betrachten möchte und keine Lust hat das Ganze über eine zwar professionelle aber für den schnellen Test auch etwas umständlichere Proxy basierte Lösung wie den HTTP monitor Charles zu lösen, ist man mit live HTTP headers durchaus gut bedient.