如何在Google Chrome中获取所有已加载CSS类的列表？

有时我需要打印CSS类的列表以找到合适的类

最适合我的是一个类似于JS控制台的函数：当您键入时，JS类列表会被加载和过滤

例如，如果我需要记住一个图像类，我键入“Img”，然后加载一个图像类列表（“ImgFolder”、“ImgPencil”…）。

var allTags=document.body.getElementsByTagName（'*'）；
var classNames={}；
对于（var tg=0；tg

资料来源：

代码将为您提供一个数组中页面上所有类的列表。这应该足以让你开始。如果您需要帮助筛选类，请留下评论，我将编辑答案

---

编辑：误解了这个问题

你还没理解我的问题。我所说的所有类都可以加载大量外部CSS文件，甚至不应用于任何HTML元素。是的，我知道有这样的属性，当然可以提取更深层的数组并正确处理它们，但我正在寻找一种浏览器扩展，可以很好地做到这一点，建议过滤类列表。关于这个问题的有趣阅读：-基本上没有办法不使用代理读取外部样式表

var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
    var tag = allTags[tg];
    if (tag.className) {
      var classes = tag.className.split(" ");
    for (var cn = 0; cn < classes.length; cn++){
      var cName = classes[cn];
      if (! classNames[cName]) {
        classNames[cName] = true;
      }
    }
    }   
}
var classList = [];
for (var name in classNames) classList.push(name);
alert(classList);