DevTools cannot load SourceMap files (`net::ERR_NAME_NOT_RESOLVED`)

[bric3]

I opened a ticket on JCEF about sourcemap not available in DevTools, see
https://bitbucket.org/chromiumembedded/java-cef/issues/403/devtools-cannot-load-sourcemap-files-net

---

I have Java code that expose a progressive web app via JCEF. However the third-party web-app javascript is minified. They do provide source maps however. This works fine in a usual browser.

However when running inside a JCEF frame, the devtools cannot load these source maps.

DevTools failed to load SourceMap: Could not load content for https://my-app/2.c9d7d260.chunk.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load SourceMap: Could not load content for https://my-app/main.a7bce6af.chunk.js.map: Connection error: net::ERR_NAME_NOT_RESOLVED
DevTools failed to load SourceMap: Could not load content for https://my-app/main.0d980f3a.chunk.css.map: Connection error: net::ERR_NAME_NOT_RESOLVED

I am registering a custom scheme handler

CefApp.getInstance().registerSchemeHandlerFactory(
    "https", appDomain,
    SchemeHandlerFactory { uri: URI ->
        BufferedInputStream(WebView::class.java.getResourceAsStream("/assets" + uri.path))
    }
).also { successful -> assert(successful) }

I even tried to hook a request handler

object : CefRequestHandlerAdapter() {
    override fun getResourceRequestHandler(
        browser: CefBrowser?,
        frame: CefFrame?,
        request: CefRequest?,
        isNavigation: Boolean,
        isDownload: Boolean,
        requestInitiator: String?,
        disableDefaultHandling: BoolRef?
    ): CefResourceRequestHandler? {
        println(request)
        return super.getResourceRequestHandler(
            browser,
            frame,
            request,
            isNavigation,
            isDownload,
            requestInitiator,
            disableDefaultHandling
        )
    }
}.also { requestHandler ->
    cefBrowser.client.addRequestHandler(requestHandler)
    lifetime.onTermination {
        cefBrowser.client.removeRequestHandler()
    }
}

Debugging at these location didn’t help much, as I don’t see any request to https://my-app/2.c9d7d260.chunk.js.map for example.

I am not sure if this is a bug or a missing feature, or simply a misuse.

---

I even tried to add this request handler on the devtool browser cefBrowser.devTools

[bric3]

It seems this may be due to a quirk of chrome :

• https://magpcss.org/ceforum/viewtopic.php?f=6&t=17910
• https://bugs.chromium.org/p/chromium/issues/detail?id=1069378

[bric3]

It seems I can't do anything about it, within the boundary of this project.

[bric3]

Workaround in facebook/create-react-app#790 (comment), by using react-script-rewired and passing a custom webpack configuration override.

module.exports = function override(config, env) {
    // see https://webpack.js.org/configuration/
    console.log("Disabling build minimizer (config-overrides.js)");
    config.mode = "development";
    config.optimization.minimize = false;
    config.optimization.minimizer = [];

    // https://webpack.js.org/configuration/devtool/
    console.log("Inline SourceMaps (config-overrides.js)");
    config.devtool = 'inline-source-maps'


    return config;
};

The non modifiable webpack config passed to react-script is located here : excalidraw-assets/node_modules/react-scripts/config/webpack.config.js