This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "DevTools Devices Mode" Lesson
[00:00:00]
>> Mike North: The thing I wanna talk about next is, now that we have this app running, hopefully you got a chance to measure it and maybe you tried to see that tree diagram where we can see the breakdown of things. This is great in terms of instrumenting things, but we also wanna make sure that we can see what this thing looks like on a mobile device.
[00:00:18] So let's talk for a moment about kind of simulating what it is to see this app on mobile. So the first thing that you should reach for in Chrome, and also in Firefox, and I believe Safari, now. They have a devices mode where you can pick a popular mobile phone version like a Google Galaxy 5S, or something like that, or an iPhone 6.
[00:00:46] And it will set the screen dimensions exactly to what you can expect there because that's probably the highest level problem that people typically encounter. Something's too wide or the text wraps when they shouldn't. There are certain very narrow versions of iPhones, like if you try an iPhone SE size here.
[00:01:05] I think the shopping cart icon might wrap on to a second row on the app bar. So we can see that even with this, which I did not put that in there as a bug for you to find, that was just I failed to checked that one thing.
[00:01:20] But this is a great starting point. You should think of it as really limited to two things, or really, three things. One is the screen dimensions, the second is the user agent. So there are sometimes things that will sniff user agents and do certain things for like a mobile OS.
[00:01:40] Maybe you know there's a special mobile version of some site and you wanna be sure that you get that if you hit it with an iPhone user agent. This would be effective for testing that, and the third is a little difficult to see on the right, here, but you can provide simulated input for certain types of sensors.
[00:01:57] So you can provide GPS coordinates, and if your web application requests the user's latitude and longitude, and the browser supports that. You can say, let's pretend I'm in Antarctica, and it'll read you location there, and your app will behave accordingly. Which is great for testing things where, maybe if you're in an airport and you're building the Delta app, you could have something that pops down and have maybe a test that you could run, where you can simulate that really easily.
[00:02:30] Also, you can simulate orientation, you can change the way touch events happen. So by default, when you're in this device mode, you're going to be aligned much closer to the way mobile events work, in terms of a long press representing a right-click. So everyone knows how that works, right?
[00:02:48] You know how you tap to select text, you kind of hold on it and then you can sort of stretch it out? So clicking in the screen with your trackpad or your mouse. It will feel more like mobile style. But you can opt out of that at the bottom here with this touch option go away from device-based to the other option, which it sorts of best up style.
[00:03:10] So great, but limited. This is still in Chrome. This is not the same thing that's running on your devices.