In order help debugging a capacitor angular app, there was this flag --inline added to to npx cap sync
This is great for local builds as discussed this forum thread about need to debug remotely a hybrid running app
How is that done with Appflow ?
This native builds documentation page says that t capacitor projects get npx cap sync android treatment. I was hoping to find a varialbe to add --inline parameter through an Environment. No luck. I guess I’ll have to supply a bash script as documented here
Still maybe someone can share their experience with me. A ready script maybe?
Hi Michael. I checked with the team and there isn’t a current way to alter the npx cap sync command in Appflow. The example you linked is about altering the build command, and I don’t believe that will affect the npx cap sync because that runs after the web build.
What is the use case that you’re running into? Are you building natively in Appflow and then debugging that specific build locally in DevTools and need sourcemap support?
The VS Code extension may help – it has a Debugging for Android feature that runs a static web server to serve source map files. However if you don’t have access to the original source code or source maps from the build this may not suit your use case.
1 Like
Hi Ceceliaionic,
Excuse me not describing my workflow in detail. I thought referring to --inline would do the trick.
Anyway, here is the full story.
I use jetbrains webstorm IDE. I develop an angular app. Then I package it into a capacitor based hybrid android app. Then I build and deploy the android app, via sideloading the APK file onto my physical phone which I connect to my desktop dev machine via a USB cable.
I debug the app by opening Google Chrome browser, then its developer tools, which I remote-connect to the web view instance on the said mobile device.
To see the source code properly in the Chrome dev tools, one need the web server to serve the .map files. Local server inside the web view does not do it. You get an error, when you try.
So the work around it is to bundle the mapping infor into the JS files already served. That is what --inline flag of the cap sync CLI command does.
Thank you for confirming that Appflow does not allow using --inline.
My question is then, if I want the Appflow-built app would be debuggable when deployed to my phone, how do I reach that goal?
Regarding switching to VS Code. Thanks, it is a good tip. I would still prefer to use Chrome dev tools as an option. Chrome is everywhere, on every machine, my IDE is not. Apart from that, Chrome dev tools have the Redux tab, which is a very important tool in the Angular/ngrx (Angular implementation of Redux pattern) apps debugging. Does VS Code provde some alternative?
1 Like
That makes sense, thanks for clarifying. I’ll pass this use case along to the team.
There isn’t an official redux devtools VS Code extension, there are some community wrappers but I haven’t used them personally.