Bookmarklet for DOM node sizes analyzes

bookmarklet.js

javascript:void(()=>{document.addEventListener("click",({target:e})=>{console.log("Parent node count",parentNodeCount(e),"depth of",depthNodeCount(e),"nodes with ",charCount(e),"chars in",e)});const depthNodeCount=e=>e.getElementsByTagName("*").length,charCount=e=>e.outerHTML.length,parentNodeCount=e=>{let t=e,n=0;for(;t.parentNode;)n++,t=t.parentNode;return n};})();

dom_weight.js

// The bookmarklet returns number of parent elements and the childrens of a hover element.
// This is useful for analyze the structure of a DOM component.
// https://developers.google.com/web/tools/lighthouse/audits/dom-size#recommendations
javascript:void(() => {
  document.addEventListener('click', ({target})=> {
    console.log('Parent node count', parentNodeCount(target), 'depth of', depthNodeCount(target), 'nodes with ', charCount(target), 'chars in', target)
  })
  
  const depthNodeCount = (node) => node.getElementsByTagName('*').length
  const charCount = (node) => node.outerHTML.length
  const parentNodeCount = (childNode) => {
    let node = childNode
    let count = 0
    while(node.parentNode) {
      count++
      node = node.parentNode
    }
    return count
  }
})()