Print the DOM role tree

PrintDomRoleTree.js

// Paste this in your Chrome/FireFox console
// The DOM accessibility tree will be printed
 
function getRoleTree() {
  var tree = { text: "document", children: [] };
  var dataTree = { 'core' : { 'data' : [ tree ]}};
 
  var walk_the_DOM = function walk(node, tree, func) {
    tree = func(node, tree);

    if ((node.style !== undefined) && (node.style.display === 'none')) {
            node = undefined;
    }
    else
    {
        node = node.firstChild;   
    }
    
    while (node) {
        walk(node, tree, func);
        node = node.nextSibling;
    }
  };
 
  var result = walk_the_DOM(document.body, tree, function(node, tree) {
    if (node.nodeType === 1) {
        if(node.hasAttribute("role"))
        {
            var treeNode = {
                text: node.attributes["role"].nodeValue,
                children: [],
                html: node.innerHTML.replace(/(\r\n|\n|\r)/gm,"").replace(/\s{2,}/g, ' ').trim().substring(0,120)
            };
            tree.children.push(treeNode);
            return treeNode;
        }
    }
    return tree;
  });
 
  printTheTree(tree);
}
 
function printTheTree(tree) {
  var level = 0;
  window.gridCount = 1;
  window.CheckDomTreeObj = {
    gridLevel: -1
  }
  console.clear();
  console.log('%c Accessibility tree             ', 'color: #ffffff; background: #CC6600; font-weight: bold; font-size: 14px;');
  printNode(tree,level+1);
  window.gridCount = undefined;
}
 
function printNode(node, level) {
 
  var spaces = '';
  for (var s=0;s<=level;s++) { spaces += '  '; }
  var prefix = (node.children.length >0) ? '+' : '';
  var flags = window.CheckDomTreeObj;
  
  var style = '';
  var warning = ''; 
  switch (node.text)
  {
    case "grid":
      style = 'color: #ffffff; background: #990000';
      node.text = "grid (" + window.gridCount + ")";
      flags.gridLevel = level;   
      window.gridCount++;
      break;
    case "row":
      style = 'color: #ffffff; background: #CC3300';
      if (level >= flags.gridlevel) {
        warning = ''
      }
      break;      
    case "gridcell":
      style = 'color: #ffffff; background: #CC6600';
      break;
    case "columnheader":
      style = 'color: #ffffff; background: #CC6600; font-weight: bold;';
      break;      
    default:
      style = 'background: #222; color: #bada55';
  }
 
  if (warning != '')
    console.log(spaces + prefix + '%c !!! ' + warning + ' ', 'color: #000000; background: #ffff00');
    
  console.log(spaces + prefix + '%c ' + node.text + ' ', style, '    - "' + node.html + '"');
 
  if (node.children.length >0)
  {
    for(var i=0;i<node.children.length;i++) {
      printNode(node.children[i],level+1);
    }
  }
}
 
getRoleTree();