Verwenden Sie unsere experimentelle Funktion, um eine Debugsitzung in Chrome DevTools zu öffnen und serverseitige Geschäftsobjekte debuggen zu können.
Verwenden Sie alle bekannten Funktionen wie Haltepunkte und Watchpoints, um das Debuggen Ihres Codes in vollem Umfang zu nutzen.
Vorbereitung der Einrichtung
Stellen Sie sicher, dass Ihr Reverse Proxy korrekt konfiguriert ist, um TLS auch für den exponierten Debug-Port zu beenden und Anfragen und Websocket-Verbindungen an den internen Debug-Port weiterzuleiten.
Auf lokal ausgeführten Instanzen sollten Sie in der Lage sein, das Debugging von Server-Side Business Objects direkt zu nutzen.
Hinzufügen von Variablen zu Ihrer .env-Datei
Fügen Sie die erforderlichen Variablen zu Ihrer vorhandenen .env-Datei hinzu
# Variablen für das SSBO-Debugging
# Der Simplifier Host sollte als Standard ausreichen.
DEBUG_CHROME_DEV_TOOLS_EXPOSED_HOST=${SIMPLIFIER_HOSTNAME}
DEBUG_CHROME_DEV_TOOLS_PORT=2992
# Der exponierte Anschluss ist normalerweise derselbe wie der interne Anschluss.
DEBUG_CHROME_DEV_TOOLS_EXPOSED_PORT=${DEBUG_CHROME_DEV_TOOLS_PORT}
# Bestimmt, ob das dev-tools-Link-Protokoll (true liefert wss, false oder etwas anderes liefert ws)
DEBUG_CHROME_DEV_TOOLS_USE_EXTERNAL_TLS=true
#Feature Flags
FEATURE_SSBO_JS_DEBUGGING=true
Die Variablen werden in der folgenden Tabelle erläutert:
| Variable | Beschreibung | Standardwert |
|---|---|---|
FEATURE_SSBO_JS_DEBUGGING |
(De-)Aktiviert das Debugging von Server-Side Business Objects [true | false] |
FALSCH |
DEBUG_CHROME_DEV_TOOLS_EXPOSED_HOST |
Host, der zum Herstellen einer Verbindung über Chrome DevTools verwendet werden soll |
127.0.0.1 |
DEBUG_CHROME_DEV_TOOLS_PORT |
Port, der für die Verbindung von Chrome DevTools verwendet wird |
2992 |
DEBUG_CHROME_DEV_TOOLS_EXPOSED_PORT |
Port, der im bereitgestellten Link zum Öffnen der Debugger-Sitzung in Chrome DevTools verwendet wird Achtung: Nur verwenden, wenn der interne Port nicht für den Zugriff über Chrome DevTools geöffnet ist |
9229 |
DEBUG_CHROME_DEV_TOOLS_USE_EXTERNAL_TLS |
Ermitteln, ob der Chrome-Debugger eine Verbindung über WS (Websocket) oder WSS (Websocket Secure) herstellt |
STIMMT |
Bereiten Sie Ihre Docker-Compose-Datei vor
Fügen Sie dem Vereinfachungscontainer in der docker-compose.yml Datei die folgenden Bezeichnungen hinzu
- DEBUG_CHROME_DEV_TOOLS_EXPOSED_HOST=${DEBUG_CHROME_DEV_TOOLS_EXPOSED_HOST}
- DEBUG_CHROME_DEV_TOOLS_EXPOSED_PORT=${DEBUG_CHROME_DEV_TOOLS_EXPOSED_PORT}
- DEBUG_CHROME_DEV_TOOLS_PORT=${DEBUG_CHROME_DEV_TOOLS_PORT}
- DEBUG_CHROME_DEV_TOOLS_USE_EXTERNAL_TLS=${DEBUG_CHROME_DEV_TOOLS_USE_EXTERNAL_TLS}
- FEATURE_SSBO_JS_DEBUGGING=true
Fügen Sie dem traefik-Proxy-Container in der Datei docker-compose.yml die folgenden Bezeichnungen hinzu
# Zweiter Router
- "traefik.tcp.routers.ws-debugging.rule=HostSNI(`*`)"
- "traefik.tcp.routers.ws-debugging.entrypoints=debugging"
- "traefik.tcp.routers.ws-debugging.tls=true"
- "traefik.tcp.routers.ws-debugging.service=ws-debugging"
# Dienste
# Dies ist erforderlich, damit Chrome Dev-Tools eine Verbindung zum Simplifier herstellen kann
- "traefik.tcp.services.ws-debugging.loadbalancer.server.port=${DEBUG_CHROME_DEV_TOOLS_EXPOSED_PORT}"
Fügen Sie dem Traefik-Proxy-Container in der Datei docker-compose.yml die folgenden Befehle hinzu:
- --entrypoints.debugging.address=:${DEBUG_CHROME_DEV_TOOLS_EXPOSED_PORT}
- --entryPoints.debugging.transport.respondingTimeouts.readTimeout=60
- --entryPoints.debugging.transport.respondingTimeouts.idleTimeout=180
Fügen Sie dem traefik-Proxy-Container in der Datei docker-compose.yml den folgenden Port hinzu
:
- ${DEBUG_CHROME_DEV_TOOLS_EXPOSED_PORT}:${DEBUG_CHROME_DEV_TOOLS_PORT}
Ein vollständiges Beispiel finden Sie hier auf github
: Nachdem Sie die Änderungen gespeichert haben, müssen Sie das docker-compose-Setup neu erstellen, um alle Änderungen zu übernehmen.
Öffnen der Debug-Sitzung
Sobald das Feature aktiviert ist, wird im Testmodus eine Schaltfläche Debug Ihrer Funktionen von Server-Side Business Objects angezeigt.
Drücken Sie die Taste , um Ihre Debug-Sitzung zu starten.
Verwenden Sie den angegebenen Link, um Ihre Debug-Sitzung in Chrome DevTools zu öffnen:
- Manuelles Kopieren der Linkadresse in die Zwischenablage
- Eine neue Browser-Registerkarte oder ein neues Fenster öffnen
- Öffnen Sie die Chrome-Entwicklerwerkzeuge, indem Sie F12 drücken oder aus dem Menü “Weitere Werkzeuge” auswählen. > “Entwicklertools”
- Fügen Sie den kopierten Link in die Adressleiste des Browsers ein
Status des Sitzungskontexts
Der aktuelle Status des Debugging-Kontextes wird im Ergebnisfenster angezeigt. Dieser wird zur Visualisierung verwendet.
Hinweis: Wenn Sie mehrere Debug-Sitzungen öffnen, wird der Status der zuletzt geöffneten Sitzung angezeigt.
| Status | Angezeigter Text | Bemerkungen |
|---|---|---|
|
Initialisierung |
Debuggen der Initialisierung von Sitzungen, |
– |
|
Offene Sitzung |
Debugging-Sitzung für id: [UUID der Sitzung] läuft. |
Es kann nur angezeigt werden, dass die Sitzung geöffnet ist, nicht aber, ob Chrome DevTools eine Verbindung dazu hergestellt hat |
|
Abschlusssitzung |
Debugging-Sitzung für id: [UUID der Sitzung] wird geschlossen. |
– |
Schließen der Debugsitzung
Sie können die Debug-Sitzung schließen, indem Sie auf die x-Schaltfläche im Infobereich der Debug-Sitzung klicken.
Werden die Chrome Dev Tools nicht innerhalb weniger Minuten über den Link geöffnet, wird der Debug-Kontext automatisch geschlossen.
Hinweise zur Verwendung von Chrome DevTools
Nach einem Klick auf den Link öffnet sich das Chrome DevTool, in dem das Debugging möglich ist.
Die erste Funktion ist eine anonyme Funktion, die durch 4-maliges Überspringen des Schrittes (F10) übersprungen werden kann. Die Tatsache, dass die anonyme Funktion zuerst aufgerufen wird, ist auf die GraalVM-Implementierung zurückzuführen. Es gibt derzeit keine bekannte Möglichkeit, diese Tatsache zu umgehen.
Die eigentliche Funktion wird nun angezeigt und Sie können in Chrome DevTools debuggen.
Nach Abschluss wird die Verbindung zur GraalVM-Instanz getrennt und die Funktion wie gewohnt ausgeführt.
