DEV Community

Discussion on: Explain sourcemaps

 
ben profile image
Ben Halpern

I’m not sure the whole landscape but I’m pretty sure there are tools that allow deciphering prod bugs in this way, and I feel like there are also uses for this mapping in CSS -> SASS land.

But not really my expertise, perhaps someone else will jump in and give a better explanation.

Thread Thread
 
charrondev profile image
Adam Charron • Edited

I tried to reply to this comments parent but can only see some text that says “thread” where the reply should be so I’m replying here.

Chromes pretty print is still not enough. I’m unsure if the latest dev tools could point to the correct line or not, but it would still likely not matter.

If you pretty print a single line compiled file, there will still be multiple things wrong while debugging such as

  • what was the original file called (and the line it) before the file went through a module bundler or concatenation.
  • What was the name of of the variable or function? Uglify probably reduced down to only 1 or 2 letters.
  • What was the syntax of the original code? Transpires like Babel or typescript concert new syntax into old syntax. Play around on the Babel transformer a bit to see what type of code actually gets emitted. babeljs.io/repl/ some transforms like a sync/await look totally foreign when transpiled.