Debugging für JavaScript-Anwendungen (Cordova-Anwendungen, Webanwendungen)

Übersicht

Beim Debugging geht es darum, die Ursache von Fehler im applikativen Code und auf der Benutzerschnittstelle der Anwendung zu finden.

• JavaScript-Anwendungen (Cordova, Web) bestehen aus webbasierten Ressourcen wie HTML, JavaScript und CSS. Eine Cordova-Anwendung kann außerdem nativen (in Java, Objective-C, Swift, C# usw. geschriebenen) Code enthalten.
• Zum Debuggen von nativem Code können Sie Standardttols des Plattform-SDK verwenden, z. B. Xcode, Android Studio oder Microsoft Visual Studio.

In diesem Lernprogramm werden verschiedene Debugstrategien für eine JavaScript-Anwendung untersucht (lokale Ausführung in einem Emulator oder Simulator, auf dem physischen Gerät oder in einem Web-Browser).

Weitere Informationen zum Cordova-Debugging und zu Cordova-Tests finden Sie auf der Cordova-Website unter Debugging Cordova Apps.

Fahren Sie mit folgenden Abschnitten fort:

• Debug mit dem Mobile Browser Simulator
• Debug mit Ripple
• Debug mit dem iOS Remote Web Inspector
• Debug mit dem Chrome Remote Web Inspector
• Debug mit dem MobileFirst-Logger
• Debug mit WireShark

Debug mit dem Mobile Browser Simulator

Sie können den IBM Mobile Foundation Mobile Browser Simulator (MBS) zum Voranzeigen und Debuggen von MobileFirst-Anwendungen nutzen.
Öffnen Sie dazu ein Befehlszeilenfenster und führen Sie folgenden Befehl aus:

    mfpdev app preview
    ```

Wenn es in Ihrer Anwendung mehr als eine Plattform gibt, geben Sie die Plattform für die Vorschau an: 

```bash
mfpdev app preview -p <Plattform>

Wichtiger Hinweis: Es gibt mehrere bekannte Einschränkungen für die Vorschaufunktion. Möglicherweise verhält sich Ihre Anwendung während der Vorschau nicht wie erwartet. Es könnte beispielsweise sein, dass die Anwendung mit einem vertraulichen Client Sicherheitseinrichtungen umgeht, sodass Abfrage-Handler nicht ausgelöst werden.

Mobile Browser Simulator

Einfache Vorschau

Weitere Informationen zur MobileFirst CLI enthält das Lernprogram MobileFirst-Artefakte über die MobileFirst CLI verwalten.

Debug mit Ripple

Apache Ripple™ ist eine webbasierter Simulator für mobile Umgebungen zum Debuggen mobiler Webanwendungen.
Ripple ermöglicht die Ausführung einer Cordova-Anwendung in Ihrem Browser und die Simulation diverser Cordova-Features. Sie können beispielsweise die Kamera-API simulieren. Dafür wählen Sie ein lokales Bild von Ihrem Computer aus.

Ripple installieren

1. Laden Sie die neueste Version von Node.js herunter und installieren Sie sie. Sie können die Installation von Node.js durch Eingabe von npm -v im Terminal überprüfen.

2. Öffnen Sie das Terminal und geben Sie Folgendes ein:

   npm install -g ripple-emulator
   

Anwendung mit Ripple ausführen

Öffnen Sie nach der Ripple-Installation an der Position Ihres Cordova-Projekts ein Terminal und geben Sie Folgendes ein:

ripple emulate

Weitere Informationen zu Apache Ripple™ finden Sie auf der Apache-Ripple-Seite oder auf der Seite npm ripple-emulator.

Debug mit dem iOS Remote Web Inspector

Mit iOS 6 hat Apple einen fernen Web Inspector zum Debuggen von Webanwendungen auf iOS-Geräten eingeführt. Stellen Sie vor dem Dubug sicher, dass auf dem Gerät (oder im iOS-Simulator) der private Browsermodus inaktiviert ist.

1. Tippen Sie zum Aktivieren des Web Inspector auf dem Gerät auf Einstellungen > Safari > Erweitert > Web Inspector.
2. Verbinden Sie das iOS-Gerät mit einem Mac oder starten Sie den Simulator, um mit dem Debug zu beginnen.
3. Navigieren Sie in Safari zu Einstellungen > Erweitert und wählen Sie das Kontrollkästchen Menü ‘Entwickler’ in der Menüleiste anzeigen aus.
4. Wählen Sie in Safari Entwickeln > [Ihre Geräte-ID] > [Ihre_HTML-Anwendungsdatei] aus.

Debug mit dem Chrome Remote Web Inspector

In Google Chrome können Sie Webanwendungen auf Android-Geräten oder im Android Emulator über Fernzugriff untersuchen.
Dafür benötigen Sie Android ab Version 4.4 und Chrome ab Version 32. Zusätzlich ist in der Datei AndroidManifest.xml die Einstellung targetSdkVersion = 19 oder eine höhere Einstellung erforderlich. In der Datei project.properties ist zudem die Einstellung target = 19 oder eine höhere Einstellung erforderlich.

1. Starten Sie die Anwendung im Android Emulator oder auf einem verbundenen Gerät.
2. Geben Sie in der Adressleiste von Chrome die folgende URL ein: chrome://inspect.
3. Wählen Sie Inspect für die betreffende Anwendung aus.

Debug mit dem MobileFirst-Logger

Die Mobile Foundation stellt ein WL.Logger-Objekt bereit, mit dem Protokollnachrichten ausgegeben werden können.
In WL.Logger gibt es mehrere Protokollierungsstufen: WL.Logger.info, WL.Logger.debug, WL.Logger.error.

Weitere Informationen enthält die Beschreibung zu WL.Logger in der Benutzerdokumentation im Abschnitt mit den API-Referenzinformationen.

Untersuchung des Protokolls:

• In der Entwicklerkonsole, wenn eine Plattform mit einem Simulator oder Emulator vorangezeigt wird
• In LogCat, sofern auf dem Android-Gerät ausgeführt
• In der Xcode-Konsole, sofern auf dem iOS-Gerät ausgeführt
• In der Visual-Studio-Ausgabe, sofern auf dem Windows-Gerät ausgeführt

Debug mit Wireshark

Wireshark ist ein Analyseprogramm für Netzprotokolle, mit dem Vorgänge im Netz ermittelt werden können.
Mit Filtern können Sie die Ermittlung auf die für Sie erforderlichen Vorgänge beschränken.

Weitere Informationen finden Sie auf der Website zu WireShark.