webmatze.de

FireBug 0.4 – Der ultimative Web Debugger

Webseiten von heute bestehen meistens nicht nur aus HTML und CSS, sondern häufig auch viel JavaScript. Es sind häufig gar keine Webseiten mehr, sondern schon richtige Webanwendungen. Und wir alle wissen, dass Anwendungen häufig auch Fehler enthalten können. Auch Webanwendungen sind davon nicht ausgeschlossen.
Bisher war es meistens schwierig solche Fehler im JavaScript Code oder im HTML zu finden. Es fehlen die richtigen Tools, wie man sie z.B. bei der Programmierung mit Java ode C++ gewohnt ist, um diese Fehler aufzuspüren und zu beheben. Da HTML, CSS und JavaScript im Browser ausgeführt und angezeigt werden, braucht man auch Tools, um sie genau da - während sie ausgeführt werden - zu debuggen. Der Browser Firefox bietet hierfür einige gute Tools an. Ein guter Debugger ist z.B. Venkman. Und mit dem DOM Inspector kann man sich bequem den DOM Tree der Seiten anschauen.
Doch in Zeiten von web 2.0 und Ajax braucht man noch bessere und spezialisiertere Tools. Und eins dieser "Übertools" ist FireBug, welches jetzt in der Version 0.4 erschienen ist.

Hier ein kurzer Überblick über die neuenFeatures:

JavaScript Debugger

FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.

Stack Traces bei JavaScript Fehlern

Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.

JavaScript Fehler debuggen

Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.

Logging Funktionalitäten

Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.

Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.

Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.

cloneNode() Problem bei TextAreas im Firefox

Bei einem aktuellen Projekt benötigte ich eine Möglichkeit, bestimmte Inhalte einer Webseite zu Drucken. Dazu habe ich mir per JavaScript einen Bereich der Seite genommen, diesen geclont, ein neues Fenster geöffnet und dort den geclonten Bereich wieder eingefügt.

Falls sich in diesem geclonten Bereich interaktive Elemente wie Butons, Links oder Eingabefelder befanden, habe ich diese ebenfalls mittels JavaScript entfernt oder den Textinhalt der Eingabefelder bzw. Textareas kopiert und als Text an die gleiche Stelle wieder eingefügt. Als Ergebnis gibt es dann eine HTML Seite ohne Links und Buttons.

So weit so gut, aber da gibt es ein Problem, welches mir vorher noch nicht bewußt war und was ich auch noch nirgendwo dokumentiert sah. Wenn man im Firefox eine Textarea clont in welche der User zuvor noch Inhalte eingegeben hat, werden diese Inhalte nicht mitgeclont. Im Internet Explorer funktioniert dies richtig. Ich habe dazu mal eine Testseite erstellt, wo man dieses Verhalten nachprüfen kann. Getestet habe ich es zur Zeit nur im Firefox 1.5!

Node.cloneNode() Test

Ich werde mal weiter nachforschen, ob dies ein gewolltes Verhalten von den Firefox Entwicklern ist, oder ob es dafür schon Bugeinträge in Bugzilla gibt.

Google Page Creator

Goggle bietet einen neuen Service zum einfachen Erstellen von eigenen Webseiten an. Unter Google Page Creator kann sich jeder über ein Web Interface neue Seiten anlegen, diesen dann Styles zuweisen, das Layout festlegen und die Inhalte bearbeiten. Alles geschieht sehr einfach und intuitiv.
Die veröffentlichten Seiten erscheinen dann unter einer eigenen URL wie z.B. http://mein.name.googlepages.com/ und können von jedem aufgerufen werden.
Der Service befindet sich noch im Beta Stadium und es gibt auch noch keine Anzeichen dafür, das Google auf den Seiten Werbung einbinden möchte. Obwohl ich mir gut vorstellen kann, dass dies bald geschehen könnte.
Der Google Page Creator setzt, wie auch schon der Email Dienst Google Mail voll auf AJAX Technologien und zeigt einmal mehr, was heute alles möglich ist.

