I want advanced tools for debugging minified code

[aarongustafson]

We are developing a content-rewriting proxy at my company, so we are re-generating HTML, CSS, and JavaScript on the fly. When debugging issues, I often have to trace through someone else's JS code, and most of the time it is minified. In this use case sourcemaps are mostly useless, because 1) most projects don't use them in production; 2) re-generated code cannot use them anyways.

At the moment, Chrome Dev Tools work the best for interactive debugging. Firefox is not as good in beautifying, and is especially quirky when tracing eval-ed JavaScript. However, even Chrome provides only basic tools for analysis. It would really help if we could:

• Store the current debugging state on disk. Ideally, such a dump would include all breakpoints, JS state, and content. So I could close the browser, open it next day and start exactly where I left off. This would greatly speedup complex debugging: Imagine debugging a race condition that is hard to reproduce. Then you could save the state after reaching the failure, and try different things from there.
• Allow dynamic code refactoring. Imagine a minified code, where all functions are called _(). During debugging, it should be possible to tell different instances of _() based on current stack / closure. Then, you could do analyze what this function does, and perform an IDE-like rename operation, and slowly dig your way through the minified mess.
• The ability to edit the JS file before it is evaluated. Right now you have to use some kind of intercepting proxy like mitmproxy, but I don't see why it couldn't be implemented in dev tools.

This kind of advanced tool would be super useful for security researchers and for library authors who have to deal with minified code.

---

https://webwewant.fyi/wants/53/