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. 

<p id="debug-breakpoints"></p>
Figure 1. You need a little HTML. It's easy to show or hide conditionally based on your environment.
// mobile first
#debug-breakpoints:after {
    font-family: FontAwesome;
    background: whitesmoke;
    bottom: 0;
    border: 1px solid lightgray;
    border-radius: 0 8px 0 0;
    box-shadow: 0 0 20px -5px rgba(153,153,153,0.9);
    color: indianred;
    content: "\f10b";
    font-size: 16px;
    font-weight: 700;
    left: 0;
    padding: 5px;
    position: fixed;
    z-index: 99999;
}

// tablet
@media screen and (min-width: 480px) {
    #debug-breakpoints:after {
        content: "\f10a";
    }
}

// desktop
@media screen and (min-width: 780px) {
    #debug-breakpoints:after {
        content: "\f108";
    }
}

// large desktop
@media screen and (min-width: 1040px) {
    #debug-breakpoints:after {
        content: "\f108   \f067";
    }
}
Figure 2. Mobile first media query debugger

Obviously this can be made easier with preprocessors such as Sass or Less. Hope this helps your responsive debugging!

Previous Article Next Article