Develop and test websites for multiple devices using new Firefox tools

In a recent Firefox Nightly release, Firefox has added a “Responsive Mode” to their built-in web developer tools. The new Responsive Mode tool creates a window inside of your web browser that can be dragged to test your responsive website at different viewport dimensions, includes presets for common device dimensions in a drop-down menu, and also has a nifty “Rotate” button to toggle the currently selected viewport dimensions between portrait and landscape modes.

I’ve played around with Responsive Mode in a pre-release of Firefox 16 and I like it a lot. You can of course test responsive designs already in any web browser by dragging the viewport to narrower dimensions, but I like the new Responsive Mode tool better because:

Your actual browser dimensions stay the same so when switching to other tabs they’re unchanged which I like a lot
The presets for various device dimensions are handy
The rotate button to switch between portrait and landscape orientations is snappy and a great time-saver

Watch the short screencast I recorded demonstrating it’s capabilities:

One feature I hope they’ll add is the ability to add your own custom presets for device dimensions.

The feature should be present in FF15 and later, to be released later this year, probably around September 2012.