Updated version of @mlewand's DOMRect visualisation

README.md

DOMRect visualizer

A small JavaScript helper for visualizing DOMRect objects

Regular version • Minified version

Original source: Gist mlewand/56237c19050d27f61b807ed384dff2db

My changes:

• Refactor to ES6 style
• Function window.markRect() now returns the element for extra stuff like styling
• Function window.deleteRects() to delete all previously created rects

domrect_visualizer.js

/**
 * @author mlewand
 * @see https://gist.github.com/mlewand/56237c19050d27f61b807ed384dff2db
 * 
 * A helper function to visualize DOMRect or set of DOMRect instances.
 * 
 * Subsequent calls will remove previously marked elements.
 * 
 *     Debug a element currently focused in your devtools inspector.
 *     window.markRect( $0.getBoundingClientRect() );
 *     // Debug a selection.
 *     window.markRect( document.getSelection().getRangeAt( 0 ).getClientRects() );
 * 
 * 
 * Original source: https://gist.github.com/mlewand/56237c19050d27f61b807ed384dff2db
 * Updated by [Sv443](https://github.com/Sv443)
 * 
 * Styling example:
 * ```js
 * const [ mark ] = window.markRect(new DOMRect());
 * markElem.style.backgroundColor = "red";
 * ```
 */
( () => {
    const drawnRect = [];

    const createRectDraw = () => {
        const ret = document.createElement( 'div' );
        ret.style.position = 'absolute';
        ret.style.outline = '2px solid red';
        ret.classList.add('debug-rect-marker');
        document.body.appendChild( ret );

        return ret;
    };

    /**
     * Creates an element that marks the passed DOMRectangle(s)  
     * These elements get the class `debug-rect-marker`
     * @param {DOMRect|DOMRect[]} rectangles Accepts a DOMRectangle or an array of them
     * @returns {HTMLElement[]} Returns array of marker elements
     */
    const markRect = ( rectangles ) => {
        const marks = [];

        // Cleanup.
        drawnRect.forEach( ( oldRect ) => oldRect.remove() );

        // Unify format.
        if ( !Array.isArray(rectangles) ) {
            rectangles = [ rectangles ];
        }

        rectangles.forEach( ( rect ) => {
            const curDrawing = createRectDraw(),
                dims = [ 'top', 'left', 'width', 'height' ];

            dims.forEach( ( property ) => {
                curDrawing.style[ property ] = `${rect[ property ]}px`;
            } );

            console.info( 'created debug rect:', curDrawing );

            drawnRect.push( curDrawing );
            marks.push( curDrawing );
        } );

        return marks;
    };

    /**
     * Deletes all rectangles that have been previously created
     * @returns {void}
     * @author Sv443
     */
    const deleteRects = () => {
        const markers = document.querySelectorAll(".debug-rect-marker");

        markers.forEach(elem => {
            elem.innerHTML = "";
            elem.outerHTML = "";
        });

        console.warn(`Deleted ${markers.length} markers`);
    };


    window.markRect = markRect;

    window.deleteRects = deleteRects;
} )();

domrect_visualizer.min.js

/**
 * @author mlewand
 * @see https://gist.github.com/mlewand/56237c19050d27f61b807ed384dff2db
 * 
 * A helper function to visualize DOMRect or set of DOMRect instances.
 * 
 * Subsequent calls will remove previously marked elements.
 *     Debug a element currently focused in your devtools inspector.
 *     window.markRect( $0.getBoundingClientRect() );
 *     // Debug a selection.
 *     window.markRect( document.getSelection().getRangeAt( 0 ).getClientRects() );
 * 
 * 
 * Original source: https://gist.github.com/mlewand/56237c19050d27f61b807ed384dff2db
 * Updated by [Sv443](https://github.com/Sv443)
 * 
 * Styling example:
 * ```js
 * const [ mark ] = window.markRect(new DOMRect());
 * markElem.style.backgroundColor = "red";
 * ```
 */
(()=>{const e=[];window.markRect=(t=>{const r=[];return e.forEach(e=>e.remove()),Array.isArray(t)||(t=[t]),t.forEach(t=>{const o=(()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.outline="2px solid red",e.classList.add("debug-rect-marker"),document.body.appendChild(e),e})();["top","left","width","height"].forEach(e=>{o.style[e]=`${t[e]}px`}),console.info("created debug rect:",o),e.push(o),r.push(o)}),r}),window.deleteRects=(()=>{const e=document.querySelectorAll(".debug-rect-marker");e.forEach(e=>{e.innerHTML="",e.outerHTML=""}),console.warn(`Deleted ${e.length} markers`)})})();