Print window dimensions with browser variables for responsive tests

Introduction

Regardless of using a browser extension or add-on, i use a self coded snippet that prints window dimensions and browser variables on screen viewport. You can achive screen dimensions on Chrome Developer Console or Firefox's Firebug or Web Developer Toolbar. I prefer this snippet that stays on screen permanently without opening any development panel.

Preview

Creating function

First of all, let's create a function that will be triggered with window load and resize.

var windowSizePrint = function() {
}

Assigning window dimensions to variables

var windowWidth = $(window).width();
var windowHeight = $(window).height();

Append holder div only once with checking its length

  if (!$("#window-size-info").length) {
    $('body').append('<div id="window-size-info"><div><span class="w"></span> X <span class="h"></span></div><style type="text/css">#window-size-info{z-index:9999999;position:fixed;right:0px;bottom:30px;padding:3px 8px;font-family:"Open Sans","Lato",Tahoma;font-size:15px;color:#fff;background-color:#000;box-shadow:0 0 0 2px#fff;}</style></div>');
  }

Write dimensions to inner spans

$('#window-size-info span.w').text(windowWidth);
$('#window-size-info span.h').text(windowHeight);

Trigger windowSizePrint function with window resize and load events.

$(document).ready(windowSizePrint);
$(window).load(windowSizePrint);
$(window).resize(windowSizePrint);

Create a variable that holds browsers' user agent.

var nua = navigator.userAgent;

Create an object that holds boolean variables created with regex.

var browser = browser || {};
browser = {
  nua            : nua,
  html           : $('html').attr('class'),
  webkit         : /webkit/gi.test(nua),
  gecko          : /gecko/gi.test(nua),
  mobile         : /Mobile/gi.test(nua),
  windows        : /Windows/gi.test(nua),
  mac            : /Mac OS/gi.test(nua),
  chrome         : /Chrome/gi.test(nua),
  firefox        : /Firefox/gi.test(nua),
  apple          : /Safari/gi.test(nua),
  ipod           : /iPod/gi.test(nua),
  iphone         : /iPhone/gi.test(nua),
  ipad           : /iPad/gi.test(nua),
  android        : /Android/gi.test(nua),
  androidVersion : /Android/gi.test(nua) ? nua.match(/Android ([0-9\.]+);/)[1] : "",
  ie             : /MSIE/gi.test(nua),
  ie11           : /MSIE 11/gi.test(nua),
  ie10           : /MSIE 10/gi.test(nua),
  ie9            : /MSIE 9/gi.test(nua),
  ie8            : /MSIE 8/gi.test(nua),
  ie7            : /MSIE 7/gi.test(nua),
  ie6            : /MSIE 6/gi.test(nua),
  operaMini      : /Opera Mini/gi.test(nua),
  ucBrowser      : /UCBrowser/gi.test(nua),
  x64            : /WOW64/gi.test(nua),
  x86            : /WOW86/gi.test(nua),
  tablet         : $(window).width() >= 768 && /Mobile/gi.test(nua),
  desktop        : $(window).width() >= 768 && !/Mobile/gi.test(nua),
  phone          : $(window).width() < 768 && /Mobile/gi.test(nua),
};

Group console logs to prevent them cover up console window.

For loop brings together all of the variables to browserVariable string variable.

console.groupCollapsed("browser variables");
var browserVariables = "";
for (var prop in browser) {
  if (browser.hasOwnProperty(prop)) {
    console.log(prop + " : " + browser[prop]);
    browserVariables += prop + " : " + browser[prop] + "\n";
  }
}
console.groupEnd();

Last step, write browser variables to inner div's title to make them apper on mouse hover

$(function() {
  $("#window-size-info > div").attr("title", browserVariables);
});

Complete snippet as a github gist

Live demonstration from codepen.

Resize window or hover over black div, to see changes.

See the Pen Window Dimension Print by Ömer Aslanbakan (@Aslanbakan) on CodePen.