JavaScript-Umgebung

Das Werkzeug „JavaScript-Umgebung“ bietet eine Umgebung zum Experimentieren mit JavaScript-Quelltext. Sie können Quelltext schreiben und testen, der mit den Inhalten der Webseite interagiert und dann zu Ihren gewohnten Entwicklungwerkzeugen wechseln, wo Sie Ihre Arbeit verfeinern und fertigstellen.

Anders als die Web-Konsole, die nur eine Zeile Quelltext auf einmal interpretieren soll, können Sie mit der JavaScript-Umgebung größere Blöcke JavaScript-Quelltext bearbeiten und in dann auf vielfältige Weise ausführen, je nachdem, wie Sie das Ergebnis verwenden möchten.

Verwenden der JavaScript-Umgebung

Um ein Fenster der JavaScript-Umgebung zu öffnen, drücken Sie Umschalt+F4 oder öffnen Sie das Menü „Web-Entwickler“ (dieses ist unter Mac OS X und Linux ein Untermenü des Menüs „Extras“) und wählen Sie „JavaScript-Umgebung“. Dies öffnet ein Editorfenster der JavaScript-Umgebung mit einem Kommentar, der einige kurze Hinweise zur Verwendung der JavaScript-Umgebung liefert. Von dort aus können Sie direkt JavaScript-Quelltext eingeben und ausprobieren.

Das Fenster der JavaScript-Umgebung sieht ungefähr so aus (unter Mac OS X ist die Menüleiste am oberen Bildschirmrand):

Unter Verwenden des Quelltext-Editors finden Sie eine Dokumentation zum Editor selbst, einschließlich nützlicher Tastaturkürzel.

Im Datei-Menü finden Sie Optionen zum Speichern und Laden von Ausschnitten von JavaScript-Quelltext, so dass Sie Quelltext bei Gefallen später wiederverwenden können.

Ausführen Ihres Quelltexts

Sobald Sie Ihren Quelltext geschrieben haben, wählen Sie den Quelltext aus, den Sie ausführen möchten. Wenn Sie nichts auswählen, wird der gesamte Quelltext im Fenster ausgeführt. Klicken Sie dann mit der rechten Maustaste (oder verwenden Sie das Menü „Ausführen“ in der Menüleiste) und wählen Sie, wie Ihr Quelltext ausgewählt werden soll. Es gibt vier Möglichkeiten zur Ausführung.

Ausführen

Wenn Sie die Option „Ausführen“ wählen, wird der gewählte Quelltext ausgeführt. Dies können Sie verwenden, wenn Sie eine Funktion oder Quelltext ausführen möchten, der den Inhalt Ihrer Seite verändert, ohne dass Sie das Ergebnis sehen müssen.

Untersuchen

Mit der Option „Untersuchen“ wird der Quelltext ebenso ausgeführt wie bei der Option „Ausführen“; anschließend wird allerdings ein Objektinspektor geöffnet, mit dem Sie den Ergebniswert untersuchen können.

Wenn Sie beispielsweise diesen Quelltext eingeben:

window

und dann „Untersuchen“ wählen, öffnet sich der Objektinspektor und zeigt etwas dies:

Anzeigen

Die Option „Anzeigen“ führt den gewählen Quelltext aus und fügt das Ergebnis direkt als Kommentar in das Editor-Fenster Ihrer JavaScript-Umgebung ein. Dies ist ein bequemer weg, um während Ihrer Arbeit ein fortlaufendes Protokoll Ihrer Testergebnisse zu erstellen. Zur Not können Sie dies auch als Taschenrechner verwenden, aber wenn Sie schon kein besseres Taschenrechnerprogramm haben, haben Sie vielleicht größere Probleme.

Neu laden und ausführen

Die Option „Neu laden und ausführen“ lädt erst die Seite neu und fürt dann den Quelltext aus, wenn das „load“-Ereignis der Seite ausgelöst wird. Dies ist hilfreich, wenn der Quelltext in einer sauberen Umgebung ausgeführt werden soll.

Wann ist es sinnvoll, Scratchpad zu benutzen?

Es gibt viele Möglichkeiten, die JavaScript-Umgebung sinnvoll einzusetzen. In diesem Abschnitt finden Sie einige davon.

Testen von neuem Quelltext

Die JavaScript-Umgebung ist besonders nützlich, um neuen Quelltext in einer laufenden Browser-Umgebung zu testen; Sie können den Quelltext, den Sie debuggen, in die JavaScript-Umgebung kopieren, ihn ausführen und dann anpassen, bis er funktioniert. Sobald er funktioniert, kopieren Sie ihn wieder in die Hauptdatei Ihres Quelltexts und schon sind Sie fertig. Oftmals können Sie Ihren Quelltext schreiben, debuggen und testen, ohne jemals die Seite zu laden zu müssen.

Wiederverwendbare Quelltext-Ausschnitte

Die Menüleiste der JavaScript-Umgebung bietet Befehle zum Speichern und Laden von JavaScript-Quelltext. Dies kann genutzt werden, um Teile von JavaScript-Quelltext aufzubewahren, den Sie häufig verwenden. Wenn Sie beispielsweise an einer Website arbeiten, die Daten mit AJAX-Anfragen lädt, können Sie Ausschnitte aufbewahren, die diese Ladeoperationen ausführen, um die Daten zu testen oder zu verifizieren. Ebenso können Sie hilfreiche allgemeine Debugging-Funktionen aufbewahren, wie solche, die bestimmte Arten von Informationen über das DOM liefern.

Umgebung der JavaScript-Umgebung

Quelltext, den Sie in der JavaScript-Umgebung ausführen, wird in der globalen Umgebung des zum Zeitpunkt der Ausführung gewählten Tabs ausgeführt. Variablen, die Sie außerhalb einer Funktion deklarieren, werden dem globalen Objekt für diesen Tab hinzugefügt.

Verwenden der JavaScript-Umgebung zum Zugriff auf Firefox-interne Funktionen

Wenn Sie an Firefox selbst arbeiten oder Add-ons entwickeln, finden Sie es möglicherweise hilfreich, über die JavaScript-Umgebung auf alle internen Funktionen des Browsers zuzugreifen. Um dies zu tun, müssen Sie in about:config die Einstellung devtools.chrome.enabled auf true setzen. Sobald dies geschehen ist, hat das Menü der Umgebung eine Option „Browser“; sobald Sie diese aktiviert haben, ist Ihre Umgebung nicht mehr nur der Inhalt der Seite, sondern der gesamte Browser.

Tastaturkürzel

JavaScript-Umgebung

Tastaturkürzel des Quelltext-Editors

In dieser Tabelle befinden sich die Standardtastaturkürzel für den Quelltext-Editor.

Ab Firefox 29 können stattdessen Vim- oder Emacs-Tastaturkürzel verwendet werden. Um diese auszuwählen, öffnen Sie about:config, wählen Sie die Einstellung devtools.editor.keymap und weisen Sie ihr den Wert „vim“ oder „emacs“ zu. Wenn Sie dies tun, werden die ausgewählten Tastaturkürzel für alle Entwicklerwerkzeuge verwendet, die den Quelltext-Editor nutzen.