It’s become almost cliche: the modern web designer or front-end developer sitting there all day, dragging the side of their browser window back and forth, back and forth. They’ve got to make sure your website doesn’t break if it’s truly going to be as responsive as it should be. If you want it to look great on as-yet-unknown future devices it’s crucial no size looks wrong. But there is a better way! Well, if you use Google’s Chrome at least.

I saw this recently mentioned in a tech talk I was watching after hours — don’t judge my hobbies! — about a neat little extension that can make designing responsive web sites a little bit easier.

*The* Responsive Design Chrome Extension?

It’s the Responsive Inspector Chrome Extension. All you’ve got to do is go to that page and install the extension — again, it’ll only work on Chrome — and you’re set. Now you have quick access to all your breakpoints and an easy way to view the CSS rules — just go along the right side of the window and click the curly braces — that are in effect at those locations. Awesome.

But wait, there’s more. Aside from the quick and useful visualization of all the breakpoints in the CSS on the current website, it offers a very handy line that shows you what the width of your current window (it’s the more rightward vertical line). Surely I’m not the only person who’s ever been in the situation of editing some CSS, not noticing the change, resaving, still not seeing the change. I’ll then create a stupid obvious rule, background: red; is one I use a lot, and only after that doesn’t show up realize that my browser was at the wrong width for the rule I was trying to edit.

It’ll also let you quickly snap the current window to any other size. If you click the chevrons on the media query’s block, your window snaps to that size. If you sneak along the ruler you can also get to any specific size and snap to that (the left icon on the hover menu in the screenshot).

The extension can also build and save out an image (unfortunately and confusingly a JPEG) of the current window at a set width all the way through its height. This operation takes a fair amount of time, so you need patience I don’t really have, to get the fully use of our of it. It also was kind of finicky for me even when I practiced my patience. But I’m not gonna complain too loud about a free and useful tool.

Hope it helps you!