Anleitung: Die Debug-Konsole der App nutzen

Wenn du ein Webentwickler bist, bist du wahrscheinlich mit den Entwickler-Tools des Browsers vertraut:

Es ist wahrscheinlich das wichtigste Werkzeug zum Debuggen von Fehlern auf deiner Website.

Apps, die mit webtoapp.design erstellt wurden, funktionieren in der Regel sofort, zumindest verhalten sie sich größtenteils identisch wie deine Website in Chrome auf Android und Safari auf iOS. Wenn deine Website dort also gut funktioniert, solltest du nicht auf allzu viele Probleme stoßen.

Manchmal kann es jedoch vorkommen, dass du das Bedürfnis hast, ein unerwartetes Verhalten in deiner App zu untersuchen. Für solche Fälle kannst du die eingebaute Konsole deiner App öffnen.

Wie man die Konsole öffnet

Das Öffnen der Konsole ist absichtlich versteckt, damit normale App-Nutzer sie nicht versehentlich öffnen und verwirrt werden. Aber selbst wenn sie darauf stoßen, können sie einfach die App schließen und neu öffnen, um sie loszuwerden.

Öffnen der Konsole über den Einstellungsbildschirm

1. Beginne damit, die Einstellungen deiner App zu öffnen.
2. Klicke auf die "Über"-Karte.
3. Doppeltippe auf das kleine Bild im Dialog, um die Entwicklerkonsole zu öffnen.
4. Du kannst nun den Dialog und die Einstellungen schließen und die Konsole beim Durchsuchen deiner App verwenden.

Öffnen der Konsole über den Fehlerberichts-Dialog

Wenn deine App keine Möglichkeit hat, auf die Einstellungen zuzugreifen, kannst du die Konsole auch über den Diagnoseinformationsdialog öffnen:

1. Öffne den Fehlerberichts-Dialog, indem du dein Gerät schüttelst.
2. Doppeltippe auf den Titel des Dialogs.
3. Du kannst nun den Dialog schließen und die Konsole beim Durchsuchen deiner App verwenden.

Funktionen der App-Konsole

URL öffnen

Öffne jede Website, indem du die URL im Dialog eingibst. Dies kann nützlich sein, um zu geheimen (es gibt keinen Link dazu auf der Hauptwebsite) Testseiten oder Staging-Umgebungen zu navigieren, die du möglicherweise hast.

JS ausführen

Diese Funktion führt jedes eingegebene JavaScript aus und gibt das Ergebnis in der Konsole aus.

Eruda hinzufügen

Dies fügt einen kleinen Button hinzu, der die Eruda JavaScript-Konsole für die aktuelle Seite öffnet, die du ansiehst. Sie bietet fast alle Funktionen, die du von der Browserkonsole auf deinem Computer kennst, zum Beispiel den DOM-Elemente-Explorer. Du kannst mehr über Eruda in seinem GitHub-Projekt lesen.

Log kopieren

Da die protokollierten Nachrichten manchmal schwer zu lesen und zu analysieren sind, kannst du diesen Button verwenden, um den gesamten protokollierten Text zu kopieren, damit du ihn überall einfügen kannst, wo du möchtest. Zum Beispiel könntest du ihn an deinen Computer senden, wo du möglicherweise einen besseren Texteditor hast.