Testing sites for the multi-device web
requires a different set of tools
than desktop web development.
Hi.
I'm Pete, a developer advocate at Google.
I'm going to show you my workflow
and how you can use it to make sure
that your sites look amazing on any device.
I always start on my desktop with my browser window
sized to about 400 pixels to mimic
the narrow viewport of a phone.
It also makes it really easy for me to resize the browser window
to see how things will look across different viewport
sizes.
Once I've got the basics down, including my layouts,
my primary break points, and so forth, I
open up Chrome's built-in emulation tools and the iOS
simulator.
Emulators and simulators are great tools.
While they're not always 100% accurate,
they'll almost always get the job done.
Chrome's emulation tools allow you to emulate everything
from screen size, to device pixel ratio,
to touch, even a few of the hardware
inputs like geolocation and the accelerometer.
Starting the emulator is easy.
Simply open up the dev tools and hit
Escape to show the console drawer.
Then select the emulation panel.
From there, pick the device that you want to emulate,
and hit the Emulate button.
Chrome does the rest automatically.
Now here's a quick tip.
Because mobile devices are usually in portrait,
dock the dev tools to the side instead of the bottom
to better use of the space that you've got on screen.
For iOS testing, I usually start with the iOS simulator,
which can be downloaded from Apple's iOS developer center.
It gives me a good idea of how my pages are
going to look and behave.
Using Chrome's emulation features and the iOS simulator,
I'm usually able to find and fix about 80% of the issues
that I come across.
For the other 20%, I almost always
have to switch to a real device.
Remote debugging allows me to inspect, debug, and analyze
the on-device experience with the full suite of tools
that I'm used to, but on my desktop computer.
To use remote debugging in Safari, go to Safari's settings
and check the Show Develop menu in menu bar check box.
Say that 10 times fast.
Next, connect your iOS device to your Mac via USB,
and then on the iOS device, open the page
that you want to debug in Safari.
Now on your desktop, find the device
in Safari's Develop menu, and choose the browser page
that you want to debug.
At this point, Safari's Web Inspector is ready to go.
Sweet.
The initial setup for Chrome is a little bit more involved,
and it requires that you enable the USB debugging
in the developer options panel.
If you don't see the developer options panel,
try going to Settings, then About Phone, and hit the
build number seven times.
Yeah, seriously, seven times.
Thankfully you only need to do that once per device.
If you're running Windows, you'll
probably also need to install the device drivers as well.
Once you've done that, the process is much easier.
Connect the device to your computer via USB,
and open the page that you want to debug.
Then on your desktop, open chrome://inspect.
You should now see all the tabs open on your device
in your desktop browser.
If you don't, make sure that the Discover USB Devices is checked
and that there aren't any pop-ups on the device asking
for permission.
You can even access files served locally from your computer
or from a private network with port forwarding.
Chrome remote debugging also supports screencasting.
Click the screencast icon in the upper right-hand corner
and Chrome brings the experience of your device
into your dev tools window, allowing
you to keep your attention on one screen instead of having
to switch back and forth, and back and forth,
and back and forth between the device and dev tools.
Now keep in mind, screencasting captures
screenshots and sends them to your desktop.
So there is a small cost overhead involved.
Remote debugging is amazing if you've
got the devices you need, but what if you get a bug
report for a device that you don't have
or that isn't available where you live?
Or better yet, you want to automate some of your tests.
For that, I use one of the remote testing services
like BrowserStack, Sauce Labs, or DeviceAnywhere.
These remote testing services offer cloud-based access
to real and emulated browsers and devices.
Through these services I can interact with the device
as if it were right there in front of me.
My interactions are carried through directly
to the device or emulator.
Some of these services even offer APIs
that I can use for automated testing.
For example, unit tests, end-to-end tests, or screenshot
capturing for visual regression tests.
Now that's my web-development workflow.
I start by using my desktop browser
for my initial iteration.
Next I move to emulators and simulators
for the bulk of my work.
I pull out real devices for polishing in verification.
And when I don't have the device I need,
I try and find it on one of the remote testing services.
Then I'm ready to ship.
[? Whoohoo. ?]
If you're not making sure that your site works
for the multi-device web, why not?
I've just shown you three easy ways
that you can get started today.
Thanks for watching.