JavaScript Source map don't work with environment Android WebView

Question

I'm making WebView-based Android native app, and I'm debugging JavaScript through Mac chrome's web inspector/debugging console.
But, with this environment, debugging tool don't load JavaScript source map.

To be more precise, if the html page you are viewing in WebView is over the Internet, the source map will be loaded correctly.

However, if the html page you are viewing is a response generated by WebViewClient's shouldInterceptRequest method, the source map will not be loaded.

It is hard to debug webpack-ed source code, so I want to see source map on Android WebView.

Does someone know this phenomena?
And does someone know how to avoid this?

Additional information:
Android version: Android 9
Chrome version: 76.0.3809.132 for Mac
I'm sure to set True to "Enable JavaScript source map".

Answer 1

If you're using webpack you could tell it to make a bundle for local development with inline source maps - which would include the source maps inside the js file instead of a separate .map file

Add/change this in you webpack configuration for local development

devtool: 'inline-source-map'