How to use JavaScript source maps map files

Question

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 map file  How can I  as a JavaScript developer  use the angular min js map file  Should I care about creating  js map files for my JavaScript applications  How does it get created  I took a look at angular min js map and it was filled with strange-formatted strings so I assume it s not created manually

User · Answer

Just to add to how to use map files  I use chrome for ubuntu and if I go to sources and click on a file  if there is a map file a message comes up telling me that I can view the original file and how to do it    For the Angular files that I worked with today I click      Ctrl-P    and a list of original files comes up in a small window     I can then browse through the list to view the file that I would like to inspect and check where the issue might be

User · Answer

Just wanted to focus on the last part of the question  How source map files are created  by listing the build tools I know that can create source maps    Grunt  using plugin grunt-contrib-uglify Gulp  using plugin gulp-uglify Google closure  using parameter --create source map

User · Answer

The  map files are for js and css  and now ts too  files that have been minified  They are called SourceMaps  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 sourcemap will help take your ugly file  and will allow you to see the original version of the code  If you didn t have the sourcemap  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  https   github com gruntjs grunt-contrib-uglify issues 71  I hope this makes sense

User · Answer

The map file maps the unminified file to the minified file  If you make changes in the unminified file  the changes will be automatically reflected to the minified version of the file

User · Answer

How can a developer use it    I didn t find answer for this in the comments  here is how can be used    Don t link your js map file in your index html file  no need for that  Minifiacation tools  good ones  add a comment to your  min js file        sourceMappingURL yourFileName min js map    which will connect your  map file   When the min js and js map files are ready      Chrome  Open dev-tools  navigate to Sources tab  You will see sources folder  where un-minified applications files are kept

[javascript] How to use JavaScript source maps (.map files)?

The answer is

Examples related to javascript

Examples related to source-maps

Tags