Momentan scheint es allerdings noch ein paar Probleme zu geben, da der Dienst beim Bearbeiten der Seiten ab und zu eine Timeout Fehlermeldung einblendet, was wohl auf den massenhaften Zugriff von Nutzern zurückzuführen ist, da diese URL gerade seine Kreise durchs Web macht.

Yahoo! stellt User Interface Library zur Verfügung

Heimlich, still und leise mausert sich Yahoo! immer mehr zum besten Freund des Webentwicklers. Im Yahoo! Developer Network werden nach und nach immer mehr Services für Entwickler bereitgestellt, um z.B. auf Bookmarks von del.icio.us oder Bilder von Flickr zugreifen zu können. Beide Seiten wurden vor kurzem von Yahoo! aufgekauft.
Nun hat Yahoo! auch eine JavaScript Bibliothek (Yahoo! User Interface Library) bereit gestellt, welche Entwickler beim Erstellen von Ajax Anwendungen unterstützen soll. So sind zum Beispiel Funktionen enthalten um Trees zu erstellen.
Weiterhin stellt Yahoo! eine Design Pattern Library online, auf der Hilfestellungen zu Verschiedenen Benutzeroberflächen Problemen gegeben werden.
Google sollte sich warm anziehen. Da ist etwas im Kommen.

Flash Remoting für PHP – Eine Einleitung

Neulich habe ich wieder etwas mit Flash "herumgespielt" und bin auf das Problem gestoßen von Flash aus mit PHP zu kommunizieren. Wobei mit kommunizieren - Objekte zwischen Flash und PHP hin- und herzuschicken und Methoden der PHP Klasse aufzurufen - gemeint ist.

Leider bietet Flash standardmäßig nicht die komfortablen Funktionen um mit PHP kommunizieren zu können. Nur Java, Microsoft .NET und Coldfusion MX werden durch eine kostenpflichtige Erweiterung Namens Flash Remoting unterstützt. Damit kann Flash mit Hilfe einiger ActionScript Dateien und einem Gateway auf der Serverseite Objekte und Klassen auf dem Server ansprechen und innerhalb des Flashfilmes wie eigene Objekte benutzen. Das schließt auch die Nutzung der Objekteigenen Funktionen oder Methoden mit ein.
Eigentlich keine schlechte Lösung, aber leider nicht für PHP geeignet! Also muß etwas anderes her. Über Google bin ich dann auch gleich auf einige interessante Open-Source Projekte gestoßen, die versuchen die gleiche Funktionalität auch für Flash bereitzustellen.

AMFPHP - Die Open-Source Alternative

Weiterlesen →

Was ist robots.txt?

Mit diesem Artikel will ich die Methode vorstellen, mit der Besitzer von Homepages im World-Wide Web Anweisungen an Web Robots geben können, die deren Hompages besuchen. Im Großen und Ganzen ist es möglich, diese Robots in bestimmte Bereiche einzuladen oder davon fern zu halten. Was man dazu braucht ist eine Datei mit Namen robots.txt.

Was sind Web Robots?

Web Robots oder auch Spider genannt, sind webbasierende Programme, die meist in regelmäßigen Abständen Hypertext Dokumente und die dort verlinkten Dokumente indizieren. Meist werden diese Programme von Suchmaschinen verwendet, um Seiten zu indizieren und die eigenen Datenbanken zu aktualisieren.

In manchen Fällen kann es aber von Vorteil sein, wenn diese Robots bestimmte Bereiche einer Website nicht indizieren. Dies kann zum Beispiel eine noch nicht veröffentlichte Seite sein, oder Bereiche einer Website, die sich sowieso laufend ändern.

Um dies zu gewährleisten, legt man eine Datei an, in der dem Robots mitgeteilt wird, von welchen Bereichen sie sich fern halten sollen. Es hängt jedoch vom Robot ab, ob er diese Information verwendet und danach handelt.

Weiterlesen →