Erstellen und Ausführen einer JavaScript-Datei in Chrome

Um JavaScript in Chrome auszuführen, können Sie für ein kurzes Experiment auf der aktuellen Seite ein DevTools-Snippet verwenden oder den Code in einer .js-Datei speichern und von einer lokalen Webseite laden. Node.js führt JavaScript außerhalb des Browsers aus. Express kann eine Seite bereitstellen, die Ihre Datei lädt und die Chrome anschließend als browserseitigen Code ausführt.

JavaScript-Datei mit Chrome DevTools erstellen und ausführen

Öffnen Sie eine Seite in Chrome und öffnen Sie die DevTools mit F12 oder per Rechtsklick auf die Seite und Auswahl von Inspect. Wählen Sie den Bereich Sources und anschließend Snippets. Je nach Chrome-Version oder Sprache können die Bezeichnung oder die Position des Bereichs abweichen. Falls Snippets nicht angezeigt wird, sehen Sie im Überlaufmenü des Bereichs nach. Wählen Sie New snippet, geben Sie einen Namen ein und fügen Sie JavaScript ein.

Dieses Snippet verwendet das Dokument der aktuellen Seite. Es fügt eine Überschrift hinzu und gibt eine Meldung in der DevTools-Konsole aus:

if (typeof document !== 'undefined') {
  const heading = document.createElement('h1');
  heading.textContent = "This is the current webpage";
  document.body.prepend(heading);
}
console.log('Snippet finished');

Die aufgezeichnete Laufzeitausgabe lautet; die Meldung „Snippet finished“ bleibt im unveränderten Beispiel auf Englisch:

Snippet finished

Führen Sie das Snippet unter Windows oder Linux mit Ctrl+Enter und unter macOS mit Command+Enter aus. Die Überschrift erscheint oben auf der geöffneten Seite, die Meldung in der Konsole. Ein Snippet eignet sich, um Code auf dieser Seite auszuprobieren, ist aber keine Projektdatei, die Sie ordnen und unabhängig ausführen können. Chrome kann Snippets zwischen Sitzungen behalten; beim Schließen des Browsers werden sie also nicht zwangsläufig gelöscht. Bewahren Sie den Quellcode für ein dauerhaftes Projekt zusätzlich in einer eigenen Datei auf.

JavaScript-Datei mit Node.js und Express in Chrome ausführen

Node.js führt Code in der Node-Umgebung aus; es führt keinen Browsercode innerhalb von Chrome aus. Um ein gespeichertes Browserskript in Chrome anzuzeigen, stellen Sie eine Webseite bereit, die es lädt. Installieren Sie Node.js von der offiziellen Node.js-Website, erstellen Sie ein Projektverzeichnis und öffnen Sie dort ein Terminal. Führen Sie zuerst npm init -y und anschließend npm install express aus.

Erstellen Sie ein Unterverzeichnis namens public. Speichern Sie den folgenden Inhalt als public/index.html; die Datei lädt das Browserskript aus demselben Verzeichnis:

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Local JavaScript example</title></head>
<body>
  <script src="/app.js"></script>
</body>
</html>

Speichern Sie das obige JavaScript-Beispiel als public/app.js. Erstellen Sie im Projektverzeichnis die Datei server.js mit folgender Express-Konfiguration: const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.listen(4000);. Diese Express-Konfiguration wird hier beschrieben, wurde aber in den bereitgestellten Laufzeitnachweisen nicht ausgeführt. Starten Sie den Server im Projektverzeichnis mit node server.js und öffnen Sie anschließend http://localhost:4000/ in Chrome. Der Browser lädt app.js; die Datei fügt die Überschrift hinzu und gibt die Meldung aus. Öffnen Sie die DevTools und wählen Sie die Konsole dieser Seite, um die Meldung zu sehen. Im Terminal läuft server.js, nicht app.js als Browsercode. Port 4000 ist nur ein Beispiel. Falls er bereits belegt ist, wählen Sie einen freien Port und verwenden Sie ihn sowohl in app.listen(...) als auch in der URL.