2015-02-23 16 views
6

Ich möchte meine ionische Anwendung in WebStorm debuggen. Ich kann die App im Browser ausführen. Aber wie kann ich debuggen?Wie Debuggen von Ionic WebApp?

Ich versuchte: ionic serve --debug, die kein Debuggen auszulösen scheint?

Wie kann ich die App debuggen, wenn sie im Browser ausgeführt wird?

Antwort

18

Mit Chrome hinzufügen Sie Chrom geben kann: // prüfen in die Adressleiste Sobald Sie Ihre Android-App ausgeführt wird, Sie können die App überprüfen, wenn Sie es mit dem „ionischen Lauf android“ oder „ionischen emulieren android“ Befehl

die Version von Android, jedoch laufen mu st sein höher als 4.3 Ich denke ...

+2

"Android-Apps, die Android 4.4 oder höher unterstützen, können Chrome auch für Remote-Debugging verwenden." - http://ionicframework.com/docs/guide/testing.html – p1nox

5

Nach der documentation gibt es ein paar verschiedene Möglichkeiten, dies zu tun. Könnten Sie auch einen der unten aufgeführten ausprobieren, da Sie bereits ionic serve ausprobiert haben?

ionic run 
ionic emulate 

Der Befehl run oder emulate stellt die App auf den angegebenen Plattformgeräten/Emulatoren bereit. Sie können das Live-Reload auch auf dem angegebenen Plattformgerät ausführen, indem Sie die Option --livereload hinzufügen. Die Live-Neuladefunktion ähnelt der ionischen Funktion, aber anstatt eine App mit einem Standardbrowser zu entwickeln und zu debuggen, sucht die kompilierte Hybrid-App selbst nach Änderungen an ihren Dateien und lädt die App bei Bedarf neu. Dies reduziert die Notwendigkeit, die App für kleine Änderungen ständig neu zu erstellen.

Hoffe, dass du gehst! Lass mich wissen, wie es für dich funktioniert.

3

Der Browser ist, wo ich die meisten meiner Debugging für ionische tun. Welchen Browser benutzen Sie, um das Debugging durchzuführen? Ich benutze Chrome und aktiviere DevTools. Es gibt eine Quellenregisterkarte, auf der Sie Ihren App-Code durchsuchen können, um nach Punkten für Haltepunkte zu suchen. Beispielsweise können Sie einen Haltepunkt im Code für einen Controller für ein Klickereignis festlegen und den Code schrittweise bearbeiten. Dann können Sie die Konsole zum Ausführen von Befehlen zum Testen von Werten und zum Prüfen von Objekten usw. verwenden. Können Sie dies nicht durchführen? Oder, ungewohnt mit den DevTools? Wenn unbekannt, ist eine Ressource verfügbar here. Wenn die Breakpoints nicht funktionieren, werden sie nicht getroffen?

+0

Danke, ich habe es funktioniert :) –

5

Ich fand this tool sehr nützlich, können Sie Ihr Gerät anschließen und einen Echtzeit-Inspektor auf Ihrer Cordova App (für iOS und Android-Plattformen) bekommen.

1

Es gibt einige Möglichkeiten, Ihre ionic app zu debuggen.

  • Im Browser können Sie die Fehler in der Konsole abfangen.
  • Wenn Sie Ihre App auf einem Simulator oder einem mobilen Gerät emulieren, können Sie das cardova-Plugin installieren, das js-Fehler in der xcode-Konsole anzeigt. So können Sie Ihr Gerät emulieren und Fehler auf xcode abfangen.

Hier ist, wie Sie das Plugin hinzufügen: cordova Plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

1

Eine Alternative ist die Verwendung von ionicLab. Es funktionierte für mich die Schritte zu tun: Installieren Sie die program und bereiten Sie alle Projektabhängigkeiten vor dem Testen vor. Dann klicken Sie auf Serve Option von Testing, die unter Platform Menü ist.Wenn das Projekt ausgeführt wurde, klicken Sie auf das Pfeilsymbol der Vorschauleiste.

arrow icon

Als Ergebnis Ionic wird ein Chrome-Fenster mit dem geladenen Projekt werfen, so können Sie Developer Tools verwenden, wie es häufig verwendet wird. Sie sollten die Javascript-Dateien, die Sie in Ihrem Projekt verwenden, beobachten, damit Sie sie debuggen können.