File Under: Browsers

New Firefox Developer Tools Help You Build Responsive Websites

Firefox 15 will offer web developers a couple of cool new tools when it arrives later this year, including a very handy new “Responsive Mode” for testing your responsive websites.

It took a while for mainstream websites to catch on, but these days even Google recommends using responsive design, and now Firefox is adding tools to help web developers do just that. Mozilla developer Paul Rouget recently added Responsive Mode to Firefox’s nightly builds channel.

If you’d like to see the new Responsive Mode in action, grab the Firefox Nightly Channel and head to Tools >> Web Developer >> Responsive Mode.

In case you’ve been too busy delivering supplies to the International Space Station to keep up, “responsive web design” means using fluid grids, fluid layouts and @media queries to adapt your website to the plethora of different screen sizes on today’s (and tomorrow’s) web. Whether your visitor is on a phone, an iPad or a gargantuan desktop monitor, your website adapts.

Firefox 15′s new Responsive Mode developer tool is essentially just a window within a window — allowing you to resize a website without actually resizing your Firefox window. The inner window mimics the viewport of the device you’d like to see your site running on. It’s a small, but very handy feature for quickly testing your mockups and responsive breakpoints.

Responsive Mode can also rotate the orientation of the “screen” so you can see what your layout looks like in landscape mode. Responsive Mode includes some common screen sizes in a drop down menu which can be helpful, but for mockups we suggest resizing by hand and finding the natural breakpoints of your design, rather than building for any specific screen size (which is likely to change in the future). And bear in mind that while Firefox’s Responsive Mode is nice for mockups and development, it’s no substitute for testing on actual devices.

If you’d like to see Responsive Mode in action without downloading Firefox Nightly, check out this short demo video from Rouget:

Firefox 15 will also add a new option to the HTML element inspector tool — Layout View. Layout View offers a nice visual overview of HTML elements with a diagram of the selected element, along with any margins, borders and padding that have been applied to it.

While long-time web developers may be more accustomed to using Firebug for web development (or perhaps WebKit’s developer tools), Mozilla has put quite a bit of effort into its new developer tools — and it shows. These latest new features see Mozilla moving beyond just playing catchup to offer some unique tools that just might bring some WebKit dev tool fans back to the Firefox fold.

Firefox 13 is due to be released tomorrow, which means, assuming all goes well in testing, Firefox 15 and the new developer tools will arrive in final form about three months from now.