How can I use JavaScript source maps (.map files)?

by

The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the source map will help take your ugly file, and will allow you to see the original version of the code. If you didn’t have the source map, then any error would seem cryptic at best.

Same for CSS files. Once you take a Sass or Less file and compile it to CSS, it looks nothing like its original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.

So, to answer you questions in order:

  • What is it for? To de-reference uglified code
  • How can a developer use it? You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
  • Should I care about creating a js.map file? If you care about being able to debug production code easier, then yes, you should do it.
  • How does it get created? It is created at build time. There are build tools that can build your .map file for you as it does other files. Sourcemaps fail if the output file is not located in the project root directory #71

I hope this makes sense.

More Related Contents:

  1. How do I generate sourcemaps when using babel and webpack?
  2. Disable source maps in Chrome DevTools
  3. Performance impact of using css / javascript source-maps in production?
  4. Explanation of …
  5. Accessing Redux state in an action creator?
  6. Google Maps API v3: How to remove all markers?
  7. Get list of filenames in folder with Javascript
  8. How to know if a font (@font-face) has already been loaded?
  9. JavaScript data grid for millions of rows [closed]
  10. How to write your own custom legends for google line chart/ Google line chart legend manipulation
  11. Using async/await inside a React functional component
  12. How to update React Context from inside a child component?
  13. How to round float numbers in javascript?
  14. Select 5 random elements
  15. Does the onchange event propagate?
  16. How to save svg canvas to local filesystem
  17. width/height after transform
  18. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  19. JavaScript: How to get setInterval() to start now? [duplicate]
  20. Override function (e.g. “alert”) and call the original function?
  21. bootstrap popover not showing on top of all elements
  22. jQuery trigger action when a user scrolls past a certain part of the page
  23. ESRI : Failed to parse source map
  24. How do I add button on each row in datatable?
  25. Force page zoom at 100% with JS
  26. JavaScript single line ‘if’ statement – best syntax, this alternative? [closed]
  27. JQuery UI Tabs Causing Screen to “Jump”
  28. How to create a sleep/delay in nodejs that is Blocking?
  29. Empty “for” loop in Facebook ajax
  30. Does Firebase JavaScript API catch-up with server when re-connected

Leave a Comment