media query debugger. just enable or disable

_debug.scss

@mixin debugmessage($message, $color: rgba(255,255,0, 0.9) ){
    body::before{
		content: $message;
		font-weight: bold;
		display: block;
		text-align: center;
		background: #{$color};
		position: fixed;
		right: 0;
		left: 0;
		top: 0;
		z-index: 999;
	}
}

@media only screen and (max-width: 480px) {
	@include debugmessage("max 480 BASE", 'grey');
}


@media only screen and (min-width: 481px) {
	@include debugmessage("min-width 481");
}

@media only screen and (min-width: 768px) {
	@include debugmessage("min-width 768", 'green');
}

@media only screen and (min-width: 1030px) {
	@include debugmessage("min-width 1030", 'pink');
}

@media only screen and (min-width: 1240px) {
	@include debugmessage("min-width 1240", 'orange');
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {

	@include debugmessage("RETINA", 'blue');
}

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {

  // iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)

}