ALEX DANILO: I really enjoy building websites
that run nicely on all sorts of devices.
From phones to tablets to desktop.
For me, one of the hardest things to do well
is to debug how my site would look
on different sized screens.
I'm sure you know how hard that can be.
Hi, I'm Alex Danilo from the Google Developer platform team.
And I'm going to show you a great feature in the Chrome
DevTools called Device Mode.
Device Mode makes it super easy to experiment with your content
and get your site looking fantastic on any screen.
I've saved so much time using Device Mode
that I get to spend a lot more time making the perfect coffee.
Now, Device Mode lets you try out your CSS media queries,
provides a bunch of built in screen size
presets for lots of devices, lets
you simulate retina displays on a non-retinal device,
and even has a Network Throttling feature that
lets you simulate slow cellphone networks.
So let's take a quick tour through the Device
Mode features to show you how to get going quick [? smart. ?]
The first thing you need to do is
click this little mobile phone icon in Chrome Developer Tools
while looking at your site.
As soon as you've done that, you'll
notice that your site is displayed
in a completely different view.
Now is a good time to refresh your browser window so that it
gets reloaded with the correct viewport and user agent
string settings.
It's really easy to remember to do that since you'll
be prompted to refresh it in a little yellow warning
window at the top of the DevTools.
Device Mode changes a bunch of different things.
Like the user agent string is modified
to match the device it's simulating,
the viewport gets sized to be the same as your target device,
the device pixel ratio gets set to the correct value
for high DPI displays, your text gets autosized
if the target does so, and the content window
displays mobile scroll bars that look the same as they
would on the real target device.
Not only that, but touch events get
turned on so that your mouse no longer triggers hover events.
So no [? colored ?] hover CSS styles will be applied.
And the touch emulation delivers events in the exact same order
as on a real device.
Now, the main control settings you use in Device Mode
are here.
You can choose from a number of different device preset
simply by selecting one of the drop down device options.
You can also set your viewport to a custom pixel
width and height by changing the values shown.
It's easy to change the device pixel ratio here,
which is also super useful if you
want to test that your site is supplying
retina optimized images, for example.
You can also easily flip the orientation from portrait
to landscape and back with this rotation widget.
This makes it so easy to try out different devices
and test that your media queries are working as you'd expect.
Another really handy feature are these drag handles.
Now using Device Mode, it's not necessary to resize the browser
window to see the site in different viewport sizes.
You can just grab these handles and move them around
to see the size change.
Now, what you might have noticed,
too, is that the pixel size displayed in the main control
area updates to tell you what the current size is.
Now one thing to note here is if I choose a preset target
and then drag one of the sizing handles,
it'll reset the preset, since we no longer
match the size of the target device we picked.
You might have noticed this little icon at the top
here, as well.
What that does is enable the media query inspector.
Each of the lines here represents
the CSS media query pixel breakpoints
that the browser's detected in your content.
Now if you click any of those bars,
the content window resizes to match the media
query breakpoint size so that you can quickly
see how media queries effect layout.
This is so quick and convenient it's fantastic.
But even better, you can right click on them
to jump to where the media query is defined in your CSS,
just in case you want to do a quick edit of your styles.
Now, one of the main differences between a desktop device
and a mobile device is the kind of network it's connected to.
And Device Mode provides a great feature
called Network Throttling to help simulation
of different network connections.
Now, as you can see, there are a number
of different types of networks supported
in the throttling drop down.
So typically when you're testing load time on your site,
you'd use the dev tools waterfall view, like this.
That tells us all about our page load and resource load timings.
Now, if I choose a different network speed simulation
and reload, you'll see the page get
loaded under simulated network conditions.
Now, as you can see in our new waterfall,
it took a lot longer to load.
You can even set no network connectivity
to help debug your site if you expect it to work offline.
No more turning off of your network required.
Now, even better, this network throttling only
applies to the currently opened tab,
so you can continue to use your browser as normal,
since only the tab being debugged
that is affected by the network throttler.
Now, of course, since we're simulating mobile devices,
chances are they're touch enabled.
Device Mode enables proper touch simulation using your mouse.
The content gets sent touch events instead of mouse events.
So let's take a look at this text with the Device Mode off.
Now, as you can see, when I hover over it,
the text changes color.
If I turn Device Mode on, no hover events
are sent to the content.
More importantly, the order of touch events
sent to the content is identical to a real device, which
makes it really easy to debug your touch handlers.
There are even more controls for you to explore.
From emulating hardware sensors that are on your device,
changing the user agent stylesheet, and plenty more.
You can also add screencast from a connected device,
and view the rendered content right inside DevTools.
Device Mode brings really, really powerful
debugging capabilities inside Chrome DevTools.
And it's something I'm sure you can't wait to explore.
You'll find the links to our documentation
here, and as always, feel free to reach out
for more information and feature requests.