CodeBurner ist ein Firefox Addon, das sich in Firebug integriert. Die Autoren des Plugins sind http://www.brothercake.com/, zur Verfügung gestellt wird das Tool jedoch von SitePoint. Dabei wurde schon eine Namensänderung vorgenommen. Vormals FireScope, heißt das Tool nun CodeBurner um eine Verwechslung mit der gleichnamigen Firma entgegen zu wirken.

Nach der Installation gibt es einen neuen Reiter “Reference” innerhalb von Firebug. Dieser beinhaltet eine Suche über HTML Elemente, Attribute und CSS Eigenschaften. Das Ergebnis zeigt das jeweils gefundene Element, bzw. die gefundenen Elemente, inklusive einer kurzen Beschreibung, an und zeigt direkt, welche Browser dies wie unterstützen. Mit einem Klick auf “more” erreicht man die ausführliche Referenz von Sitepoint.com.

Zudem klinkt sich CodeBurner in verschiedene Kontextmenüs von Firebug ein, so dass es auch in den verschiedenen Inspektoren verfügbar ist. Die Funktion “Show Code Examples” rundet das Angebot von CodeBurner ab.

Für mich auf jeden Fall eine gute Hilfe und seit Heute eine meiner Standard Firefox Addons.

Das Tool erstellt von einer eingegebenen Webseite Screenshots, wie sie aktuell in den ausgewählten Browsern aussieht. Dabei werden eine große Auswahl von Browsern unter Linux, Windows und Mac Os unterstützt. Sogar verschiedene Auflösungen, Farbtiefen und sogar unterschiedliche JavaScript und Flash Versionen werden zur Auswahl angeboten.

Nachdem der Auftrag gestartet wurde, wird er in eine Queue verschoben. Unter einer festgelegten URL werden dann die Screenshots aufgelistet und zum Download angeboten. Diese sind für 30 Minuten verfügbar, können jedoch einfach neu angefordert werden.

Unterstützt werden hierbei:

• Internet Explorer 5.0
• Internet Explorer 5.5
• Internet Explorer 6.0
• Internet Explorer 7.0 BETA

Die Installation ist denkbar einfach:

1. Zuerst die angepasste Version je nach OS X Version von Darwine runterladen.
2. Diese in das Programme Verzeichnis ziehen.
3. Die aktuelle ies4osx Version herunterladen und doppelklicken.
4. Auswählen, welche Version(en) des Internet Explorer installiert werden sollen. Hierbei kann sogar die gewünschte Sprache ausgewählt werden.

Nach der Installation stehen die ausgewählten Versionen direkt im Programme Verzeichnis zur Verfügung. Deinstalliert werden diese gewohnt einfach, in dem sie in den Papierkorb verschoben werden.

Der Autor weist ausdrücklich auf den Betastatus des Projekts hin. Trotzalledem finde ich es bereits jetzt, in diesem frühen Stadium, sehr beeindruckend.

Das Projekt basiert wohl auf dem ies4linux Projekt und wird unter der GPL zur Verfügung gestellt.

Damit kann, ähnlich der “View CSS” Erweiterung des Mozilla Firefox Plugins “Web Developer Toolbar“, das Box model einzelner Elemente von beliebigen Webseiten angezeigt werden.

Einfach von der Webseite des Herstellers, das Bookmarklet idealerweise in die Lesezeichen-Symbolleiste ziehen. Danach jede beliebige Seite laden, den XRAY Button drücken und ein beliebiges Elemente per Klick auswählen. Schon erscheinen Informationen zum ausgewählten Element als verschiebbares Element auf der Webseite. Die Webseite an sich, wird ausgegraut, was die volle Konzentration auf den Infokasten lenkt. Direkt am Element werden auch noch ein paar nützliche Informationen wie die Höhe, die Breite und die Top und Left Position angezeigt.

Dabei kommt das ganze etwas schicker daher als das Info Element aus der “Web Developer Toolbar“. Na ja, muss jeder für sich entscheiden, ich finde es jedenfalls ganz praktisch und schick.

Allerdings dürfte die Liste eher vergänglich sein, hier werden nämlich nur Screenshots, bzw. Teilbereiche von Screenshots angezeigt, die dann mit der Seite verlinkt sind, auf der das Menü implementiert ist. Trotzdem einen Blick wert.

