Introduction
Hello everybody! That is going to be a brief and fast tutorial on the right way to obtain sourcemap recordsdata and convert them into the unique JavaScript supply code. Right here’s an instance of minified code from a Subsequent.js web site:
And right here is identical code after the browser has performed its magic and reconstructed the unique code utilizing sourcemaps:
Check out the underside toolbar — it exhibits whether or not the displayed code is a bundled file or the unique supply file.
Our purpose is to obtain this unique file to our native system. Presently, you may view the unique code in browsers for web sites that publicly publish their sourcemaps, however browsers don’t allow you to obtain the unique code in bulk. This implies you may individually obtain every file from the developer instruments, however you may’t obtain a complete listing directly. This can be a drawback as a result of web sites normally include tons of (if not hundreds) of supply recordsdata.
I’m not conscious of any method to do that utilizing browser extensions. There may be one distinguished Chrome extension that principally works: ResourcesSaverExt, nevertheless it’s at the moment experiencing points with Webpack. My understanding is that it is a Google Chrome limitation, as described in this situation.
As a substitute, we’ll use Mitmproxy to intercept all net requests and log the sourcemap URLs, after which use Sourcemapper to obtain and reconstruct the unique code utilizing these sourcemaps.
Step 1: Set up and Run Mitmproxy
Mitmproxy is a free and open-source proxy that you should use to route all of your community requests by means of. It’s extraordinarily highly effective and offers a really versatile scripting setting. You’ll be able to observe the directions on the official web site to put in it.
As soon as set up is full, run the proxy out of your terminal and set your system proxy to route all requests by means of it. After that, open any web site in your browser. You need to see all of the requests being logged within the terminal:
Good! Now clear the checklist of flows by urgent z.
Step 2: Open the Goal Web site
Subsequent, open the goal web site in your browser. This gained’t routinely set off the loading of sourcemap recordsdata. You must open the developer instruments and go to the Sources tab in Chrome or the Debugger tab in Firefox. When you try this, you’ll see a bunch of latest requests in Mitmproxy ending with .js.map:
At this level, press w in Mitmproxy and enter a reputation for the dump file the place these intercepted flows can be saved. I’ll assume you named it dump.
Create a script.py file containing a little bit of code to filter the dump file you simply created. In my case, that is what it regarded like:
def request(movement):
if "targetdomain" in movement.request.url and movement.request.url.endswith(".map"):
print(movement.request.url)
Change "targetdomain" with the area you’re focusing on. This filters out any intercepted requests from different domains you’re not inquisitive about. We’re additionally filtering for .map since sourcemap recordsdata all the time finish with that extension.
Now, run this command to course of the dump file utilizing your script:
mitmdump -q -s script.py -r dump
This can print every sourcemap URL on a brand new line within the terminal, like this:
https://instance.com/a.js.map
https://instance.com/b.js.map
Step 4: Pipe Sourcemap URLs to Sourcemapper
That is the ultimate step. You’ll now pipe these URLs into Sourcemapper. This instrument downloads every sourcemap and reconstructs the unique supply code. A typical Sourcemapper command seems to be like this:
sourcemapper -output outputdirectory -url https://sampleurl.com
As a substitute of working this manually for every URL, you should use:
mitmdump -q -s script.py -r dump | xargs -n 1 sourcemapper -output output -url
As soon as the command finishes, the unique supply code can be saved within the output listing.
Points with Sourcemapper
I did run into just a few points with Sourcemapper. As an example, the file construction it produces doesn’t precisely match what you see within the browser. All of the recordsdata are recreated, however the nesting is likely to be off. This was acceptable in my case, however chances are you’ll wish to examine additional relying in your use case.
Conclusion
I’m glad I can view the unique JS/TS code of most web sites. Nonetheless, if you wish to maintain your code personal, be sure you’re not publicly publishing your sourcemaps. Nearly all main construct instruments help eradicating sourcemaps from public directories.
P.S.: At one level, I thought-about patching Firefox’s supply code to dump all of the generated sourcemaps to the native file system. That’s in all probability one of the simplest ways to get probably the most correct supply code. Nonetheless, Firefox’s construct course of is sluggish, and the tactic I’ve shared right here labored effectively sufficient for my wants.
