Annotates elements on page with their properties (e.g. font size, colour) so you don't have to open dev tools for testing/debugging

annotate-elements.js

function getProp(elem, prop) {
    const propValue = window.getComputedStyle(elem).getPropertyValue(prop);
    return `${prop}: ${propValue}; `;
}

function annotateElements(elems) {
    for (let e of elems) {
        let sBuilder = "<span style='font-size: 8px;'>";
        sBuilder += getProp(e, 'font-size');
        //add more properties if needed e.g.:
        //sBuilder += getProp(e, 'color');
        //sBuilder += getProp(e, 'font-weight');
        sBuilder += '</span>';
        e.innerHTML = sBuilder + e.innerHTML;
    }    
}

for (let tag of ['span', 'a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5']) {
    const elems = document.querySelectorAll('main ' + tag);
    //eliminate empty tags, e.g. <span> that only have spaces inside
    const nonEmptyElements = [...elems].filter(e => e.innerHTML.trim());
    annotateElements(nonEmptyElements);
}