Simple script to show the current document's width when developing responsive based sites

document width tracker

(function() {
        var d = document.createElement('div')
            , width =  window.document.documentElement[ 'clientWidth' ];

        d.id                = 'documentWidth';
        d.className         = 'active';
        d.innerHTML = '<p>' + width + '</p';

        d.style.position    = 'fixed';
        d.style.top         = '0';
        d.style.left        = '0';
        d.style.width       = '30px';
        d.style.height      = '30px';
        d.style.zIndex      = '10000000';
        d.style.background  = 'white';
        d.style.border      = '1px solid #bada55';
        d.style.textAlign   = 'center';
        d.style.padding     = '10px 10px 0 10px';

        document.body.appendChild( d );
        
        window.addEventListener('resize', function() {
            var d = document.getElementById('documentWidth');
            d.innerHTML = '<p>' + window.document.documentElement[ 'clientWidth' ] + '</p>';
        });

        window.addEventListener('keydown', function( e ) {

            var d = document.getElementById('documentWidth');

            if( e.keyCode === 27 ) {
                d.classList.contains('active') ? (function() {
                    d.style.opacity = 0;
                    d.classList.remove('active');
                    }()) : (function() {
                        d.style.opacity = 1;
                        d.className += 'active';
                    }());
            }
        });
    }());