what are the .map files used for in Bootstrap 3.x?

what are the .map files used for in Bootstrap 3.x?

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.

回答1

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.

This answer explains that they are used in conjunction with CSS preprocessors – something I have not yet explored much. Thanks

回答2

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.

Chrome Edit Styles

Edit Sass, Less or Stylus

If you are using Sass, Less, Stylus or any other CSS preprocessor, editing the generated CSS output files in the Styles editor won't help as they don't map to your original source.

With CSS source maps, DevTools can automatically map the generated files to the original source files, which lets you live-edit these in the Sources panel and view the results without having to leave DevTools or refresh the page. 

The preprocessor workflow

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.

To jump to the source file:

1. Click the link to open the (editable) source file in the Sources panel.
2. Ctrl + Click (or Cmd + click) on any CSS property name or value to open the source file and jump to the appropriate line.

 When you save changes to a CSS preprocessor file in DevTools, the CSS preprocessor should re-generate the CSS files. Then DevTools then reloads the newly-generated CSS file.

Enable/Disable CSS source maps & auto-reloading

CSS source maps are enabled by default. You can choose to enable automatic reloading of generated CSS files. To enable CSS source maps and CSS reload:

1. Open DevTools Settings and click General.
2. Turn on Enable CSS source maps and Auto-reload generated CSS.

Requirements & Gotchas

• Changes made in an external editor are not detected by DevTools until the Sources tab containing the associated source file regains focus.
• Manual editing of a CSS file generated by the Sass/LESS/other compiler will break the source map association until the page is reloaded.
• Using Workspaces? Make sure the generated CSS file is also mapped into the workspace. You can verify this by looking in Sources panel right-side tree, and seeing the CSS is served from your local folder.
• For DevTools to automatically reload styles when you change the source file, your preprocessor must be set up to regenerate CSS files whenever a source file changes. Otherwise, you must regenerate CSS files manually and reload the page to see your changes.
• You must be accessing your site or app from a web server (not a file:// URL), and the server must serve the CSS files as well as the source maps (.css.map) and source files (.scss, etc.).
• If you are not using the Workspaces feature, the web server must also supply the Last-Modified header.

Learn how to setup source maps in Setup CSS & JS Preprocessors.

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

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.

Introduction to JavaScript Source Maps

By Ryan Seddon

Published: March 21st, 2012 Comments: 5

 

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.