Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Responsive Web Design with DevTools' Device Mode

blog.chromium.org

Post reply on HN
Print view View original

21–30 of 36 posts

Re: Responsive Web Design with DevTools' Device Mode

#21

Post by paulirish »

shogun21 wrote: post #8

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

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

Re: Responsive Web Design with DevTools' Device Mode

#22

Post by 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.

Re: Responsive Web Design with DevTools' Device Mode

#23

Post by wil421 »

huskyr wrote: post #5
wil421 wrote: post #2

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.

Re: Responsive Web Design with DevTools' Device Mode

#25

Post by bhhaskin »

justinavery wrote: post #22

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.

Re: Responsive Web Design with DevTools' Device Mode

#26

Post by Garbee »

CraigJPerry wrote: post #3

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

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.

Re: Responsive Web Design with DevTools' Device Mode

#27

Post by at-fates-hands »

dkyc wrote: post #15

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?

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.

Re: Responsive Web Design with DevTools' Device Mode

#28

Post by richbradshaw »

paulirish wrote: post #21
shogun21 wrote: post #8

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

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 i…

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.

Re: Responsive Web Design with DevTools' Device Mode

#29

Post by elwell »

at-fates-hands wrote: post #27
dkyc wrote: post #15

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?

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.

Re: Responsive Web Design with DevTools' Device Mode

#30

Post by paulirish »

richbradshaw wrote: post #28
paulirish wrote: post #21

Earlier quoted context omitted.

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 i…

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

Post reply on HN