what are the map files used for in Bootstrap 3 x

Question

There are two files included in the CSS folder with  map file extensions  They are   bootstrap-theme css map bootstrap css map   They appear to be minified files but I don t know what they are for

User · Answer

For anyone who came here looking for these files (Like me), you can usually find them by adding .map to the end of the URL:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

Be sure to replace the version with whatever version of Bootstrap you're using.

User · Answer

These are source maps   Provide these alongside compressed source files  developer tools such as those in Firefox and Chrome will use them to allow debugging as if the code was not compressed

User · Answer

From Working with CSS preprocessors in Chrome DevTools   Many developers generate CSS style sheets using a CSS preprocessor  such as Sass  Less  or Stylus  Because the CSS files are generated  editing the CSS files directly is not as helpful  For preprocessors that support CSS source maps  DevTools lets you live-edit your preprocessor source files in the Sources panel  and view the results without having to leave DevTools or refresh the page  When you inspect an element whose styles are provided by a generated CSS file  the Elements panel displays a link to the original source file  not the generated  css file

User · Answer

Map files  source maps  are there to de-reference minified code  css and javascript   And they are mainly used to help developers debugging a production environment  because developers usually use minified files for production which makes it impossible to debug  Map files help them de-referencing the code to see how the original file looked like

User · Answer

The bootstrap css can be generated by Less  The main purpose of map file is used to link the css source code to less source code in the chrome dev tool  As we used to do  If we inspect the element in the chrome dev tool  you can see the source code of css  But if include the map file in the page with bootstrap css file  you can see the less code which apply to the element style you want to inspect

User · Answer

What is a CSS map file   It is a JSON format file that links the CSS file to its source files  normally  files written in preprocessors  i e   Less  Sass  Stylus  etc    this is in order do a live debug to the source files from the web browser    What is CSS preprocessor  Examples  Sass  Less  Stylus  It is a CSS generator tool that uses programming power to generate CSS robustly and quickly

User · Answer

Have you ever found yourself wishing you could keep your client-side code readable and more importantly debuggable even after you ve combined and minified it  without impacting performance  Well now you can through the magic of source maps    This article explains Source Maps using a practical approach

User · Answer

If you just want to get rid of the error  you can also delete this line in bootstrap css       sourceMappingURL bootstrap css map

[twitter-bootstrap-3] what are the .map files used for in Bootstrap 3.x?

Examples related to twitter-bootstrap-3

Examples related to source-maps