How to get a list of all loaded CSS classes in Google Chrome?

Question

Sometimes I need to print a list of CSS classes to find an appropriate one.

The most suitable for me would be a function like in JS console: JS class list is loaded and filtered when you are typing.

So for example if I need to remember an image class I'm typing "Img" and then a list of image classes is loaded ("ImgFolder", "ImgPencil" ...).

Answer 1

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

Source: https://stackoverflow.com/a/23067859/

The code will give you a list of all the classes on the page in an array. That should be enough to get you started. If you need help with filtering the classes, then leave a comment and I'll edit the answer.

EDIT: misunderstood the question. https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets

Answer 2

The accepted answer wasn't working for me, here is my solution which I've tested in FireFox and Chrome and can say is working. This uses DOMContentLoaded to ensure everything has loaded on the page and can accept a boolean to console.log a unique list or not.

return unique function was sourced from: Get all unique values in a JavaScript array (remove duplicates)

Note: The use of the classList.add / .remove is to remove white space and duplicates from the given tokenlist.

  window.addEventListener('DOMContentLoaded', function() {

    function getAllStyleClasses(returnUniqueOnly) {
      let allTags = document.querySelectorAll('*');
      let allClasses = [];

      for(let i = 0; i < allTags.length; i++) {
        if(allTags[i].classList.length > 0) {
          let classes = allTags[i].classList;

          allTags[i].classList.add("_");
          allTags[i].classList.remove("_");

          let nodeArray = Array.from(classes);
          allClasses.push(nodeArray);
        }
      }

      let concatClasses = [].concat(...allClasses);

      if(returnUniqueOnly == true) {
        let uniqueClasses = concatClasses.filter(onlyUnique);
        console.log(uniqueClasses);
      } else {
        console.log(concatClasses);
      }


      function onlyUnique(value, index, self) {
        return self.indexOf(value) === index;
      }
    }

    getAllStyleClasses(true);
  }, false);

Edit: I needed to download this list (using the page name as a title) into a text file with line breaks, save file sourced from: How to create a file in memory for user to download, but not through server?

  window.addEventListener('DOMContentLoaded', function() {

    function getAllStyleClasses(returnUniqueOnly) {
      let allTags = document.querySelectorAll('*');
      let allClasses = [];

      for(let i = 0; i < allTags.length; i++) {
        if(allTags[i].classList.length > 0) {
          let classes = allTags[i].classList;

          allTags[i].classList.add("_");
          allTags[i].classList.remove("_");

          let nodeArray = Array.from(classes);
          allClasses.push(nodeArray);
        }
      }

      let concatClasses = [].concat(...allClasses);

      if(returnUniqueOnly == true) {
        let uniqueClasses = concatClasses.filter(onlyUnique);
        console.log(uniqueClasses);
        let txtOutput = uniqueClasses.join().split(",").join("\n")
        if(confirm("You're seeing this because you're a developer! Download all styles used on this page?")) {
          let pageTitle = document.title.toLowerCase().replaceAll(' ', '-');
          save('styles-' + pageTitle + '.txt', txtOutput);
        }
      } else {
        console.log(concatClasses);
      }

      function onlyUnique(value, index, self) {
        return self.indexOf(value) === index;
      }
      
      function save(filename, data) {
        const blob = new Blob([data], {type: 'text/csv', oneTimeOnly: true });
        
        if(window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveBlob(blob, filename);
        }
        else{
          const elem = window.document.createElement('a');
          elem.href = window.URL.createObjectURL(blob);
          elem.download = filename;        
          document.body.appendChild(elem);
          elem.click();        
          document.body.removeChild(elem);
        }
      }
    }

    getAllStyleClasses(true);
  }, false);