CODEWITHSUNDEEP
androiddebuggingionic-frameworkgoogle-chrome-devtools
João Mourão
João Mourão

Reputation: 168

Debug Ionic 3 code on the device

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?

Upvotes: 3

Views: 1950

Answers (2)

Yerkon
Yerkon

Reputation: 4798

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.

enter image description here enter image description here

Upvotes: 3

Tomislav Stankovic
Tomislav Stankovic

Reputation: 3126

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.

enter image description here

Upvotes: 1

Related Questions