So geht's: Die Debug-Konsole der App verwenden

Wenn du ein Webentwickler bist, bist du wahrscheinlich mit den Entwicklertools deines Browsers vertraut:

Es ist wahrscheinlich das wichtigste Werkzeug, um Fehler auf deiner Website zu beheben.

Mit webtoapp.design erstellte Apps funktionieren in der Regel sofort. Zumindest verhalten sie sich größtenteils so, wie sich deine Website in Chrome auf Android und Safari auf iOS verhält. Wenn deine Website dort gut funktioniert, solltest du also nicht auf allzu viele Probleme stoßen.

Dennoch kann es vorkommen, dass du ein unerwartetes Verhalten in deiner App untersuchen musst. In solchen Fällen kannst du die integrierte Konsole deiner App öffnen.

So öffnest du die Konsole

Das Öffnen der Konsole ist absichtlich versteckt, damit normale App-Nutzer sie nicht versehentlich öffnen und verwirrt sind. Aber selbst wenn sie darüber stolpern, können sie ihre App einfach schließen und erneut öffnen, um sie loszuwerden.

Öffnen der Konsole über den Einstellungsbildschirm

1. Beginne damit, die Einstellungen deiner App zu öffnen.
2. Klicke auf die Karte "Über".
3. Tippe doppelt auf das kleine Bild im Dialog, um die Entwicklerkonsole zu öffnen.
4. Du kannst jetzt den Dialog und die Einstellungen schließen und die Konsole verwenden, während du deine App durchsuchst.

Öffnen der Konsole über den Fehlerberichtsdialog

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

1. Öffne den Fehlerberichtsdialog, indem du dein Gerät schüttelst.
2. Tippe doppelt auf den Titel des Dialogs.
3. Du kannst jetzt den Dialog schließen und die Konsole verwenden, während du deine App durchsuchst.

Funktionen der App-Konsole

URL öffnen

Öffne eine beliebige Website, indem du die URL in den Dialog eingibst. Das kann nützlich sein, um zu geheimen (auf der Hauptwebsite gibt es keinen Link dazu) Testseiten oder Staging-Umgebungen zu navigieren, die du vielleicht hast.

JS ausführen

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

Eruda hinzufügen

Dies fügt eine kleine Schaltfläche hinzu, die die Eruda JavaScript-Konsole für die aktuelle Seite, die du betrachtest, öffnet. Sie bietet fast alle Funktionen, die du von der Browser-Konsole auf deinem Computer kennst, zum Beispiel den DOM-Baumelemente-Explorer. Du kannst mehr über Eruda in seinem GitHub-Projekt lesen.

Protokoll kopieren

Da die protokollierten Nachrichten manchmal etwas schwierig zu lesen und zu analysieren sind, kannst du mit dieser Schaltfläche den gesamten protokollierten Text kopieren, damit du ihn überall einfügen kannst. Du könntest ihn zum Beispiel auf deinen Computer schicken, wo du einen besseren Texteditor hast.