4.1 Emulation

Hey everyone. In this lesson, we're gonna take a look at the emulation panel. The emulation panel allows you to emulate various censors, including screen orientation and size. And to get started, I want you to notice. That I've moved the dev tools over to the right hand side. So it's docked to the right. And here's a little tip. Instead of resizing the browser as a whole, to adjust responsivity of your page. How about docking the dev tools to the right, and resizing that. As you can see here, I'm looking at the dev tools documentation page and it's fairly responsive. Let's test the responsitivity of a different page. The Google homepage. So I'll bring up the dev tools, and immediately we can see that I'm resizing the dev tools and it's like the menu starts adjusting itself but then it kind of gives up. But chances are you've never loaded the Google homepage on a device, and it has looked like this, all cropped. Why could this be happening? Well, I think it's fair to say that they're doing some sort of user agent detection, to serve a mobile-optimized version of the page. And this is convenient for us, since emulation allows us to emulate various devices. Let's emulate the Nexus 5. And as you can see here, it even gives you the settings that will be emulated. That's the view port, the device pixel ration, and the user agent. I'll hit emulate. Now whenever you do this, it's always safe to refresh the page. As you can see, emulation looks fairly successful. In fact, the Google home page clearly thinks I'm on a device and it wants to access my location. What's quite nice about the emulation panel is even when we have these pre-defined device sets. We can also emulate certain characteristics for example the resolution. As you can see that's happening in realtime. If you have some media queries in CSS that targets a certain device pixel ration, this is the place to emulate it. When using the emulation pane you're not forced to pick a certain device preset. In fact, let's reset this. We can still emulate a certain user agent without the whole, device as a whole. Let's set a custom user agent of hello, and note that if I query the navigator.user agent property that correctly returns as hello. Now let's check out senses. Here I am on a page on HTML 5 works, demoing the device orientation events. I'm gonna reset by hitting reset here, and go back to senses. Interestingly enough, we also have the ability to control the acceleromator and that's what this page is reacting to. You get this nice, free d-view and you can control it like this, and this kinda saves us the hassle of having to open up the page on a device and physically move the device around. Let's look at the ability to emulate a touchscreen. Here I am on a page. Which tells me what click or touch events it's detecting on this button. So I'll refresh the page, and if I hover over it, I get lots of mouse move events. I'll click it. And let's check that occurred. Yep, so we got a click event, and mouse moves, mouse outs. Okay, makes sense. Now let's emulate, touch events and see what happens. I will reset. Go up to sensors, emulate touch screen, and refresh the page, just to be safe. And immediately, you'll notice that the mouse icon has changed into a little touch icon, now if I move over the button, we don't get mouse move events. Let me click. Now, what's interesting is, the events that you would expect to be fired on the device are in fact happening here, because we've emulated the touch screen. So this is quite useful. One point I would like to make, is the emulation panel isn't a complete substitute for actual device testing. Remember that if a device has an incorrect implementation of a certain CSS layout mode, for example, like flex box, you're not going to catch that here. But you will catch that on the device. So it's always worth testing on the device, in addition to this. That being said, the Emulation Pane can certainly help your development work flow. See you later.