Scratchpad / Notizblock

Veröffentlicht: 18. August 2011 in Web
Schlagwörter:, , , , , , , , ,

In Firefox 6 hat mal wieder ein neues Spielzeug Einzug gefunden: das Scratchpad oder auf deutsch Notizblock. Scratchpad ist ein sehr mächtiges Tool für Entwickler, da direkt JavaScript interpretiert werden kann.

Scratchpad

Aufruf von Scratchpad über das Menü

Im Gegensatz zu Firebug ist der Entwickler dabei nicht mehr nur auf eine Kommandozeile beschränkt (ja ich weiß, in neueren Version kann auch in Firebug mehr als eine Zeile Code eingegeben werden ;-) ). Das ist jedoch nicht der einzigste Vorteil. Der Entwickler kann zudem auch Elemente der aktuellen Webseite erfassen und manipulieren.

Scratchpad-2

Manipulieren von Webseiten Inhalten

Wie in dem Beispiel zu sehen ist, kann das DOM-Element mit der ID “header” wie sonst üblich erfasst und manipuliert werden. Das ist eine interessante Art neuen JavaScript Code an einer bestehenden Webseite zu testen ohne neue Inhalte hochzuladen. Sicherlich ging das bisher auch schon über Firebug, jedoch ist Scratchpad noch einen Tick komfortabler, da komplette JavaScript Dateien geladen/gespeichert werden können.

Vor kurzem habe ich einen Interessanten Artikel über einen verbesserten typeof Operator in JavaScript von Angus Croll gelesen (siehe Link). Um das Problem selbst zu testen hätte ich den Code in Firebug oder in meine IDE eintippen können. Dank Scratchpad konnte ich kurz direkt im Browser das Problem und die Lösung testen.

Scratchpad-3

Javascript Code direkt in Scratchpad interpretieren

Sehr komfortabel ist auch, dass Code ausgewählt, direkt ausgeführt (Win: STRG + R) und das Ergebnis direkt ausgegeben werden kann (Win: STRG + L). Zusätzlich kann das zurückgelieferte Ergebnis direkt analysiert werden (Win: STRG + I). Das Verhalten erinnert mich sehr an SmallTalk, da das dort Bestandteil der Entwicklungsumgebung ist ;-)

Die Beispiele geben einen kurzen Einblick, was mit dem neuen Entwickler-Tool möglich ist. Rob Campbell hat ein Video erstellt, indem er ein Canvas Element direkt in einer Webseite manipuliert.

About these ads

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ photo

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s