DEV Community

Cover image for Automated Sourcemap SourceContent Extraction by URL
Kerschbaumer Stefan
Kerschbaumer Stefan

Posted on

1

Automated Sourcemap SourceContent Extraction by URL

Today I wrote a nodeJs script called "pack-scraper".

What it does is walking through all script tags within the HTML body fetched from a provided url by the parameter "page" to check if there is any sourceMapUrl provided within any of the loaded Javascript files.

If pack-scraper finds any sourceMapUrls within the javascript files it will clone them to a local folder described by the parameter "outDir" and afterwards extracts the source files from this sourcemap files if available.

so, i.e we could serve a local angular app and execute:
"npm run cli outDir=example page=http://localhost:4200" to basically get the same sourcecode like the project contains if sourcemaps are enabled and the "sourceContent" array isn't empty.

Please note that this is a tool developed for analyzing.

You may wondering what happens with lazy loaded javascript files in Angular applications for example?

Those files are currently not automatically added to extraction, so if you wanna unpack them also you need to click through all routes in a i.e Angular page and finally provide the obtained script list to "additionalScripts" parameter seperated by a comma.

Since this scraper should basically be focused on Angular applications I am anyway planing on implementing a Class to analyze the mainbundle and finally its subbundles so it can extract paths and automate this process.

To get a list of available commands execute "npm run cli help" after cloning and running "npm i"
The sourcecode can be found here: https://github.com/xsip/pack-scraper

Alt Text

Heroku

Amplify your impact where it matters most — building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup 🚀

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

👋 Kindness is contagious

Dive into this thoughtful article, cherished within the supportive DEV Community. Coders of every background are encouraged to share and grow our collective expertise.

A genuine "thank you" can brighten someone’s day—drop your appreciation in the comments below!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found value here? A quick thank you to the author makes a big difference.

Okay