Testing responsive breakpoints

Switching between the different breakpoints is something I’ve been needing to do quite frequently. It’s part of testing our screens that are supposed to be responsive. And in conversations with the developers when discussing a particular bug, it would help if I can easily jump to the breakpoint in question. I’ll be listing here what I’ve been using so far–not just the ones for resizing, but tools that had been handy in this area so far.

• Chrome Dev tools a.k.a. my work bestie. I’ve added in the list of Emulated Devices the ones that I particularly need a lot.

• Window Resizer Chrome extension

• What is my screen resolution? – Because I don’t have my screen resolutions memorized. I admittedly have to keep on looking it up.

• mattkersley/Responsive-Design-Testing – I downloaded the files in this repo and tweaked accordingly so that the frames correspond to the ones I need. This is primarily just for a quick view across the different resolutions. You can’t really test the functionality of the page via those iFrames.

• JRuler – Sometimes you just need a ruler because your man-calipers (i.e., your fingers) just aren’t that accurate. It’s a portable app that’s been in my Dropbox for who knows how long. But since it’s still able to do what it’s supposed to, I haven’t felt compelled to look up a replacement.

That’s about it. Maybe I’ll just edit this post in case I come across other tools for responsive web testing while I’m in my current project.