SVG from page

svgFromPage.js

var body = document.body,
    html = document.documentElement;

var height = Math.max(body.scrollHeight, body.offsetHeight,
    html.clientHeight, html.scrollHeight, html.offsetHeight);
var bbox = document.body.getBoundingClientRect();
var svg = '<svg width="' + bbox.width + '" height="' + height + '" viewBox="0 0 ' + bbox.width + ' ' + height + '"><style>rect {-webkit-user-select: none; user-select: none; pointer-events: none; stroke: red; stroke-width: 2px; fill: rgba(0,0,0,.05);}</style>';
Array.prototype.forEach.call(document.querySelectorAll('*:not(.notMe)'), function(ele) {
    var style = getComputedStyle(ele);
    if (style.display.toLowerCase() !== 'none') {
        var pos = ele.getBoundingClientRect();
        var width = (style.width === 'auto') ? pos.width : style.width;
        var height = (style.height === 'auto') ? pos.height : style.height;
        var y = pos.top;
        var x = pos.left;
        if (x > 0 && y > 0) {
            var parentCount = countParents(ele);
            var element = '<rect class="parents' + parentCount + '" x="' + pos.left + '" y="' + pos.top + '" width="' + width + '" height="' + height + '" />';
            svg += element;
        }
    }
});
svg += '</svg>';
var overlay = document.querySelector('.overlay');
if (!!!overlay) {
    var temp = document.createElement('div');
    temp.classList.add('notMe');
    overlay = body.appendChild(temp);
    overlay.style.cssText = 'position: absolute; top: 0; left: 0; z-index: 99999;';
}

overlay.innerHTML = svg;

function countParents(ele, i) {
    i = i || 0;
    if (ele.tagName.toLowerCase() === 'html') {
        return i;
    } else {
        if (typeof ele.parentNode!=='undefined') {
            return countParents(ele.parentNode, ++i);
        } else {
            return i;
        }
    }
}