7 ms·

Responsive Web Design with DevTools' Device Mode

157 points by AshleysBrain 12y ago

wil421 12y ago
I hope this works better than the current way. Emulating a device on Chrome isnt really accurate. There are more differences than similarities when I go and test it on an actual device.
- rjv 12y ago
  I've found you'll never get a 100% accurate representation with these "emulators," but it's certainly a good starting point. You're better off using a service like BrowserStack for your in-depth testing.
  - wil421 12y ago
    Interesting I will have to look into BrowserStack. My employer likes me to develop for devices I dont physically have or are not able to test on due to restrictive corporate network policies.
    - justinraczak 12y ago
      Sauce Labs provides a tunneling app (Sauce Connect) for testing firewalled applications securely on mobile emulators with some real devices coming online shortly.
- huskyr 12y ago
  Of course, nothing beats testing a site on the real thing (which you should do anyway). However, the Chrome tools are a big step up in development from just using the regular desktop browser. At least you can easily switch resolutions and emulate touch events.
  - wil421 12y ago
    Well management doesnt want outside devices on their network so its hard to test an internal app mean for technicians on a VPN.
- easytiger 12y ago
  they also offer remote chrome debugging.
- Igglyboo 12y ago
  You probably won't even get 100% accurate device emulation in Chrome but if you can cut your on-device testing down by 75% it should speed things up a lot.
CraigJPerry 12y ago
Is the network bandwidth limiting functionality a common feature in browser dev tools?
- paulirish 12y ago
  Not as far as I know. This is the first time we've been able to do per-tab throttling. Up until now tools like Fiddler, Charles Proxy or Link Conditioner throttle the entire connection. This now lets us take an entire tab offline (to test ServiceWorker or AppCache) and your other tabs are still good.
- Garbee 12y ago
  afaik Chrome is the first browser to have Network Throttling built in in any capacity. Other browsers require you to use external tools to get anything. Those tools also are using a chainsaw to cut bread instead of a knife. They attach to the browser as a whole, not the individual page you want.
andegre 12y ago
Freaking awesome!
piratebroadcast 12y ago
Hasnt this been in Chrome Canary for forever? Not being a smartass but I don't see whats new here. Maybe I need a coffee.
- _mayo 12y ago
  Yeah, it has been in Canary and beta channel for a while now. But not all developers run Canary.
- Igglyboo 12y ago
  Yep I've been using Canary for at least 6 months and It's had it. Moving it to mainline chrome is a big deal however, a lot of people don't use Canary.
shogun21 12y ago
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
dkyc 12y ago
Been using this for a while now. One very annoying thing is the weird caching behaviour of the settings: If I switch into emulation mode on tab #1 and then open the dev tools in tab #2, the second tab will also emulate the same screen resolution. However, when I reset the emulation in tab #2, tab #1 will not be changed. Is there any sense in this behaviour?
- paulirish 12y ago
  I've seen a lot of developers want to simultaneously test a given site with different device characteristics. So here you can have a few tabs open (iPhone, iPad, Samsung S4) all on the same page, with LiveReload so you're getting instant feedback as you develop across all those device types.
- at-fates-hands 12y ago
  My other beef with this is not being able to close the tools in order to see the bottom of the screen. This something you can do in Firefox Aurora. You can open the dev tools, hit the emulator tab, and the responsive window runs on its own you so can see the whole window. The one thing this does really well is the touch events. Firefox dev tools have it too, but it doesn't seem to work as well as on Chrome.
  - elwell 12y ago
    > not being able to close the tools in order to see the bottom of the screen Right-side docking solved that for me.
  - paulirish 12y ago
    The "Fit" checkbox will scale the viewport you've set to fit within the available space. It's actually awesome to have regardless of you needing to emulate a device or not. And yeah, right-docked tools work great here. We've recently changed the default to that. :)
lcnmrn 12y ago
I rather use Monochrome http://lucianmarin.com/monochrome/ http://lucianmarin.com/monochrome/ than that. Why? Because I get the device's "feeling" right there on my desktop.
sjs382 12y ago
This has been out for a while on the Chrome Canary release channel (the nightly build). It's really a great tool, and helps a ton with responsive and mobile development. Kudos to the Chrome team for finally pushing this to the stable release.
justinavery 12y ago
The throttling combined with disabling the cache make this a really handy tool for testing 'mobile'. I agree with the emulation comments — this doesn't replace an emulator and it doesn't replace real device testing. This should be about getting everything working across a variety of viewports and ensuring a fast experience which I think it does a great job at.
- bhhaskin 12y ago
  I am very happy to see the throttling.
