devTools shows viewport dimensions on screen for rwd

devTools

var viewportX = $(window).width();
var viewportY = $(window).height();
var docY = $(document).height();

$('body').append('<div id=\"dev-tools\"></div>');

$('#dev-tools').css('display', 'block').html('<span class="alt-color">width:</span>' + viewportX + 'px <span class="alt-color">height:</span>' + viewportY + 'px <span class="alt-color">docHeight:</span> ' + docY + 'px');

$(window).resize(function () {
    var viewportX = $(window).width();
    var viewportY = $(window).height();
    var docY = $(document).height();
    $('#dev-tools').css('display', 'block').html('<span class="alt-color">width:</span>' + viewportX + 'px <span class="alt-color">height:</span>' + viewportY + 'px <span class="alt-color">docHeight:</span> ' + docY + 'px');
});

$('#dev-tools').hover(function () {
    $(this).toggleClass('switch');
    }, function () {
});

Version 1.01
when you roll over it changes position,

Version 1.02
shows the actual document height

Version 1.03
No longer needs modification of DOM