如何按照Google Chrome中加载的顺序轻松查看样式表列表

Question

我对一个简单的事情感到困惑，确定了Google Chrome中CSS样式表的加载顺序。

我想通过简单地转到Dev Tools -> Network tab -> filter for Stylesheets会显示浏览器加载到样式表中的顺序（从而纠正级联）。但是，当我多次重新加载时，Dev Tools中显示的顺序看似随机变化。我是否选择Timeline，Start Time或End Time并不重要。我似乎无法复制HTML确定的订单。

我错过了什么？

Answer 1

样式表文件本身可以按任何顺序加载（它们通常是并行加载的）但是它们将以正确的顺序处理，因此你有看来，你不能依赖网络标签。

你应该能够检查document.styleSheets。尝试将其放入控制台。它将返回内联样式表的一些空值，但应以正确的顺序获取导入的文件：

;(function() { for(var i = 0; i < document.styleSheets.length; i++){ console.log(document.styleSheets[i].href); } })()