Aug 21, 2016
• 2 minute read
By Rand Seay
Responsive design can involve a lot of tweaking, especially in complex interfaces. I find can easily forget precise breakpoint boundaries, which make it that much more painful. Here's a media query debugger I made.
I’ve made differing variations of this simple debugger based on name conventions in each project. Whether I use “small”, “medium”, “large”, or “mobile”, “tablet”, “desktop”, this is easy to customize.
This particular example uses Font Awesome and device widths in the naming convention, but the debugger in my CSS framework Fuselage uses “small”, “medium”, “large”, etc.
There is a working example of this debugger in the bottom left-corner on this page.
Obviously this can be made easier with preprocessors such as Sass or Less. Hope this helps your responsive debugging!