How can I specify a file source map after the page loads up?

Question

I'm a big fan of source maps for javascript and SASS; however, I don't want to load source maps into production for a couple of reasons: the original source code is available and it's not a good use of bandwidth.

But, sometimes, the need for debugging in production arises (we've all seen production-only bugs on the front-end).

Is there a way for me to specify a source map after the fact? For example, I could have a source map available locally or behind a VPN-locked server, or even in a folder that's not visible to the user. I'm fine with doing it at run time or specifying a setting and having to reload the page. (actually if I could persist that setting that'd be even better).

Coltish

Answer 1

You can right-click on a minified source file and select "Add Source Map". Then paste in the URL of the map file.

If your mappings file doesn't include the original file contents alongside the mappings make sure the original file paths are accessible to Chrome.

Engross

Whoa! Okay, that's exactly what I was looking for! Thank you! :) – Coltish

How do you specify a source map from the local file system? I tried several ways but doesn't seem to work. – More

@Vikas what worked for me was to drag the source map into a new tab in chrome and then copy the URL from the URL bar – Nika

url format: c://xxx/xxx/xxxx.xx – Gillett

Is there anyway of retaining it after a navigate or refresh? Ideally I'd like to debug something that happens on page load – Karolyn