A Less (or Sass) Mixin and Javascript Function to create a tiny tool tip displaying the current Width and Media Queries being displayed. Oh and they are color coded. Built using Bootstrap.

Window Width jQuery, Javascript Function

function whatWidth() {
	if (!$("#width").length) {
		$("body").append('<div id="width" class="dev alert alert-info"><p><strong><span class="pixels">100</span>px</strong> </p></div>');
	}
	var width = $(window).width();
	$("#width .pixels").text(width);
}
 
whatWidth();
 
$(window).resize(whatWidth);

Window Width LESS Mixin

#width {
	.box-shadow(none);
	border-color: transparent;
	background-color: rgba(0, 0, 0, .5);
	margin-bottom: 0;
	.opacity(1);
	padding: .2em .5em;
	position: fixed;
		left: 10px;
		bottom: 10px;
	.transition(opacity .3s ease-out);
	width: auto;
	z-index: 9000;
	
	p {
		color: #fff;
		font-size: .9em;
		margin: 0; 
		padding: 0;
		text-align: center;
		&:after { display: none; }
	}
 
	&:hover {
		.opacity(1);
		p:after { display: inline-block; }
	}
	
}
 
@media (max-width: (@screen-xs-min - 1) ) {
	#width p { color: @brand-primary; }
	#width p:after {
			content: " |  @screen-xs-min - 1 [<= 479px]";  
	} 
}
 
@media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
	#width p { color: @brand-success; }
	#width p:after { 
			content: " |  @screen-xs-min - @screen-xs-max [480px - 767px]";  
	} 
}
 
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
	#width p { color: @brand-info; }
	#width p:after { 
		content: " |  @screen-sm-min - @screen-sm-max [768px - 991px]"; 
	}
}
 
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
	#width p { color: @brand-warning; }
	#width p:after { 
		content: " |  @screen-md-min - @screen-md-max [992px - 1199px]"; 
	}
}
 
@media (min-width: @screen-lg-min) {
	#width p { color: purple; }
	#width p:after {
		content: " |  @screen-lg-min [> 1200px]"; 
	}
}

Window Width SASS

#width {
	@include box-shadow(none);
	border-color: transparent;
	background-color: rgba(0, 0, 0, .5);
	margin-bottom: 0;
	@include opacity(1);
	padding: .2em .5em;
	position: fixed;
		left: 10px;
		bottom: 10px;
	@include transition(opacity .3s ease-out);
	width: auto;
	z-index: 9000;
	
	p {
		color: #fff;
		font-size: .9em;
		margin: 0; 
		padding: 0;
		text-align: center;
		&:after { display: none; }
	}
 
	&:hover {
		@include opacity(1);
		p:after { display: inline-block; }
	}
	
}
 
@media (max-width: ($screen-xs-min - 1) ) {
	#width p { color: $brand-primary; }
	#width p:after {
			content: " |  $screen-xs-min - 1 [<= 479px]";  
	} 
}
 
@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
	#width p { color: $brand-success; }
	#width p:after { 
			content: " |  $screen-xs-min - $screen-xs-max [480px - 767px]";  
	} 
}
 
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
	#width p { color: $brand-info; }
	#width p:after { 
		content: " |  $screen-sm-min - $screen-sm-max [768px - 991px]"; 
	}
}
 
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
	#width p { color: $brand-warning; }
	#width p:after { 
		content: " |  $screen-md-min - $screen-md-max [992px - 1199px]"; 
	}
}
 
@media (min-width: $screen-lg-min) {
	#width p { color: purple; }
	#width p:after {
		content: " |  $screen-lg-min [> 1200px]"; 
	}
}