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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay