2

I'm working on an Ionic/Cordova cross-platform application and I'm struggling a little bit with the debugging. Debug can of course be done directly from the browser by running ionic serve and then using the browser developer tools, but some behaviors happen only on real devices.

pavodev
  • 23
  • 1
  • 5

3 Answers3

5

Adding a detailed guide to do this..

  1. Make sure your android device has Developer mode on, and USB debugging is enabled in the developer settings on your device. You can google to activate this.
  2. Device connected via USB, both system and mobile device connected to same wifi network..Use command

ionic cordova run android -l --external

  1. After app has installed and started up on device, open this link in your chrome browser

chrome://inspect/#devices

  1. If all was done correctly, you will see your device name and app name there with an option to inspect. This will open the chrome developer console exactly similar to the web one.

  2. Now you can debug the app right on the device. Add breakpoints, edit html and see the logs as well.

Reference

Chetan Bansal
  • 1,794
  • 14
  • 18
  • 1
    This was the most straightforward way to debug my application! Thank you!! Is it normal to experience some lag while the debug is active? – pavodev Feb 03 '20 at 09:27
  • Yes, on the command ionic cordova build android --prod, your application will be build for production and the times compare to the debug .apk are very different. You can do it from time to time, to check times loading of plugins. And the application overall. – jcmendes98 Feb 03 '20 at 10:41
2

Yes, you can use Chrome and Safari DevTools to connect to your device and debug the HTML/JS/CSS, as long as you don't build a release version (cordova build android ---release). It does take some initial setup since it's disabled by default.

Or you can use Android Studio or XCode to debug the plugins etc.

Note that you can only debug iOS apps with a Mac (or using Google's iOS WebKit Debug Proxy). Android apps can be debugged from any OS with Chrome (for HTML/JS/CSS) or Android Studio installed.

Official Cordova debugging guide

Thomas
  • 8,426
  • 1
  • 25
  • 49
0

A simple way could be using logcat, take a look to this answer Debugging a WebView (Ionic) app on Android via logcat.

Juan Antonio
  • 2,451
  • 3
  • 24
  • 34
  • This is also a good way to debug but since I am using Visual Studio Code and not Android Studio, in my case I would recommend @ChetanBansal 's answer. Thank you! – pavodev Feb 03 '20 at 09:31
  • Your're welcome. Remember that logcat is an independent tool. In fact, I am using it developing in ReactNative :). So, does not matter if you use Android Studio or not. Only open a terminal and use it! – Juan Antonio Feb 03 '20 at 09:49