38

I'm building an app using the Ionic framework, which I've done in the browser until now. Because I now want to use the cordovaOauth plugin I need to use the emulator. The problem is that I can't see any console.log() in the emulator as I do in the browser, which makes it hard to debug.

Does anybody know how in Ionic/Cordova I can make use of console logging in the emulator? All tips are welcome!

kramer65
  • 50,427
  • 120
  • 308
  • 488
  • which emulator you're using? Eclipse? – AtanuCSE Feb 19 '15 at 16:42
  • @AtanuCSE - I'm simply running the emulator from the command line: `ionic emulate ios`. Any idea? – kramer65 Feb 19 '15 at 17:08
  • this might help you https://github.com/apache/cordova-plugin-console check if this plugin show your console logs in the terminal – AtanuCSE Feb 19 '15 at 19:32
  • 3
    Happy to see you're using my plugin :-). To debug your iOS apps I recommend you `ionic build ios` then open the project in Xcode. When you run in a simulator from Xcode, you can see all the `console.log`. If you want to debug an Android app, see this tutorial: https://blog.nraboy.com/2014/12/debugging-android-source-code-adb/ – Nic Raboy Feb 20 '15 at 16:38

6 Answers6

49

Just enable the console logs in the emulator. Here my example:

> ionic emulate ios --livereload

  Setup Live Reload
  Running dev server: http://localhost:8100
  Adding in default Ionic hooks
  Running live reload server: http://localhost:35729
  Watching : [ 'www/**/*', '!www/lib/**/*' ]
  Ionic server commands, enter:
    restart or r to restart the client app from the root
    goto or g and a url to have the app navigate to the given url
    consolelogs or c to enable/disable console log output
    serverlogs or s to enable/disable server log output
    quit or q to shutdown the server and exit

Type consolelogs in the command line and hit enter. 

  consolelogs

  Console log output: enabled
  Loading: /?restart=382451
  ionic $ 0     498458   log      Hi there! This is from console.log
Carlos Morales
  • 5,676
  • 4
  • 34
  • 42
29

run ionic emulate ios -l -c

This will open the emulator with livereload feature, and you'll see all the console logs in the terminal. To turn the console logs off (or on) just write consolelogs or just c in the terminal while the ionic server is running

Another very convenient way to debug your app when using iOS emulator/device is using the Safari developer tools

When the app runs - enter Safari and choose "Develop > iOS Simulator > your page"

If you work with a real device you'll see the device's name instead of "iOS Simulator"

If you don't see the "Develop" menu in safari - enter Safari's preferences and enable it from the "advanced" tab

Yaron U.
  • 7,681
  • 3
  • 31
  • 45
20

  1. If you wan't to watch console logs in emulator / simulator use

    ionic emulate -l -c <PLATFORM>

  2. If you wan't to watch console logs when testing in device you can launch this command :

    ionic run -l -c <PLATFORM>

-c = --consolelogs : Print app console logs to Ionic CLI (livereload req.)

-l = --livereload : Live reload app dev files from the device

May help someone !

S.Thiongane
  • 6,883
  • 3
  • 37
  • 52
7

If you are testing your web app with a device running Android 4.4 or higher, you can remotely debug your web pages in WebView with Chrome Developer Tools. Just open chrome://inspect on your desktop with the phone in USB Debugging mode connected.

leezu
  • 512
  • 3
  • 17
Ruchir Shukla
  • 805
  • 6
  • 13
5

There are a few ways to debug your ionic app.

  • In the browser you can catch the errors in the console.
  • If you are emulating your app on a simulator or a mobile device you can install the cordova plugin that displays js errors in the xcode console. So you can emulate your device and catch errors on xcode.

Here is how you add the plugin:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

Hope this helps! It came in very handy for me while I was debugging GeoFire errors and testing the cordova camera and geolocation api.

Olga Akhmetova
  • 490
  • 1
  • 6
  • 19
user15163
  • 641
  • 1
  • 7
  • 10
5

On Ionic 3, you can do this by

ionic cordova run android --emulator -l -c

Replace android with ios depending on your requirements. More information here: https://ionicframework.com/docs/cli/cordova/run/

slider
  • 12,810
  • 1
  • 26
  • 42