You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
This discussion was converted from issue #135 on October 29, 2020 00:13.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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:_()
. 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.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/
Beta Was this translation helpful? Give feedback.
All reactions