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

Question

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

如果做不到这一点，有没有一种方法可以在我自己的代码中找到并遍历所有类，以便我可以将所有类名转储到控制台？

Answer 1

不幸的是，我不知道如何通过 Chome Dev Tools 做到这一点。

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

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

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()