5 ms·

Firefox has had this feature for a long time...

toxican 12y ago
If only it came preset with a few common resolutions. Or at the very least make it easier to set your own presets. As it stands you have to resize the window to the size you want and save it. You can't just input a resolution and save it.
- adwf 12y ago
  Dunno which version of FF you last used but, it does and you can.
macinjosh 12y ago
I was just going to say the same thing. Firefox's web tools have become dramatically better recently and everyone I mention it to say Chrome's are still better. I don't think those people have looked at Firefox in a really long time. I much prefer Firefox's tools to Chrome's.
paulirish 12y ago
Firefox is doing awesome work and had something similar in place a while ago. But there are some significant differences between these two. * devicePixelRatio emulation. If you have density-dependent assets (srcset/image-set()), it'll retrieve those. You can also pinch-zoom and it'll behave like it does on the device, it's easy to see that low dpi assets are not sharp. * viewport emulation. Whatever values you have in your <meta viewport> we honor and apply the same way. * Network throttling, the interactive view of media queries, device presets, UA spoofing. Geolocation and accelerometer sensor emulations. That said, Firefox has an easy screenshot button that we like a lot and will add something similar. So you can get a png of your site, but within the actual device. Maybe a nice shadow underneath. Something to drop into an email and send around. :)
- richbradshaw 12y ago
  Do you know when the new iPhones will be added to the devices menu? Or whether we will be able to save devices and curate the list? I'd like to add 1080p and 720p screens into the list for some tv screen sized apps I'm building, and to be able to star some of the more common devices while demoting some of the less common ones.
  - paulirish 12y ago
    We'll add the new iPhones as soon as we confirm their metrics and UA; should be this week. You can already save custom presets. A better UI is coming, but right now. click the "…" icon on the right to expand the full emulation menu. Then set your UA or device metrics and click Save As. http://gyazo.com/fa0ae2fe62482e372989f3099d72bfc6 http://gyazo.com/fa0ae2fe62482e372989f3099d72bfc6
- likeclockwork 12y ago
  How do you pinch zoom with a mouse?
  - paulirish 12y ago
    Shift+drag. :) https://developer.chrome.com/devtools/docs/device-mode https://developer.chrome.com/devtools/docs/device-mode
    - likeclockwork 12y ago
      Thank you! Paul Irish responded to me. swoons

If only it came preset with a few common resolutions. Or at the very least make it easier to set your own presets. As it stands you have to resize the window to the size you want and save it. You can't just input a resolution and save it.

adwf 12y ago
Dunno which version of FF you last used but, it does and you can.

macinjosh 12y ago

I was just going to say the same thing. Firefox's web tools have become dramatically better recently and everyone I mention it to say Chrome's are still better. I don't think those people have looked at Firefox in a really long time. I much prefer Firefox's tools to Chrome's.

paulirish 12y ago

Firefox is doing awesome work and had something similar in place a while ago. But there are some significant differences between these two. * devicePixelRatio emulation. If you have density-dependent assets (srcset/image-set()), it'll retrieve those. You can also pinch-zoom and it'll behave like it does on the device, it's easy to see that low dpi assets are not sharp. * viewport emulation. Whatever values you have in your <meta viewport> we honor and apply the same way. * Network throttling, the interactive view of media queries, device presets, UA spoofing. Geolocation and accelerometer sensor emulations. That said, Firefox has an easy screenshot button that we like a lot and will add something similar. So you can get a png of your site, but within the actual device. Maybe a nice shadow underneath. Something to drop into an email and send around. :)

richbradshaw 12y ago
Do you know when the new iPhones will be added to the devices menu? Or whether we will be able to save devices and curate the list? I'd like to add 1080p and 720p screens into the list for some tv screen sized apps I'm building, and to be able to star some of the more common devices while demoting some of the less common ones.
- paulirish 12y ago
  We'll add the new iPhones as soon as we confirm their metrics and UA; should be this week. You can already save custom presets. A better UI is coming, but right now. click the "…" icon on the right to expand the full emulation menu. Then set your UA or device metrics and click Save As. http://gyazo.com/fa0ae2fe62482e372989f3099d72bfc6 http://gyazo.com/fa0ae2fe62482e372989f3099d72bfc6
likeclockwork 12y ago
How do you pinch zoom with a mouse?
- paulirish 12y ago
  Shift+drag. :) https://developer.chrome.com/devtools/docs/device-mode https://developer.chrome.com/devtools/docs/device-mode
  - likeclockwork 12y ago
    Thank you! Paul Irish responded to me. swoons