有没有类似 CSS 的源映射的东西？答案

【问题标题】：Is there something like source maps for CSS?有没有类似 CSS 的源映射的东西？
【发布时间】：2013-04-04 18:13:06
【问题描述】：

我正在使用 jQuery 向页面动态添加 CSS 标记：

$('<style type="text/css"/>').text(css).appendTo(document.head);

在 Chrome 开发者工具中查看时，所有 CSS 都显示为“localhost”，这并不总是有帮助：

有没有类似 CSS 的 Source Maps 之类的东西可以让我向调试器识别 CSS 的来源？

【问题讨论】：

只是好奇，不想让你解释你的整个项目，但你到底为什么要以这种方式添加样式表？在提供模板之前有条件地添加样式表肯定会解决这个问题，并且当注入这样的动态 CSS 时，浏览器所需的重新渲染工作会大大减少......
Chrome 在识别远程、页面和元素级 CSS 方面做得很好。 localhost 只是您的默认页面，并且可能是您动态添加的 CSS 的正确来源。不过，我和@joeellis 在一起，我不喜欢动态创建 CSS 的想法。应尽早将其添加到响应流中，以便浏览器可以使用它稍后进行渲染，而不必根据动态添加的更改不断地重新渲染元素。
@joeellis 这是一个用于更大框架的插件系统。插件可以做一些事情，比如将 CSS 和 JavaScript 添加到页面，在主应用程序初始化之后但在它开始其主循环之前进行评估。奇怪的胶水代码需要奇怪的胶水解决方案:)

【解决方案1】：

在添加时将 sourceURL 添加到内联样式标签。

/*@ sourceURL=mystyles.css */

这将为该内联样式标签提供一个临时名称，该名称将在 DevTools 内部用于导航。

【讨论】：

【解决方案2】：

它正在识别 CSS 的来源。它只显示为 localhost，因为样式的来源来自 localhost 主页上的内部 javascript。如果您单击指向规则位置的链接，它仍应将您带到动态设置样式的内联 javascript。

对于源映射，您是否尝试过展开“Computed Style”部分，然后展开您想要查看继承层次结构的特定样式？

【讨论】：