How to use sourcemaps to restore the original file?

javascript source-maps
Gajus picture Gajus · Sep 3, 2015 · Viewed 8.4k times · Source

I have a file that has been transpiled from ES6 to ES5 using Babel. I have sourcemap. I am assuming I can restore the original file (the way it looked when written in ES6) using these resources.

How is it done?

Is there a CLI tool to do this?

Answer

lydell picture lydell · Sep 3, 2015

Open up the source map in a text editor, and you’ll see that it’s mostly just a simple JSON object. The “sources” field contains an array of URLs/paths to all source files, which can help you to find them. There is also an optional “sourcesContent” field, which also is an array, where each item contains the contents of the file at the same index in the “sources” array; if so, you could find the original code right in the source map.

A CLI tool? Well, there’s source-map-visualize which tries to find all original sources and pre-loads them into this online source map visualization.

Related questions

How do I generate sourcemaps when using babel and webpack?

I'm new to webpack, and I need a hand in setting up to generate sourcemaps. I'm running webpack serve from the command line, which compiles successfully. But I really need sourcemaps. This is my webpack.config.js. var webpack = require(…

Read More
How to use JavaScript source maps (.map files)?

Recently I have seen files with .js.map extension shipped with some JavaScript libraries (like Angular), and that just raised few questions in my head: What is it for? Why do the guys at Angular care to deliver a .js.…

Read More
Disable source maps in Chrome DevTools

Is there a quick way to switch from the jsx code shown in Chrome DevTools to the raw ES5 and back again?

Read More