Responsive CSS Debugging Tool

Inspired by Johan Brook’s CSS only approach to debugging media queries, I set out on creating a javascript/css approach using jQuery.

The idea being you have a flexible css file to use for development starting with development and later for production. I wanted the idea to use a CSS file which is easily modified to the needs of the project and a small javascript file to link in for production.

I actually used this plugin and found debugging time was reduced (although this site is far from complete…).

As a side note, I left in the plugin and you can activate it by pressing the T key on your keyboard and drag the browser around. The normal behaviour is on by default.

Source and readme can be found here: https://github.com/cleatsandcode/Media-Queries-Debug-Tools/