9

Is it possible to get a proper JavaScript source file if I have the minified file and its corresponding source map?

I know how to prettify JS code (line-breaks and indents), but I would like to get original function / variable names in the file, to be able to better understand the source code.

I would like to get the un-minified JS file to work with, instead of using it to debug in a browser.

PS It is probably somewhere right under my nose, but I didn't manage to find it so far. Sorry if this was already asked!

NPC
  • 1,009
  • 3
  • 10
  • 27

3 Answers3

4

To work sourcemaps requires both files, minified and original, often original is included in sourcemap file(it has optional sourcesContent for sources that can not be hosted).

Sourcemap is just JSON file, and you can found all needed information inside:

  • sources - list of source file names,
  • sourcesContent - optional list of original sources, if source is not presented it would be null here.

Utility script, I have written before for this purpose: https://gist.github.com/zxbodya/ca6fb758259f6a077de7

Bogdan Savluk
  • 6,274
  • 1
  • 30
  • 36
  • In my case there is no original source file. Yet I do see a property "names" in the .map file, I wonder if that maps to the replacement variables alphabetically, will try to match them. Thanks for the idea! – NPC Jun 08 '15 at 23:26
  • Likely there is also `sourcesContent` field with original sources, added link to gist with simple script to save those sources. – Bogdan Savluk Jun 08 '15 at 23:31
  • Nope, sorry, I only have these fields in the JSON: "version", "file", "sources", "names", "mappings", "sourceRoot". – NPC Jun 08 '15 at 23:38
  • I just found out that it's NodeJS https://nodejs.org –  Feb 14 '21 at 14:59
2

I suggest using the Source Map Visualization tool online to view the original code with both js file and js soucemap file.

https://sokra.github.io/source-map-visualization/

arifursdev
  • 123
  • 1
  • 6
-1

I think you won't be able to completely revert such code to its original state as a lot of information (for example comments or certain variable names) is simply lost in the process. When I understand it correctly for sourcemaps to do this you still need the original file.

If you only aim to prettify the code so its readable again you do not need source maps. Many advanced editors have such functions. For example if you are using Sublime text there is this plugin: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify which does a great job.

Also see this similar question: How can I debug a minified JS in firebug?

Community
  • 1
  • 1
frontend_dev
  • 1,693
  • 14
  • 28
  • I know how to prettify it, as I wrote in the question (and I do use ST3's plugin that you mention, it is very cool!), but I would like to get the original variable names back into the minified file. I know not all can be restored, but there seems to be enough information to do at least that. – NPC Jun 08 '15 at 23:28