Last Updated: February 25, 2016
·
882
· davidbrai

Bookmarklet to add red border on all dom elements

The javascript snippet below toggles a red border on all the dom elements of the page.
This is quite useful when something starts behaving strange and you're chasing some misplaced element or unnecessary extra margin.

(function() {
    var rbh = document.getElementById('red-border-hack');
    if (rbh) {
        rbh.remove();
    } else {
        rbh = document.createElement('style');
        rbh.setAttribute('id', 'red-border-hack');
        var css = '* { border: 1px solid red !important; }';
        rbh.appendChild(document.createTextNode(css));
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(rbh);
    }
})();

Pull requests are welcome:
https://github.com/davidbrai/js-red-border