ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

bug: source maps are not loaded when debugging with chrome dev tools on device #16455

Closed KevinKelchen closed 2 years ago

KevinKelchen commented 5 years ago

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.4.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/kelchen/Library/Android/sdk)
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v10.13.0 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

Describe the Bug TypeScript source maps are not present when debugging on an Android device/emulator.

Steps to Reproduce Steps to reproduce the behavior:

  1. Start a new project with ionic start sourcemaps blank --type=angular.
  2. Path into the project directory and run ionic cordova prepare android. Say Y to the prompt to install the Android platform.
  3. Run ionic cordova prepare android again. It will download/install the Cordova plugins that are part of the template.
  4. Run ionic cordova run android. This will build the app and deploy it to an Android emulator. You could also choose to deploy to a device by connecting a device configured for debugging and passing the --device flag to this command.
  5. After you get the app deployed and running on the emulator, in a Google Chrome tab go to chrome://inspect/#devices and inspect the Ionic app.
  6. In the Chrome DevTools under Sources use Cmd + P to search for the source file home.page.ts. It will not be found.

image

Related Code If you are able to illustrate the bug with an example, please provide a sample application via an online code collaborator such as StackBlitz, or GitHub.

Expected Behavior I expected the TypeScript source files to be present and debuggable with breakpoints in the Chrome DevTools.

Additional Context This is the same issue as #15152 which has since been closed and locked. While the OP of that issue decided to use Ionic DevApp as a workaround, our application uses a number of additional and different Cordova plugins that make using DevApp unsuitable. I would expect the browser dev tools to work like they have previously in Ionic 3 and like they currently do with iOS.

ionitron-bot[bot] commented 2 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.