Responsive websites are getting more and more mainstream these days. They can be a pain in the ass for bugfixing, especially when clients are mailing bugs/changes without nothing more then a screenshot and some comments.
It’s us, the developers, who have to figure out where and on which layout/browser/os these bugs manifest themselves. This can be a very frustrating & time-consuming task, so that’s why we made ourselves a little helper.
Meet: SUD. It’s a smart little bookmark widget. Some javascript code that creates a small overlayer head-up display (HUD) with a bunch of info.
It gives you:
- A number representing the current “layout” in your responsive site (we like to number our different layouts)
- The current active media query
- All necessary browser info
- All OS info needed
Here is a little screenshot:
SUD is still in BETA, it’s a work in progress. You can find it on github if you want to see how it works.
Or simply start using it now by dragging this link to your bookmarks bar or by creating a new bookmark with this in the link field:
javascript:(function(){s=document.createElement('script');s.type='text/javascript';s.src='https://thesedays.blob.core.windows.net/labs-thesedays-com/sud/td.plugin.sud.min.js?v='+parseInt(Math.random()*99999999);document.body.appendChild(s);})();
If you want the widget to run at page load, just include this script tag:
<script type="text/javascript" src="https://thesedays.blob.core.windows.net/labs-thesedays-com/sud/td.plugin.sud.min.js"></script>
Feel free to check it out and give it a go. And make sure to let us know what you think of it!
Recent Comments