We all develop websites on our desktop and laptop machines, so we tend to initially develop for the desktop experience. But that's increasingly out of sync with our users who, more and more, consume the web on mobile. To deliver a great experience for the web, we need to accurately experience it on mobile. Chrome DevTools has had mobile emulation features for awhile, but it's still too disconnected from real device conditions and requires too much trial and error. Chrome 38 Beta includes a new Device Mode that puts you one click away from emulating mobile devices, inspecting media queries, and emulating flaky network conditions.

Every media query gets represented visually, so you can correlate your breakpoints with the viewport. Clicking one resizes the viewport, making it easier to iterate on your associated styles. If you want to edit the media queries themselves, right-click and jump to the line of CSS where it's defined.

Lastly, device emulation needs to accurately represent the connectivity of your mobile users. For example, a 3G connection significantly limits the experience of your website compared to your speedy office WiFi. The DevTools can now help you emulate the network conditions (both throughput and latency) of connectivity like EDGE, 3G, 4G – and even go offline.