Source Maps

  • Multiple build tools minify/uglify the final deployed assets
  • They also create something called source maps, with extension ending with .map
  • These source map files have information on how to map a line from the deployed file to the original file type
  • For example if chrome dev tools has access to source maps, then it will directly show the reference in the original typescript file instead of the minified js file
  • Source maps can be of any file type and build system, for example:
    • CSS pre-processors like scss
    • typescript
  • Source maps can be deployed to production or avoided, they simply give access to the original source code instead of ugly code, but security wise code whether ugly or not is still accessible in client machine
  • ref: https://web.dev/articles/source-maps