I have an Android mobile app built with the Ionic/Capacitor/Vue.JS stack (written in TypeScript). The developer troubleshooting experience is atrocious at the moment, and I’m hoping there are some settings and/or tools that will improve the situation. Right now, the one and only tool I have is “console.log”, which prints to the Android Studio LogCat. Worse still, when any kind of fatal JavaScript error is shown in the LogCat window, then I am completely in the dark because source file names and line numbers are meaningless due to transpilation, minification, and rollup bundling.
The basic problem is that the browser’s “F12 developer tools” are obviously not available in a mobile device because everything is running in an embedded web browser on a mobile device. Testing my app in a desktop web browser is completely impossible, because this particular mobile app only runs on very special Android devices with special hardware that interface with libraries bundled directly into the custom Android OS (i.e. the app will not launch at all on a normal Android phone). The only way to launch this app is “on the custom mobile device hardware”.
I successfully disabled minification using the vite.config.js configuration, which improves the situation somewhat. Now when I am shown source file names and line numbers, I can go look at the final rollup/bundled JavaScript file and read the code where the error occurred. By looking around at neighboring source code, I can manually figure out which original TypeScript file that code originated from. This is better than analyzing minified code, but this is still not a great developer troubleshooting experience.
I tried changing the Vite configuration to enable “map” files, which are supposed to allow the browser to report original source-file names and line-numbers, even after transpilation. I was able to make Vite/TypeScript generate the map files and then include those map files with the final distribution. However, the embedded browser managed by Capacitor didn’t actually use the map files, and still reported based on the rollup/bundled JavaScript file. Google recommends that “to enable TypeScript map files, press F12 and set some options”. But obviously I can’t press F12 in Capacitor’s embedded browser to enable any options to use TypeScript map files.
I also tried changing the Vite configuration to leave modules as single files and not perform any rollup/bundling at all. After making this change, it does leave all the final JavaScript modules as individual files. However, the Vue.JS app refuses to run like this because Pinia (the Vue.JS data store) doesn’t like the way a non-bundled app is initialized. Basically I get a million errors from JavaScript claiming that the Pinia store is being used before initialization. If I re-enable rollup/bundling, then Pinia works perfectly. I have no idea what the underlying cause of this is, but it clearly doesn’t work with Pinia.
So the question is: what are people doing to improve the developer troubleshooting experience for Android mobile apps built with the Ionic/Capacitor/Vue.JS stack?