Docking inspector for responsive design testing

A super quick alternative to resizing your entire browser window to test responsive designs.

I used to spend an age resizing browser windows to test responsive layouts but I swapped to having a single browser running at full size with the website I’m working on loaded in several tabs rather than several different windows.

The reason for this is simple, I was told I should dock the Chrome inspector to the right instead of the bottom of the window and simply resize the inspector to quickly test media queries. The browser stays the same size, you test in however many tabs you want and it’s just that little bit less hassle. Here’s what I mean. Not groundbreaking by any means but I have to say I’ve found it a very useful way to quickly compare and test stuff at different breakpoints. The same technique applies if you’re working with vertical media queries, just dock the inspector to the bottom of the browser window.

@NHoizey also points out that if you’ve not seen it, Firefox has a responsive design view built in that might also be worth checking out.

If you’re interested in the colourful debug bar at the bottom, that’s just a little snippet using body:before from our debug stylesheet.

Credit for this goes to Stu Robson who showed me a video of someone doing the same thing but I can’t find it so figured I should do a copy.

Thanks to the many folks who have tweeted this tip, and shared their own. Feel free to add your own in the comments too.

Posted 1 year ago on · Permalink