CSS Sourcemap适用于Firefox,但不适用于Chrome

时间:2017-09-13 14:07:11

标签: css less source-maps

在基于JSF 2的大型遗留项目中,我正在尝试使用less4j设置更少的样式表。

我的测试页面正在加载一个简单的import.min.css样式表,由less编译和压缩。

除了Chrome上的源地图外,一切正常。

查看DevTools Sources选项卡时,我可以在最后看到带有sourcemap的已编译css:

main css file with sourceMappingURL at the end

使用chrome://net-internals/#events,我可以检查Chrome是否正在调用源地图.map网址。

在同一个标​​签中,我可以看到从源地图中检索到导入的.less文件,我可以毫无问题地浏览它们:

list of less files retrieved from css sourcemap

content of a less file, retrieved by the sourcemap

因此,Chrome浏览器似乎已经很好地理解了源代码。

但是在DevTools Elements选项卡中,当检查DOM元素时,Chrome只显示已编译的CSS引用:

Chrome DevTools Elements tab, not working

相反,Firefox完美地处理了源图:

Firefox Elements tab, working

源图内容可能是正确的,因为Firefox处理它并且Chrome在其Source选项卡中解析它。那么,我做错了什么?

0 个答案:

没有答案