Debuggen der PWA Kit Apps

Fehler und Leistungsengpässe lassen sich bei der Entwicklung einer Web-App nicht vermeiden. Mit PWA Kit können Sie diesen Problemen mit einer Reihe von Tools und Methoden für eine eingehende Untersuchung Ihrer App auf den Grund gehen.

Bevor Sie die gezielteren Ratschläge dieser Anleitung befolgen, probieren Sie es zuerst mit diesen allgemeinen Schritten zur Fehlerbehebung:

  • Vergewissern Sie sich, dass Sie eine unterstützte Version von Node verwenden (siehe Anleitung Erste Schritte), bevor Sie Ihren lokalen Entwicklungsserver starten.
  • Bestätigen Sie, dass der Entwicklungsserver weiterhin läuft und der Port nicht von einem anderen Prozess genutzt wird.
  • Bestätigen Sie nach einer Codeänderung, dass die Meldung HTTP development server listening im Terminal angezeigt wird, bevor Sie Ihren Browser neu laden.
  • Achten Sie sowohl in der Browserkonsole als auch im Terminal auf Fehler.
  • Suchen Sie unter Verwendung der Entwickler-Tools Ihres Browsers nach Netzwerk-Fehlermeldungen. (In den Chrome DevTools verwenden Sie dazu die Registerkarte Network (Netzwerk).)
  • Führen Sie einen Code-Formatierer und einen Linter aus, um Syntax- und Tippfehler zu finden. Die Retail React App stellt Konfigurationsdateien sowohl für Prettier (Code-Formatierer) als auch für ESLint (Linter) bereit.
  • Überprüfen Sie die Virenschutz- und Firewall-Einstellungen Ihres Computers auf alle Probleme, die die Ausführung von Code verhindern oder Netzwerkanfragen blockieren.
  • Identifizieren und analysieren Sie Probleme mit dem Profiler der Chrome DevTools. Weitere Informationen finden Sie in dieser Anleitung von Google: Analyze Runtime Performance (Laufzeit-Performance analysieren). Sie können auch die Chrome-Erweiterung React Developer Tools installieren, um eine zusätzliche Profiler-Registerkarte mit ähnlichen Informationen auf Komponentenebene zu erhalten.

Es gibt zwei spezielle Abfrageparameter, die Sie allen von Ihrer Commerce App bereitgestellten URLs hinzufügen können, um Probleme mit serverseitigem Code leichter zu debuggen.

Der Abfrageparameter __server_only stoppt die Hydration, sodass die Seite in Ihrem Browser genauso aussieht wie nach dem serverseitigen Rendering. Diese serverseitig gerenderte Seitenversion unterstützt Sie nicht nur bei der Behebung von beim serverseitigen Rendering aufgetretenen Fehlern, sondern auch bei der Suchmaschinenoptimierung, da Suchmaschinen diese Version der Seite durchsuchen.

Der Abfrageparameter __pretty_print formatiert das Objekt __PRELOADED_STATE__, damit es einfacher zu lesen ist. Dieses Objekt liefert einen Snapshot des Zustands Ihrer Anwendung vor Beginn der Hydration. So können Sie beim Debugging feststellen, ob die erwarteten Werte verwendet werden. Sie können sich die Inhalte des Objekts anzeigen lassen, indem Sie Ihre App laden, den Seitenquelltext aufrufen und nach __PRELOADED_STATE__ suchen.

Das Objekt __PRELOADED_STATE__ befindet sich in einem <script>-Tag im HTML-Seitenquelltext, das beim serverseitigen Start Ihrer App angefordert wurde. Das Objekt __PRELOADED_STATE__ enthält von der Funktion getProps zurückgegebene serialisierte Werte (einschließlich der Versionen von getProps, die an die _app-Komponente und die Seitenkomponente angehängt sind).

Standardmäßig zeigt der App-Server Konsolenmeldungen im Terminal an. Es ist jedoch nicht möglich, die Ausführung des Codes zu beobachten. Dies kann das Debuggen des Codes, der die Seiten serverseitig (oder auf Ihrem lokalen Rechner) rendert, erschweren.

Für erweitertes Debugging können Sie Ihren lokalen Entwicklungsserver über einen alternativen Befehl starten, der einen Inspektionsprozess in Node ausführt, an den sich ein Debugger anhängen kann. (Nähere Details finden Sie in der Node-Dokumentation.)

