I wanted frontend debugging in prod so I've been halfway through building a source map injection browser extension for a while. The problem is that source map comments don't work well when the same artifact is deployed across prod and multiple staging environments. For each env at work we have different asset paths which need to be generated. Each server already serves up its source maps behind a firewall (for other reasons). The main work of the browser extension is to inject the source map dynamically at runtime when the page is loaded in the browser.

It can do this by taking a mapping of regex asset paths for each server in each env and the url of the source map location. Then it fetches the source maps internally, injects them using a SourceMap header with the chrome devtools network api, and that attaches the source maps in chrome's sources panel.

We used to get hit with production issues during oncall shifts more often. This came out of thinking about ways I could make debugging under pressure a bit easier for myself. If it helps I also automate common debugging steps with chrome snippets to save time.

We haven't been dealing with prod issues that need debugging for most of the last year so I haven't really needed it. It's not super hard to build though. If anyone wants to you should go for it!