likeclockwork 12y ago
And... time to update chrome.

157 points by AshleysBrain 12y ago

I hope this works better than the current way. Emulating a device on Chrome isnt really accurate. There are more differences than similarities when I go and test it on an actual device.

rjv 12y ago
I've found you'll never get a 100% accurate representation with these "emulators," but it's certainly a good starting point. You're better off using a service like BrowserStack for your in-depth testing.
- wil421 12y ago
  Interesting I will have to look into BrowserStack. My employer likes me to develop for devices I dont physically have or are not able to test on due to restrictive corporate network policies.
  - justinraczak 12y ago
    Sauce Labs provides a tunneling app (Sauce Connect) for testing firewalled applications securely on mobile emulators with some real devices coming online shortly.
huskyr 12y ago
Of course, nothing beats testing a site on the real thing (which you should do anyway). However, the Chrome tools are a big step up in development from just using the regular desktop browser. At least you can easily switch resolutions and emulate touch events.
- wil421 12y ago
  Well management doesnt want outside devices on their network so its hard to test an internal app mean for technicians on a VPN.
easytiger 12y ago
they also offer remote chrome debugging.
Igglyboo 12y ago
You probably won't even get 100% accurate device emulation in Chrome but if you can cut your on-device testing down by 75% it should speed things up a lot.

CraigJPerry 12y ago

Is the network bandwidth limiting functionality a common feature in browser dev tools?

paulirish 12y ago
Not as far as I know. This is the first time we've been able to do per-tab throttling. Up until now tools like Fiddler, Charles Proxy or Link Conditioner throttle the entire connection. This now lets us take an entire tab offline (to test ServiceWorker or AppCache) and your other tabs are still good.
Garbee 12y ago
afaik Chrome is the first browser to have Network Throttling built in in any capacity. Other browsers require you to use external tools to get anything. Those tools also are using a chainsaw to cut bread instead of a knife. They attach to the browser as a whole, not the individual page you want.

andegre 12y ago

Freaking awesome!

piratebroadcast 12y ago

Hasnt this been in Chrome Canary for forever? Not being a smartass but I don't see whats new here. Maybe I need a coffee.

_mayo 12y ago
Yeah, it has been in Canary and beta channel for a while now. But not all developers run Canary.
Igglyboo 12y ago
Yep I've been using Canary for at least 6 months and It's had it. Moving it to mainline chrome is a big deal however, a lot of people don't use Canary.

shogun21 12y ago

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

dkyc 12y ago

Been using this for a while now. One very annoying thing is the weird caching behaviour of the settings: If I switch into emulation mode on tab #1 and then open the dev tools in tab #2, the second tab will also emulate the same screen resolution. However, when I reset the emulation in tab #2, tab #1 will not be changed. Is there any sense in this behaviour?

paulirish 12y ago
I've seen a lot of developers want to simultaneously test a given site with different device characteristics. So here you can have a few tabs open (iPhone, iPad, Samsung S4) all on the same page, with LiveReload so you're getting instant feedback as you develop across all those device types.
at-fates-hands 12y ago
My other beef with this is not being able to close the tools in order to see the bottom of the screen. This something you can do in Firefox Aurora. You can open the dev tools, hit the emulator tab, and the responsive window runs on its own you so can see the whole window. The one thing this does really well is the touch events. Firefox dev tools have it too, but it doesn't seem to work as well as on Chrome.
- elwell 12y ago
  > not being able to close the tools in order to see the bottom of the screen Right-side docking solved that for me.
- paulirish 12y ago
  The "Fit" checkbox will scale the viewport you've set to fit within the available space. It's actually awesome to have regardless of you needing to emulate a device or not. And yeah, right-docked tools work great here. We've recently changed the default to that. :)

lcnmrn 12y ago

I rather use Monochrome http://lucianmarin.com/monochrome/ http://lucianmarin.com/monochrome/ than that. Why? Because I get the device's "feeling" right there on my desktop.

sjs382 12y ago

This has been out for a while on the Chrome Canary release channel (the nightly build). It's really a great tool, and helps a ton with responsive and mobile development. Kudos to the Chrome team for finally pushing this to the stable release.

justinavery 12y ago

The throttling combined with disabling the cache make this a really handy tool for testing 'mobile'. I agree with the emulation comments — this doesn't replace an emulator and it doesn't replace real device testing. This should be about getting everything working across a variety of viewports and ensuring a fast experience which I think it does a great job at.

bhhaskin 12y ago
I am very happy to see the throttling.

likeclockwork 12y ago

And... time to update chrome.