在Chrome DevTools中使用CSS预处理器:

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.

引导css可以由Less生成。map文件的主要目的是用来链接css源代码到chrome开发工具中的less源代码。 如果我们在chrome开发工具中检查元素。你可以看到css的源代码。 但如果包含地图文件在页面与引导css文件。您可以看到应用于想要检查的元素样式的代码更少。

映射文件(源映射)用于去引用最小化的代码(css和javascript)。

它们主要用于帮助开发人员调试生产环境，因为开发人员通常在生产环境中使用最小化的文件，这使得调试变得不可能。映射文件帮助他们取消对代码的引用，以查看原始文件的样子。

如果你只是想摆脱这个错误，你也可以在bootstrap.css中删除这一行:

/*# sourceMappingURL=bootstrap.css.map */

您是否曾经发现自己希望在不影响性能的情况下，即使在组合和缩小客户端代码之后，也能保持其可读性，更重要的是可调试性?现在您可以通过源映射的魔力。

本文使用一种实用的方法解释源映射。

在Chrome DevTools中使用CSS预处理器:

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.