The devtools cannot load the source maps, since the URL is wrong. The url refers to localhost. It’s ok, but the context is the localhost of the device. The devtools interpretes it as localhost of this computer where the chromium is running. An inline-source-map may help. Otherwise I get the error message:
DevTools failed to load SourceMap: Could not load content http://localhost/...js.map:
Connection error: net::ERR_CONNECTION_REFUSED
Known solution:
Use inline-source-maps. But this is not yet supported by Angular. You have to use a 3rd lib to extract / modify the webpack to set devtools: 'inline-source-map'. But this is annoying since this 3rd libs are not working in my case and I don’t want to rely to such inofficial tools.
Does anyone have experience with it? Is there a way to set correct URL to this source maps. The device ip. Or another solution for inline-source-maps? …
Some background: I build the Ionic app using Angular (no Ionic CLI, because of quirks in a multi-app repo. Anyway…), also build the APK with Cordova CLI. And debug the device using chrome://inspect/#devices Works fine. But the source-maps.
I’m also having this issue, specifically when running Chrome DevTools and inspecting the Android version of my Ionic app. It causes a ton of SourceMap-related warnings in the console, which is annoying. Anyone know of a solution?
Having the same issue. I’m trying to debug an issue where the live reload works fine but I get a white screen when running against an actual build. Lots of:
DevTools failed to load SourceMap: Could not load content for http://localhost/runtime-es2015.js.map: Connection error: net::ERR_CONNECTION_REFUSED
Does not work on a device (Galaxy s20 Android 12) nor on emulators SDK 29-33
It drives me mad. have created a minimalistic one screen app to reproduce
Can you guys try it out and see if it works for you? I created Trapeze config that sets everything up, all the suggestions I found even remotely appropriate.
I added a fetch button that accesses the same map file as devtools should have - successfully.
So there is something about this request from Chrome Dev Tools .
Capacitor has a new --inline parameter on npx cap copy and npx cap sync commands that inlines the source maps as a workaround to the map files not loading problem.
This is fantastic news! I wish this was more prominently advertised. I think debuggability is key. I was about to bolt and go to Flutter just for this issue alone. There was recently a blog post on remote debugging. I wish it was mentioned there.
Ionic 7 does no longer create source maps on disk by default, instead it provides in-memory source maps. To provide inline source maps for Chrome’s DevTools I had first to re-enable the generation of source maps as files by adding "sourceMap": true in angular.json under “projects > app > architect > build > options”; after this I used ionic capacitor sync --inline android as suggested in this thread.
