Das JavaScript-Scratchpad in Firefox 6

Eines der neuen Features für Webentwickler in Firefox 6 ist der sogenannte Notizblock (Scratchpad). Dieser basiert auf der Workspace-Erweiterung und ist durch das Workspaces-Feature früherer Smalltalk-Entwicklungsumgebungen inspiriert. Die Idee dahinter ist denkbar einfach: Der Browser ist ein hervorragender Ort, um mit JavaScript zu experimentieren, schließlich werden die Skripts letzten Endes im Browser ausgeführt. Deshalb benutzen die meisten Entwickler hierfür bereits die Webkonsole oder die Firebug-Erweiterung. Auch wenn diese Tools mittlerweile mehrzeilige Kommandos unterstützen (Webkonsole: Shift + Enter; Firebug über eine Option) sind diese doch eher für einzeilige Kommandos ausgelegt.

Der Notizblock kommt gleich als eine Art Editor und nicht als Kommandozeilentool daher. Erreicht kann er über das Menü Web-Entwickler > Notizblock oder die Tastenkombination Shift + F4 werden. Nach dem Öffnen stehen im Textfeld direkt ein paar Hinweise zur Benutzung in Form eines Kommentars. In diesem Textfeld kann dann entweder Code eingegeben werden oder man importiert gleich eine ganze Script-Datei. Auch ist es möglich, die eingegebenen Zeilen direkt in einer Datei zu speichern.

Um den Code zu verarbeiten, gibt es drei Möglichkeiten. Die erste Möglichkeit ist das Ausführen (Strg + R). Hier wird das Script direkt auf die derzeit aktive Seite angewendet. Wählt man Untersuchen (Strg + I) wird zusätzlich der Objekt-Inspektor auf das Resultat angewendet. Die dritte Möglichkeit ist Anzeigen (Strg + L). In diesem Fall erscheint nach dem Ausführen das Ergebnis als Kommentar am Ende des Textfeldes. Fehler im Script werden dabei immer in der Webkonsole angezeigt. Das Kommando bezieht sich immer auf den gesamten Editor-Inhalt, man kann aber auch bestimmte Zeilen markieren und dann eines der Kommandos ausführen, dann werden nur die markierten Zeilen berücksichtigt. Der Editor ist dabei ein Extra-Fenster, so dass der Inhalt auf verschiedene Seiten angewendet werden kann. Beispielsweise kann man so Änderungen direkt auf dem Test- und auf dem produktiven Server testen, indem man einfach den Tab wechselt und dann das Script erneut ausführt.

Durch den Notizblock ist es nicht mehr notwendig, direkt auf der Seite das JavaScript zu bearbeiten, jedes mal wieder die bearbeitete Datei hochzuladen und anschließend die Seite neu zu laden, wenn es ein Problem mit einer Funktion gibt. Stattdessen kopiert man sich die entsprechende Funktion in das Editorfenster, ändert diese entsprechend und führt die Funktion zu Testzwecken dann einfach noch einmal aus, ohne die ganze Seite neu laden zu müssen.

Das Scratchpad kann aber nicht nur für Webseiten, sondern auch für Firefox selbst bzw. Erweiterungen für Firefox benutzt werden. Um diesem den Zugriff zu erlauben, muss vorher via about:config der Schalter devtools.chrome.enabled auf true gesetzt werden, anschließend kann im Scratchpad bei Umgebung von Inhalt auf Browser umgestellt werden.

Mit Firefox 6 ist die Entwicklung an diesem Werkzeug noch nicht abgeschlossen. Mit Firefox 8 erhält der Notizblock den Orion-Editor, allerdings standardmäßig noch deaktiviert. Über about:config kann dieser aktiviert werden, dazu muss devtools.editor.component auf orion gestellt werden. Ab Firefox 9 wird Orion auch per Standard aktiv sein. Orion bringt unter anderem  Zeilennummern und Syntax Highlighting, so dass sich noch leichter mit dem Code arbeiten lässt. Weitere Verbesserungen wie das sessionübergreifende Speichern des Inhaltes sind geplant.

Das folgende Video zeigt ein einfaches Anwendungsbeispiel in der Entwicklerversion von Firefox 8 mit aktiviertem Orion-Editor.