Mit der Browser-Konsole arbeiten

Mit der Browser-Konsole arbeiten

Moderne Web-Browser sind mit einer Vielzahl wertvoller Tools ausgestattet, die es Designern und Entwicklern ermöglichen, alle Arten von Fehlern auf Webseiten oder in Web-Anwendungen zu finden und zu analysieren. Für gewöhnlich sind diese Tools über einen Menüpunkt wie „Web-Entwickler“, „Entwickler-Tools“ o.ä. erreichbar.

Eines der verfügbaren Tools ist die Browser-Konsole, die manchmal auch als „Web-Konsole“ oder „JavaScript-Konsole“ bezeichnet wird. Mit ihr kann man unter anderem die Ausgaben von console.log()-Aufrufen lesen, um beispielsweise Fehlermeldungen auf den Grund zu gehen. Vor allem aber ermöglicht sie es, JavaScript-Code auszuführen.

Bei einer auf Scrivito basierenden Applikation kann man das JavaScript-SDK in der Konsole nutzen, um Inhalte zu ermitteln oder zu ändern, Massenoperationen durchzuführen, die App zu testen und vieles mehr. Es gibt jedoch eine Bedingung, die zunächst erfüllt sein muss. Starten Sie Ihre App, öffnen Sie die Browser-Konsole, und führen Sie Folgendes aus:

Höchstwahrscheinlich wird Ihnen jetzt eine Fehlermeldung angezeigt, die besagt, dass das Anwendungsfenster nicht ausgewählt wurde: „Are you trying to access the Scrivito API? Switch your JavaScript console to the application frame first.“

Das Anwendungsfenster auswählen

Wenn die Scrivito-Leisten, d.h. die Elemente der Benutzerschnittstelle angezeigt werden, befinden diese sich im obersten Frame. Wählen Sie zuerst also scrivito_application als Kontext aus.

Um in der Konsole Inhalte anlegen oder ändern zu können, stellen Sie bitte sicher, dass

  • Sie als CMS-Benutzer angemeldet sind,
  • die zu verwendende Arbeitskopie ausgewählt ist
  • sowie die Benutzerschnittstelle sich im „Bearbeiten“-Modus befindet.

Probieren Sie nun diese Anweisung aus, und beobachten Sie, wie sich das ausgewählte Navigationselement der Seite ändert:

Bei einer Scrivito-basierten Anwendung finden Sie die Attribute jedes Objekt- oder Widget-Typs in dessen Dateien „*ObjClass.js“ bzw. „*WidgetClass.js“ in den Unterverzeichnissen von „src/Objs“ bzw. „src/Widgets“. Im obigen Beispiel haben wir das title-Attribut der aktuellen Seite geändert.

Scrivito als globale Variable verfügbar machen

Um in der Browser-Konsole leichter auf das API des Scrivito SDK zugreifen zu können, kann das entsprechende JS-Objekt einer globalen Variablen zugewiesen werden. In einer bestehenden Anwendung wie der Example App ist dies wahrscheinlich bereits der Fall. Richtet man jedoch eine Applikation von Grund auf neu ein, empfiehlt es sich, an diesen Schritt zu denken.

Typischerweise wird Scrivitos SDK-API als ein NPM-Paket in die Applikation importiert. Es kann dann einer globalen Variablen des Browserfensters zugewiesen werden:

Anschließend kann man einfach die Klasse Scrivito verwenden, um beispielsweise Anweisungen auszuführen. Bei der Scrivito Example App wird die obige Zuweisung in der Datei „Globals.js“ vorgenommen.

CMS-Objektdaten werden asynchron geladen

Das Scrivito-SDK lädt CMS-Inhalte asynchron, wodurch Objekte und Widgets undefiniert sein können, wenn deren Daten noch nicht verfügbar sind. Führen Sie einmal Folgendes aus, um die Anzahl der Page-Objekte in Ihrem CMS zu ermitteln:

Wahrscheinlich führt dies beim ersten Aufruf zu der Fehlermeldung „Scrivito data not yet fully loaded“:

Wenn Sie in der Konsole auf Scrivito bezogene Aktionen durchführen möchten und sicherstellen müssen, dass alle CMS-Objektdaten geladen wurden, empfehlen wir, Scrivito.load zu verwenden. Scrivito.connect dagegen dient dazu, einzelne React-Komponenten einer App mit Scrivito zu verbinden 🇺🇸.

Scrivito.load verwenden

Damit Scrivito sich darum kümmert, die Inhalte zu laden, verwenden Sie einfach Scrivito.load in Verbindung mit await:

Als ein weiteres Beispiel ermittelt Folgendes die zehn zuletzt geänderten CMS-Objekte:

Etwas Schreibarbeit sparen

Sollten Sie die Browser-Konsole häufiger nutzen, um auf CMS-Inhalte zuzugreifen, kommen Sie mit der folgenden Anweisung in Ihrer Anwendung schneller ans Ziel:

Danach reicht die folgende kürzere Schreibweise ohne Scrivito:

Werfen Sie bitte auch einen Blick auf unser SDK Cheat Sheet 🇺🇸 mit zahlreichen Beispielen zum Gebrauch des APIs, oder nutzen Sie die ausführliche SDK-API-Dokumentation 🇺🇸!