Chrome/Edge Devtools not loading source maps despite its presence

Question

I am debugging a website where source maps are enabled but they are not visible in dev tools.

After checking multiple SOF threads and this https://developer.chrome.com/docs/devtools/javascript/source-maps/#sourceurl_and_displayname I found the issue is probably because the .js files are missing the //# sourceURL=source.coffee comment in the end. So, I tried to right click and choose add source maps and pasted the URL of .js files and appended .map in the end. That worked for me, however this is a tedious task as there are around 30+ .js files. I was able to see webpack:// being constucted after doing this.

Is there any hacky way to automate this? Or let dev tools know to that all source maps are just the same URLs with .map in the end? Or maybe some Chrome Extension that can do this for us?

Answer 1

I was able to find a solution myself after exploring. This can be done my creating a Chrome Extension on version 2 for development.

Below is the code for Content Script.

function loadSynchronously(url: string) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, false);
    xhr.send();
    return xhr.responseText;
}

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {
        var javascriptCode = loadSynchronously(details.url);

        // modify the below rules as per your need
        javascriptCode += "\n//# sourceMappingURL=" + details.url + ".map";

        return {
            redirectUrl:
                "data:text/javascript," + encodeURIComponent(javascriptCode),
        };
    },
    {
        urls: ["https://www.example.com/*.js"],
    },
    ["blocking"]
);

Making sure to give webRequest and webRequestBlocking permission to your extension. I used this template https://github.com/abhijithvijayan/web-extension-starter. Hope this helps!