Debug Ionic 3 code on the device

Question

I am testing Ionic 3, so far everything works as it should. I would wish to debug the TS code on the ionic lab so i added the next configuration in package.json:

"config": {
    "ionic_source_map": "source-map"
}

After this, i was able to see the code and debug it(in chrome devTools), but when i execute the same test on the phone i am not able to see the .Ts files and debug it. Anyone has any idea which configuration or how to make them also visible on the phone?

Answer 1

I also faced with this problem, but solution is simple :) Run command:

ionic cordova emulate android -l --debug

• -l Spin up server to live-reload www files

  --debug Mark as a debug build

So, when inspecting device/virtual device with chrome://inspect, you can debug typescript files, set breakpoints etc as in web app.

Debugging:

• In Chrome, go to chrome://inspect in the URL bar.
• Click inspect in your app’s WebView on your device.

Answer 2

You can use Chrome Inspector to debug Ionic app from the phone.

Prerequisites:

• For Windows, install the necessary USB drivers.
• A USB cable to connect your device.
• Chrome for Android installed and running on your device.
• USB debugging enabled on your device.

Debugging:

• In Chrome, go to chrome://inspect in the URL bar.
• Click inspect in your app’s WebView on your device.