Bootstrap 3.x中使用的.map文件是什么?

小开

这些是源地图。将这些文件与压缩源文件一起提供;Firefox和Chrome等开发工具将使用它们来进行调试，就像代码没有被压缩一样。

小开

最佳答案

许多开发人员使用CSS预处理器生成CSS样式表，如Sass、Less或Stylus。因为CSS文件是生成的，所以直接编辑CSS文件没有多大帮助。

对于支持CSS源映射的预处理器，DevTools允许您在Sources面板中实时编辑预处理器源文件，并且无需离开DevTools或刷新页面即可查看结果。当您检查由生成的CSS文件提供样式的元素时，Elements面板将显示到原始源文件的链接，而不是生成的. CSS文件。

小开

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

小开

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

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

小开

对于任何来这里寻找这些文件的人(比如我)，你通常可以通过在URL末尾添加.map来找到它们:

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

请务必将版本替换为您正在使用的Bootstrap的任何版本。

小开

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

这篇文章使用实用的方法解释源映射。

小开

什么是CSS映射文件?

它是一个JSON格式的文件，将CSS文件链接到它的源文件，通常是在预处理器中编写的文件(即Less, Sass, Stylus等)，这是为了从web浏览器对源文件进行实时调试。

什么是CSS预处理器?例子:Sass, Less, Stylus

它是一个CSS生成器工具，使用编程能力来健壮而快速地生成CSS。

小开

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

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