如何按加载顺序轻松查看样式表列表 Google Chrome
How to easily see a list of stylesheets in the order they are loaded in Google Chrome
我对一件有点简单的事情感到困惑，确定 CSS 样式表在 Google Chrome 中的加载顺序。
我原以为只需转到 Dev Tools -> Network tab -> filter for Stylesheets 即可显示浏览器在样式表中加载的顺序（从而正确级联）。但是，当我多次重新加载时，开发工具中显示的顺序似乎是随机变化的。 select Timeline、Start Time 还是 End Time 都没有关系，我似乎无法复制由 HTML 确定的顺序。
我错过了什么？
样式表文件本身可以按任何顺序加载（它们通常是并行加载的）但它们将在处理正确的顺序，因此如您所见，您不能依赖“网络”选项卡。
您应该能够检查 document.styleSheets 不过。尝试将其放入控制台。它将 return 一些内联样式表的空值，但应该以正确的顺序获取导入的文件：
;(function() { for(var i = 0; i < document.styleSheets.length; i++){ console.log(document.styleSheets[i].href); } })()
我对一件有点简单的事情感到困惑，确定 CSS 样式表在 Google Chrome 中的加载顺序。
我原以为只需转到 Dev Tools -> Network tab -> filter for Stylesheets 即可显示浏览器在样式表中加载的顺序（从而正确级联）。但是，当我多次重新加载时，开发工具中显示的顺序似乎是随机变化的。 select Timeline、Start Time 还是 End Time 都没有关系，我似乎无法复制由 HTML 确定的顺序。
我错过了什么？
样式表文件本身可以按任何顺序加载（它们通常是并行加载的）但它们将在处理正确的顺序，因此如您所见，您不能依赖“网络”选项卡。
您应该能够检查 document.styleSheets 不过。尝试将其放入控制台。它将 return 一些内联样式表的空值，但应该以正确的顺序获取导入的文件：
;(function() { for(var i = 0; i < document.styleSheets.length; i++){ console.log(document.styleSheets[i].href); } })()