Javascript 有没有办法在Chrome开发者工具中显示所有定义的类名？

我有一个REACT Javascript应用程序，它使用CSS、SCC和“useStyles（）”的组合动态定义了大量样式。有没有一种简单的方法可以让我准确地看到Chrome开发者工具中定义了哪些类名

---

如果不行，是否有一种方法可以在我自己的代码中找到并迭代所有类，以便将所有类名转储到控制台

不幸的是，我不知道如何通过Chome开发工具实现这一点

是否有一种方法可以在我自己的代码中找到并遍历所有类，以便将所有类名转储到控制台

类似这样的内容（或以适合您的方式格式化数据的变体）应该为您提供所有类名：

function getAllClasses() {
    // get all the tags
    const allTagsArray = [...document.getElementsByTagName("*")];

    // get a flattened list of each tag's classList
    const allClasses = allTagsArray.map(tag => [...tag.classList]).flat();

    // get a Set of those classes to remove duplicates
    const uniqueClasses = new Set(allClasses);

    // sort alphabetically and join all the classes by newline for display/readability
    const allUniqueClassesJoinedByNewline = [...uniqueClasses].sort().join('\n');

    console.log(allUniqueClassesJoinedByNewline);
}

getAllClasses()

---

检查DOM并查看存在的类有什么错？定义是指脚本中某个地方正在使用的类名？或者仅仅是项目中所有现有类名的列表？我们试图解决的核心问题是，我们编写的应用程序已经发展到包含来自不同作者的许多组件，其中一些具有重叠的类名和冲突的属性。根据我们在应用程序中采用的路径，我们最终会得到一个给定类名的完全不同的样式，并且为了帮助协调这些差异，我们希望有一种方法可以在应用程序的不同点检查所有的类名，这样我们就可以准确地指出发生了什么变化以及发生了什么。谢谢-这正是我想要的！在对你的答案进行一点重构之后；您可以复制这行代码并在开发工具的控制台中执行：

[…新集合（[…document.getElementsByTagName（“*”）.map（tag=>[…tag.classList]）.flat（））].sort（）.join（'\n'）