Sie können den in vielen gängigen Browsern und Texteditoren inbegriffenen Debugger an den Node-Inspektionsprozess anhängen. Hier finden Sie die entsprechenden Anleitungen für Google Chrome und Visual Studio Code.

  1. Öffnen Sie ein Terminal.
  2. Rufen Sie Ihr Projektverzeichnis auf.
  3. Starten Sie Ihren lokalen Dev-Server mit npm run start:inspect.
  4. Zur Bestätigung, dass der Debugger zugeschaltet ist, sollte in der Terminalausgabe die Meldung "Debugger listening" (Debugger hört zu) angezeigt werden.
  5. Öffnen Sie Chrome und geben Sie die URL chrome://inspect ein.
  6. Klicken Sie auf Open dedicated DevTools for Node (Dedizierte DevTools für Node öffnen).
  7. DevTools wird in einem neuen Fenster geöffnet.
  8. Zur Bestätigung, dass der Debugger angehängt ist, sollte in der Terminalausgabe die Meldung "Debugger attached" (Debugger angehängt) angezeigt werden.
  9. Legen Sie Umschaltpunkte fest, fügen Sie debugger-Anweisungen hinzu und so weiter.
  10. Laden Sie eine Seite von Ihrem lokalen Entwicklungsserver in Chrome.
  11. Verwenden Sie das dedizierte Fenster für das Debugging.

Jetzt können Sie die Ausführung Ihres serverseitigen Codes nachverfolgen.

Um mehr über das Debuggen mit Umschaltpunkten in den DevTools zu erfahren, lesen Sie diese Anleitung von Google: Debug JavaScript (JavaScript debuggen).

  1. Öffnen Sie Ihre Projektdateien in Visual Studio Code.
  2. Klicken Sie in der Menüleiste auf Terminal > New Terminal (Terminal > Neues Terminal).
  3. Starten Sie Ihren lokalen Dev-Server mit npm run start:inspect.
  4. Öffnen Sie die Befehlspalette. Tastenkürzel für Windows: Ctrl + Shift + P. Tastenkürzel für Mac: Command + Shift + P.
  5. Geben Sie den folgenden Befehl ein: “Debug: Attach to Node Process” (Debuggen: An Node-Prozess anhängen).
  6. Eine Liste mit den Node-Prozessen wird angezeigt. Wählen Sie den ersten Prozess in der Liste aus.
  7. Zur Bestätigung, dass der Debugger angehängt ist, sollte in der Terminalausgabe die Meldung "Debugger attached" (Debugger angehängt) angezeigt werden.
  8. Legen Sie Umschaltpunkte fest, fügen Sie Debugger-Anweisungen hinzu und so weiter.
  9. Laden Sie eine Seite von Ihrem lokalen Entwicklungsserver in Ihren Webbrowser.
  10. Verwenden Sie fürs Debuggen den in Visual Studio Code integrierten Debugger.

Jetzt können Sie die Ausführung Ihres serverseitigen Codes in Visual Studio Code nachverfolgen.

Damit Sie den Node-Prozess nicht wiederholt anhängen müssen, öffnen Sie die Befehlspalette und geben Sie Folgendes ein: "Debug: Toggle Auto Attach" (Debuggen: Automatisches Anhängen umschalten). Setzen Sie die Einstellung auf Always (Immer) und starten Sie Ihren lokalen Dev-Server im Visual Studio Code-Terminal neu.

Für auf Managed Runtime bereitgestellte Anwendungen wird Remote-Debugging nicht unterstützt. Sie können jedoch Logs für alle Managed Runtime-Umgebungen in Echtzeit verfolgen, um eventuelle serverseitige Fehler zu diagnostizieren.

Für die Verfolgung von Logs über die Befehlszeile gibt es zwei Möglichkeiten.

Wenn Sie innerhalb eines PWA Kit-Projekts arbeiten, das mit einer Version ab 2.4.1 generiert wurde, können Sie Folgendes tun:

  • Hilfe für den Logs-Befehl anzeigen: npm run tail-logs -- --help
  • Logs für ein bestimmtes Projekt und eine bestimmte Umgebung verfolgen: npm run tail-logs -- --environment $ENV_ID

Die zusätzlichen Zeichen -- in den obigen Befehlen sind erforderlich.

Wenn Sie außerhalb eines PWA Kit-Projekts arbeiten oder ein Projekt haben, das mit einer Version vor 2.4.1 generiert wurde, können Sie mit npx Folgendes tun:

  • Hilfe für den Logs-Befehl anzeigen: npx @salesforce/pwa-kit-dev tail-logs --help
  • Logs für eine bestimmte Umgebungs- und Projekt-ID in Echtzeit verfolgen: npx @salesforce/pwa-kit-dev tail-logs --environment $ENV_ID --project $PROJ_ID

Anstatt der Argumente --environment und --project können Sie auch die verkürzten Argumente -e und -p verwenden.

Bei der Verfolgung von Protokollen sind die folgenden Einschränkungen zu beachten:

  • Alle Log Tailing-Sessions werden nach 60 Minuten beendet.
  • Jede Umgebung kann – unabhängig von der Anzahl der aktiven Benutzer – maximal 100 aktive Log Tailing-Sessions gleichzeitig unterstützen.
  • Für das Log Tailing sind Entwickler- oder Administratorrechte für das Managed Runtime-Projekt erforderlich.