Modern JavaScript build tools compile entire folder structures of JavaScript code into single, minified files that are near-impossible to read, but can also include source maps which can be used to display the original code in tools such as the Chrome DevTools Sources panel.
These source maps can be processed to extract mainly meaningful code and file structures, by installing a package calling Shuji and running a simple bash command.
Generally, production builds shouldn't include source maps, but if you do manage to lose your source files, or for some (obviously, ethical!) reason need to view the original files, and you happen to have / find the source maps, you're good to go.
This code will work on Mac/Unix.
- Locate your compiled files, which should include
*.js.mapfiles - Create a new folder
<project> - Place files in
<project>/input - Run the script below from
<project> - View the files
This solution doesn't handle inline source maps.
The source map I looked at was base-64 decoded (not sure if they all are) so you can get this into an external file by:
- Copying the encoded part of the source map (everything after the comma from
base64,) - In the browser, run
copy(atob('<the copied data>')) - Create a new file next to original
.jsfile called<name of original file>.map.js - Paste the copied JSON into this file
- Run the original script
I'm not sure if there is a way to automate this in the terminal; I may look at packaging this up.
Only the information in the source maps can be restored.
If these don't contain the full source code, then you're out of luck. Work with what you have!
for MacOS:
find . -iregex '.*\.\js\.map' | xargs -n 1 shuji -o output