Javascript function that helps to develop responsive, easily showing changes between breakpoints

responsivehelper-how-to-use.js

$(document).ready(function() {
    responsiveHelper([
        {size: 1199, label: "xlarge"},
        {size: 1049, label: "Large"},
        {size: 799, label: "medium"},
        {size: 576, label: "small"}
    ]);
});

responsivehelper.min.js

function responsiveHelper(e){var r=["red","blue","green","pink","purple","yellow"];jQuery("body").append('<div id="responsivehelper"></div>'),jQuery("body").append("<style>.responsivehelper-bar{display:none;}</style>"),jQuery.each(e,function(e,p){var i=p.size,n=p.label;jQuery("body").append("<style>@media screen and (max-width: "+i+"px){.responsivehelper-bar."+n.toLowerCase()+"{display:block;}}</style>"),jQuery("#responsivehelper").append('<div class="responsivehelper-bar '+n.toLowerCase()+'" style="position:fixed; bottom:0; left: 0; width: 100%; height: 30px; line-height:30px; text-align:center; color: #fff; font-size: 30px; background: '+r[e]+"; z-index: "+(999+e)+'; ">'+n+"</div>")})}