显示页面的盒结构

showboxes.js

function randomColor(){
    return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
}

function showBoxes(window) {
            var rects = [];
            function getRects(node){
                var range = window.document.createRange();
                range.setStartBefore(node);
                range.setEndAfter(node);
            
                rects.push.apply(rects,range.getClientRects());


                for(var i = 0; i < node.children.length; i++ )
                    getRects(node.children[i]);
            }
            getRects(window.document.documentElement);

            window.open( "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\">"+rects.map(function(rect){
                return "<rect x=\""+rect.left+"\" y=\""+rect.top+"\" width=\""+rect.width+"\" height=\""+rect.height+"\" style=\"fill:"+randomColor()+";fill-opacity:0.1;stroke:black;stroke-width:1;\"/>";
            }).join("")+"</svg>");
}
showBoxes(window);

@wintercn 开个页面，输入网址，咔嚓一下把布局显示出来

svg的位置偏上了，被挡住了一部分

华丽啊