How to debug Ionic WebApp?

Question

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

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

How to debug an application when it runs in a browser?

Answer 1

In Chrome, you can enter chrome: // check in the address bar. Once you launch your Android application, you can check the application when you launch it using the Android ion launch command or Android ion emulation . P>

The Android version, however, should be above 4.3, I think ...

Answer 2

According to the documentation, there are several different ways to do this. You can also try one of the following, since you have already tried ionic serve ?

  ionic run ionic emulate 

The run or emulate command deploys the application to the specified platform devices / emulators. You can also start a direct reboot on the specified platform device by adding the --livereload option. The reboot functionality is similar to the ionic service, but instead of developing and debugging the application using a standard browser, the compiled hybrid application itself monitors any changes in its files and, if necessary, restarts the application. This reduces the need to constantly rebuild the application for small changes.

I hope you go! Let me know how this works for you.

Answer 3

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

Answer 4

In the browser, I use most of my debugging for ionic. Which browser do you use for debugging? I use Chrome and enable DevTools. There is a source tab where you can view the application code to find points for breakpoints. For example, you can set a breakpoint in the controller code for a click event and execute the code. You can then use the console to execute commands to check values ​​and check objects, etc. Can't you do this job? Or unfamiliar with DevTools? If you are not familiar, there is a resource here . If you don’t work, will breakpoints hit?

Answer 5

There are several ways to debug your ionic application.

• In the browser, you can catch errors in the console.
• If you emulate your application on a simulator or mobile device, you can install the cardova plugin, which displays js errors in the xcode console. This way you can emulate your device and catch errors on xcode.

Here's how you add the plugin: add cordova plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

Answer 6

An alternative is to use ionicLab. This helped me complete the following steps: Install the program and prepare all the project dependencies before testing. Then click the Serve Testing option, which is located in Platform . When the project has been completed, click the arrow icon on the preview panel.

As a result, Ionic will display a Chrome window with the loaded project, so you can use the developer tools as usual. You should watch the javascript files that you use in your project so that they can be debugged.

Answer 7

Just run: ionic serve -l and check your browser settings.