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

如果您只是想摆脱错误,您还可以删除此行bootstrap.css:

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

从使用Chrome DevTools中的CSS预处理器:

许多开发人员使用CSS预处理器生成CSS样式表,例如Sass,Less或Stylus.由于生成了CSS文件,因此直接编辑CSS文件并没有那么有用.

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

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

对于那些来这里寻找这些文件的人(像我一样),你通常可以通过添加.map到URL的末尾找到它们:

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

请确保使用您正在使用的任何版本的Bootstrap替换该版本.

引导程序css可以由Less生成.map文件的主要用途是将css源代码链接到chrome dev工具中较少的源代码.正如我们以前那样.如果我们检查chrome dev工具中的元素.你可以看到css的源代码.但是如果在包含bootstrap css文件的页面中包含映射文件.您可以看到适用于您要检查的元素样式的代码较少.

您是否曾经发现自己希望您可以保持客户端代码的可读性,更重要的是可调试性,即使您已经合并并缩小它,而不会影响性能？那么现在你可以通过源地图的魔力.

本文使用实用方法解释源映射.