CODEWITHSUNDEEP
webstormionic-framework
electronix384128
electronix384128

Reputation: 6733

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?

Upvotes: 7

Views: 14498

Answers (7)

M.Daniyal Aslam
M.Daniyal Aslam

Reputation: 517

Simply run: ionic serve -l and inspect from browser developer options.

Upvotes: 0

Jesús Castro
Jesús Castro

Reputation: 2119

An alternative is using ionicLab. It worked for me doing the steps: Install the program and prepare all the project dependencies prior to testing. Then, click on Serve option from Testing which is under Platform menu. When the project has been executed, click on the arrow icon of the Preview bar.

arrow icon

As a result, Ionic will throw a Chrome window with the loaded project, so, you can use Developer Tools as it's used commonly. You ought to watch the javascript files, which you use in your project, so that you can debug them.

Upvotes: 1

Johan Degrieck
Johan Degrieck

Reputation: 435

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

Upvotes: 18

user15163
user15163

Reputation: 641

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

Upvotes: 1

Riccardo
Riccardo

Reputation: 1520

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).

Upvotes: 5

Jeff L
Jeff L

Reputation: 156

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?

Upvotes: 3

Trevor
Trevor

Reputation: 8004

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.

Upvotes: 5

Related Questions