

Responsive Web Design with DevTools' Device Mode - AshleysBrain
http://blog.chromium.org/2014/09/responsive-web-design-with-devtools.html

======
dkyc
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?

~~~
at-fates-hands
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.

~~~
paulirish
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. :)

------
piratebroadcast
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.

~~~
Igglyboo
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.

------
justinavery
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
I am very happy to see the throttling.

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

~~~
paulirish
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
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
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)

------
sjs382
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.

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

~~~
paulirish
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.

------
wil421
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.

~~~
huskyr
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
Well management doesnt want outside devices on their network so its hard to
test an internal app mean for technicians on a VPN.

------
likeclockwork
And... time to update chrome.

------
andegre
Freaking awesome!

------
lcnmrn
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.

