Last Updated: February 25, 2016
·
1.077K
· 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

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside