Responsive Design View added to Firefox 15

Events happening in the community are now at Drupal community events on www.drupal.org.
dhalbert's picture

Firefox 15 has a new "Responsive Design View" (Tools->Web Developer->Responsive Design View) which lets you set the dimensions of the displayed page to a number of standard sizes. You can also drag the lower right corner for custom sizes, and there's a "rotate" button.

This is quite convenient for testing responsive layouts, and the really nice thing is that Firebug is still full width and does not narrow to the displayed page. I always found it painful to use Firebug when debugging narrow layouts by narrowing the browser.

Firefox 15 is out today, August 28. Update from Help->About Firefox

Comments

I love this feature!! Sam.

samwillc's picture

I love this feature!!

Sam.

Chrome can do this too

butler360's picture

I didn't know it until I saw your post, but I looked it up and Chrome has a similar feature.

Click the gear icon in the bottom-right, choose "overrides" and then change the device metrics.

The Firefox one does look nicer, though.

Thanks a lot !!!

tomkis's picture

I didn't know !!! , It will make my life a lot easier, thanks for sharing.

Same here. Thanks for the

Bob Newby's picture

Same here. Thanks for the info.

This is extremely Helpful!

suntog's picture

I am in the process of setting up media queries for a big site that is NOT omega. This will be extremely helpful, my desk is getting littered with devices.

@suntog, lol. You can't beat

samwillc's picture

@suntog, lol.

You can't beat testing on actual devices though! You can find little quirks that don't show up when only changing screen dimensions via a browser. My footer on my site looked great at 320px across, on my actual phone though, the link styling colours were wrong, so back to the css, a few changes and done. The point is, I wouldn't have known this unless I tested on my actual phone.

Sam.

Too much stuff

suntog's picture

Naturally you still have to test on the actual devices. But it's nice to have a quick check when you are working in a local environment. The built in emulator on the macbook pro is painfully slow. Actually I like having the devices littering my desk. Although I must say I am having a hard time keeping track of what does and doesn't have retina display.

duplicate

suntog's picture

duplicate

Omega Framework

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week