Is there a way to show all defined classNames in the Chrome developer tools?

user_1518927 0
Viewed 1426

I have a REACT Javascript app that dynamically defines a ton of styles using a mix of CSS, SCCS and "useStyles()". Is there a simple way I can see exactly which classNames have been defined in the Chrome developer tools?

Failing that, is there a way I can find and iterate through all the classes in my own code so that I might dump out all the class names to the console?

reactjs google-chrome javascript
1 Answers

I don't know of a way to do this through Chome Dev Tools unfortunately.

is there a way I can find and iterate through all the classes in my own code so that I might dump out all the class names to the console?

Something like this (or a variation that formats the data in a way that works for you) should give you all the class names:

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