Debugging on emulator

Ionic Framework ionic-v3
1

Hi guys,
I need to debug my app on real device or emulator (bluestacks for example) because I integrated paypal feature and this is not testable using web browser. I need to see the console or network calls. How can I do it?

Thanks in advance

Regards,
L

2

If you have android studio installed you can create an avd and just type ionic Cordova run android, it’s better then BlueStacks. If you want to use BlueStacks you can type ionic Cordova build Android and it will create an apk.

3

Yes, it is clear but I want use debudding mode, with breackpoint, watches and other debug features. Is it possible?

4

If you run your app in dev mode you could just inspect it with chrome://inspect

1 Like
5

Sorry, I executed the following steps:

  1. started bluestacks
  2. adb start-server
  3. adb devices (check device)
  4. open chrome browser with “chrome://inspect/#devices”
  5. I can see the console! perfect

but I can’t see my source code. I added my source folder to workspace but the flow not stopped to my breackpoints.

It is possible to use my original sources?

Thanks

6

If you’re testing on a real device and you’ve installed adb, you don’t need bluestacks I guess (I never use it anyway). On your device settings of your Android device, you should enable USB debugging (you can read about how to do that here). Now you should be able to see your device in the chrome://inspect under devices. If you’ve installed the app like this ionic cordova run android or similar, you should be able to hit the inspect button of the app there. Now you can access sources just like any regular webapp.

7

Thanks @luukschoen, I undestood your concept but when I use chrome inspector I see generated main.js file. Not my source
files (.ts files). Debugging is very complex.

8

If you are using VS code IDE for developement follow these steps.

  1. Go to Debug or in the command palette add Cordova platform
  2. Run on Device.
  3. Put necessary breakpoints.
  4. When it is running on device…
  5. Attach the code to running device.
1 Like
9

Can I use the BlueStacks simulator or I need to use only real device for debugging step by step using breackponts?

Thanks

10

Hi,

Did you manage to get to a stage where you can see your source code on chrome and be able to place breakpoints?

11

Source code can be found and is debuggable as well but there can be possibilities that we may be using any bundler like webpack or gulp which bundles our files. So we may be unable to find exact files in chrome inspect but we will surely find all our code there in some other file. For example in one of my projects I am using gulp which bundles all of my code to file app***********.js so my whole source code is present in this file and I debug this file if required.
Other option can be to debug via Vs Code editor.

12

I upgraded my bluestack emulator version from 3 to 4 and now, wen I open inspect, I can’t found browser link in order to show the console and network. Have you ideas on how solve the issue?

SM-G955F
#emulator-5554
No browsers detected.

emulator

Thanks