A source map is a file that maps minified code (such as ES5 or any Javascript) to the original source code (e.g. ES Modules, Typescript, etc). This makes it easier for developers to debug problems. Source maps aren’t unique to Frontend web development, but the scenario in the article is.

Imagine if I asked you to fix an English subtitle typo in a film that was subtitled in a language you’re unfamiliar with (maybe Mandarin). At first you wouldn’t understand anything in the film, other than the pretty pictures, and struggle to find the correct segment to fix. But later I provide you with an English subtitle file and timestamp for the movie, so you could go find the actual place to fix the issue. This is kind of what source maps are like, they allow us to map from compiled code to the original, making it easier for us to debug and context switch less, saving a lot of time. They also allow us to better understand the original intent, since it’s the actual source.

The source code is the original source at the time it was recorded for the Apple App Store on the web. But will quickly become out of date as changes are made frequently by Apple.

@devxyn@sh.itjust.works will explain 👇