Browser debug button

by Stepan Suvorov

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
copy it to bookmarks: <br/>
<a id="out" href="#" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-flash"></span> Debug Button</a>

CSS

#out {
    display: block;
    padding: 20px;
}

JavaScript

function debug_switcher() {
    var secret_key = 'localhost',
        debug_key = 'debug'; //if you want to have several switcher
    if (document.getElementById('debugId') === null) {
        var a = document.createElement('script');
        a.type = 'text/javascript';
        a.src = 'http://stepansuvorov.com/useIt/js/cookies.js';
        a.id = 'debugId';
        a.onload = debug_switch;
        document.getElementsByTagName('head')[0].appendChild(a);
    } else {
        debug_switch();
    }

    function debug_switch() {
        if (getCookie(debug_key) === secret_key) {
            setCookie(debug_key, '')
            alert(debug_key + ' OFF');
        } else {
            setCookie(debug_key, secret_key)
            alert(debug_key + ' ON');
        }
    }
}

var href = 'javascript:' + encodeURIComponent('(function(){' + debug_switcher + 'debug_switcher();})();');
document.getElementById('out').href = href;