How to Debug Ionic WebApp?

I want to debug my ionic application in WebStorm. I am able to run the app in browser. But how can I debug?

I tried: ionic serve --debug which doesn't seem to trigger any debugging?

How can I debug the app when it runs in browser?

With Chrome you can type chrome://inspect into your address bar As soon as you are running your Android app, you can inspect the app when you are running it with the "ionic run android" or "ionic emulate android" command

The version of Android, however, must be higher than 4.3 I think...

According to the documentation there's a few different way's to do this. Also could you try one of these listed below since you have tried ionic serve already?

 ionic run
 ionic emulate

The run or emulate command will deploy the app to the specified platform devices/emulators. You can also run live reload on the specified platform device by adding the --livereload option. The live reload functionality is similar to ionic serve, but instead of developing and debugging an app using a standard browser, the compiled hybrid app itself is watching for any changes to its files and reloading the app when needed. This reduces the requirement to constantly rebuild the app for small changes.

Hope this get's you going! Let me know how it work's out for you.

The browser is where I do most of my debugging for ionic. What browser are you using to do the debugging? I use Chrome and turn on DevTools. There is a source tab where you can browse your app code to find spots for breakpoints. For example, you can set a breakpoint in the code for a controller on a click event and step through the code. Then, you can use the console to execute commands to test values and inspect objects, etc. Are you unable to make this work? Or, unfamiliar w/ the DevTools? If unfamiliar, there is a resource available here. If not working, are the breakpoints not being hit?

I found this tool very useful, you can attach your device and get a real time inspector on your Cordova app(for iOS and Android platforms).

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 cardova 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