Vielleicht ist da ja die ein oder andere Anregung für die tägliche Arbeit dabei.

Nach der Installation der vor kurzem erschienenen Version 1.0 lassen sich alle Einstellungen über ein Icon in der rechten unteren Ecke der Statusleiste vornehmen. Nach einem Klick darauf teilt sich das Browserfenster horizontal und öffnet das Programm im unteren Teil der Seite. Dabei lässt sich das Addon entweder für alle, oder nur für die aktuell angezeigte Seite aktivieren. Generell würde ich empfehlen Firebug nur für ausgewählte Seiten zu aktivieren. Nach einer Weile, mit vielen geöffneten Tabs und universell aktiviertem Firebug, wird der Browser sehr langsam, was nur durch den Neustart von Firefox behoben werden kann.

Das Killerfeature von Firebug ist meiner Meinung nach der Inspect Modus für HTML und CSS. Hiermit lassen sich einzelne Elemente mit der Maus überfahren. Die Ansicht der Erweiterung teilt sich dann erneut. In der linken Spalte, springt man direkt in den HTML Quelltext an die Stelle des ausgewählten Elements. In der rechten Spalte wird dann gleichzeitig die CSS Definitionen angezeigt. Hier werden übrigens auch alle Elemente angezeigt, von denen das ausgewählte seine Einstellungen erbt. Einzelne Definitionen lassen sich deaktivieren um anzuschauen, wie es ohne aussehen würde. Schick ist auch der Layout-Reiter in der rechten Spalte. Hier kann man genau alle Margins und Paddings, sowie die Breite und Höhe des Elements einsehen.

Ein weiteres nettes Feature ist auch die sogenannte Konsole. Hier kann man sehr gut AJAX Requests verfolgen, bzw. debuggen. Angezeigt werden hierbei alle Daten des Requests, sowie alle Daten der Response. Zusätzlich kann man die Header der Request anzeigen lassen. Dieses Feature konnte ich allerdings leider noch nicht allzu genau anschauen.

Als letztes habe ich noch herausgefunden, bzw. gelesen, das von Firebug ein globales JavaScript Objekt namens “Console” zur Verfügung gestellt wird. Damit lassen sich Debugausgaben direkt in die Console von Firebug schreiben. Das erspart einem mühsames alert-Debugging und ist meiner Meinung nach ein sehr nützliches Feature.

Alle Funktionen zu erwähnen würde hier sicher den Rahmen sprengen. Unter http://www.getfirebug.com/docs.html stellen die Entwickler aber auch eine Dokumentation zur Verfügung. Hier ist sicher auch noch der ein oder andere Tipp dabei oder wird das ein oder andere nützliche Feature erwähnt.

Insgesamt finde ich, das Firebug ein super Werkzeug ist, welches einem die Arbeit als Web-Entwickler um einiges leichter macht. Sparsam aktiviert, wird das weitere Benutzen des Browsers auch nicht beeinflusst. Im Laufe der Zeit werde ich sicher noch ein paar weitere Dinge herausfinden, die man so bei der täglichen Arbeit gebrauchen kann.

Unbedingt von http://www.getfirebug.com runterladen und installieren

Wirklich interessant und gleichzeitig sehr “Freaky” finde ich die einfache Templating-Engine . Einfach mal durchlesen, wirken lassen und sich seine eigenen Gedanken machen. Ich hatte schon einige Anwendungsfälle, wobei ein Template in JS nützlich gewesen wäre.

Alles in allem holt Prototype mit V1.5 tierisch gegen jQuery auf. Aber was man benutzt, ist meiner Meinung nach eine “Glaubensfrage” – Wobei Prototype sich auf das wesentliche beschränkt, und jQuery teilweise zuviel “Effekthascherei” betreibt.

Zu finden ist das ganze unter: http://www.smashingmagazine.com

Wer kennt weitere Tutorials oder Dokus?

Man, was ist nur aus der guten alten Zeit geworden, als ein Web-Browser noch HTML-Seiten anzeigen sollte

UPDATE: Apple, Erfinder des Canvas-Tags, hat natürlich auch eine Seite dazu!