Hi everyone!
I have an application created using Angular and Capacitor that stores some data in a SQLite database, so I can’t debug my application in a browser directly because I am using SQLite and that DB is not supported by the browser.
So, my problem is that I can’t find the way to debug my code directly on an Android device, right now I am using console.logs but to me it not makes sense, and I want to debug my code as usual (using debuggers and so on…) Is it possible?
After some research I got information about source-maps like this solution: https://github.com/ionic-team/ionic/issues/16455
but, it is not working… is there another solution? Has anyone had the same problem?
Type chrome://inspect/devices in URL, connect your device with granted developer permissions and then click on “Inspect” after the app is recognized. There you can debug as a conventional web application.
Hi @leonardofmed, thanks for your response!
Yes, I always use the Chrome DevTools in order to inspect my app inside the connected mobile device.
But in Android, it is not possible to see the code in the sources tab because it is minified and encrypted, I mean, I want to inspect the TypeScript source file to add breakpoints instead of console.logs to make my work easier…
So for that reason, I think that I need to generate the source-maps, but after some research I can’t find the properly solution, because I am not using Ionic in my project (it is Angular + Capacitor).
Hi @aaronksaunders thanks for your answer!
My project is based in Angular and Capacitor without Ionic, so, I am not sure but I think that it is not possible to use the live reload… correct me if I am wrong. Is it possible to use live reload directly in Capacitor without ionic?
Anyway, I need to debug directly on the device, because I need to test logic that use SQLite DB and it is not possible to have that database in the browser. So, for that reason, I am trying to use the Chrome DevTools to inspect my app inside the connected Android device but I can’t see properly my TypesScript code (it is minified) to add breakpoints or debuggers instead of console.logs.
It will work, and I was running the application on my device and debugging it on the browser which is exactly what your question is about.
Please take a look at the documentation and try it before just passing it off as not able to work… it will work I have done this multiple times… so try it and let me know how it goes.
The application I was running was written in vuejs using capacitor, deployed on a Samsung device.
Okey @aaronksaunders. Yes, it is true, I have not try your answer… I understood that your solution was applied in a browser, I am sorry
But if I take a look the capacitor documentation I see that uses ionic…
ionic cap run android -l --external
Obviously, I can’t use that command in my project, because it is not an ionic project (another solution that I found is to add ionic in my project, but I think that I don’t need that dependency… maybe I am wrong…)
So, I understand that your project only uses VueJs and capacitor (without ionic), so I need your help because for sure I am doing something wrong…
What is the command that I need to use? Is my approach correct (without ionic dependency)?
@lhk Yes, I tried that command but it is crashing… I don’t now if that error is related with my code…
Anyway I don’t see an option to do the live reload using the capacitor directly (at least, in the official documentation I don’t see it… )
internal/modules/cjs/loader.js:638
throw err;
Error: Cannot find module '/Users/blabla/workspace/blabla/android'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
Maybe you are right @lhk
First of all I need to do the build in angular, so I execute ng build, so after that execution all my code is in the /dist folder.
Now I need to “move” that code inside the android platform using npx cap copy android, and once it is finished I execute npx cap open android to open Android Studio and run the application on the connected device.
So, if previously I put console.logs in my code I can see that information in the connected device using the Chrome DevTools, but in any case I can’t use breakpoints or debuggers because are ignored… and neither I can’t see my typescript code in the Sources tab…
Hm, what do you mean when you say that your App is without Ionic.
I have no experience with Ionic + Angular.
But couldn’t you just set up the same application without using the Ionic components, and make use of the whole Ionic buildchain?
In any case, once you can actually execute the application inside of the emulator, it should be possible to find it with the Chrome dev tools.
This would then be independent of Ionic.
Missing typescript sources sounds like an issue of missing sourcemaps.
Do you see them when debugging in the browser?
(ionic serve, I don’t know the equivalent for angular without ionic)
If you can’t use Typescript sources in the browser, I would try to fix this first.
Make sure sourcemaps are generated properly.
And where do you set those breakpoints?
In your editos (vs code for example) or in the Chrome dev tab ?
My app is an Angular project based on Angular CLI, without any dependencies of ionic, so, in order to run my project in an Android or iOS device I use Capacitor as a “bridge”.
So obviously, for that reason I can’t execute any command that is started by ionic… maybe my approach it is not correct and it is more easier to has ionic inside the project to be able to do the live reload and debug everything.
If I do ng serve I can see all my code in the browser (so I can put breakpoints and so on), but my problem is that I am using a SQLite Database and it is not supported by any browser, for that reason, I need to run my application in a mobile device, but I can’t debug my code properly (no typescript files and no way to put debuggers in the Chrome Dev). Anyway, all my debugger; of my code are ignored in the android device (even if I run the code in debug mode)…
@Pujy25 I am working on client deliverable for this afternoon, if you haven’t figured it out by later today, I will put together instructions on how to get it running
Thank you @aaronksaunders! I need to clarify some doubts with you (cause I am not sure if I am following the best approach), taking into advantage you expertise in that area
See you later!
Init the live reload in angular, using the following comand (use your pc ip):
ng serve --host=192.168.1.167 --port=4200
Open another terminal, to copy assets to the platform specific directory:
npx cap copy android
Open Android Studio to run your app on the connected device:
npx cap open android
IMPORTANT!!! Before run, you have to modify the android manifest:
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:usesCleartextTraffic="true" // <== NEW LINE TO ADD!!!
android:theme="@style/AppTheme">
And that’s it, every change that you do in your code triggers the reload of your application on the mobile device (including debuggers !!!)
@aaronksaunders no, of course it is the same but I prefer to put here (in the topic) the final solution.
For me it is important that the community has the final approach here directly, and of course it’s your solution. I hope it doesn’t bother you…
I have one final question, is it necessary to have the ionic.config.json file?
The problem is that you don’t state that there is no difference so now someone who looks at the link i provided and then looks at what you have written needs to do the analysis themselves to make sure that the two are the same… Like I had to do… it isn’t a final summary, it is exactly what I wrote in the readme I provided… that is what is confusing about you reposting what I already wrote.
This is just my opinion, either way I am glad you got it working
!!