Responsive Web Design with DevTools' Device Mode | Hacker News Reader

Responsive Web Design with DevTools' Device Mode

blog.chromium.org

157 pointsAshleysBrain35 comments

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?

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.

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.

> not being able to close the tools in order to see the bottom of the screen

Right-side docking solved that for me.

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

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.

Yeah, it has been in Canary and beta channel for a while now. But not all developers run Canary.

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.

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.

I am very happy to see the throttling.

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

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.

Dunno which version of FF you last used but, it does and you can.

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.

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

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.

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

How do you pinch zoom with a mouse?

Shift+drag. :) https://developer.chrome.com/devtools/docs/device-mode

Thank you!

Paul Irish responded to me. swoons

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.

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

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.

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.

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.

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.

Well management doesnt want outside devices on their network so its hard to test an internal app mean for technicians on a VPN.

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.

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.

Sauce Labs provides a tunneling app (Sauce Connect) for testing firewalled applications securely on mobile emulators with some real devices coming online shortly.

they also offer remote chrome debugging.

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.

And... time to update chrome.

Freaking awesome!

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

Reply on news.ycombinator.com