 So here we are next to a rainy river our natural environment for working on code Yeah, and this one's gonna be on DevTools. So it's DevTools rain and boats. Nothing synthetic about this in the slightest Right, so today we're talking about responsive toolbar now for a while in DevTools We've had device mode which has been useful for like building responsive sites This is sort of an evolution of that tooling So some of the new things we've added our support for this little toolbar that lets you toggle between like different mobile sizes Like medium large tablet desktop, but we've also improved at device emulation So if we switch over to Nexus 5x for example, you now get a little bit of device artwork from Android showing on the top and the bottom Yeah, and then they've added an extra little drop down where you can then say you want portrait with a navigation bar Which is like Chrome's URL bar, but you can also do portrait and landscape with keyboard as well Which is kind of nice, especially if you're doing like form input just to see how it renders Nice little step up as well. That's kind of cool You also have a drop down for being able to say, you know How much of the viewport you want to occupy for your actual device preview and we've got this little menu with a few extra options in here So one of the things that you might have tried out before is the show media queries Option super useful it basically like parses out the media queries in your page And you can just see what your page looks like at different different media query breakpoints I already have some beef with this because if you try and use it as is After you've selected a device it doesn't nothing But if you go to the responsive mode and drop down and then click on it, then it starts working. What are you talking about Matt? It's all perfect. It's all perfect. No, it needs an issue. Okay, you file a bug on that Other things that we include in here include Show device pixel ratio so you can switch up your device pixel ratio settings Another thing that I usually have on is network throttling So if you're building to be resilient against like really flaky network conditions or li-fi or anything like that Network throttling can be useful to toggle on Usually you can have on like a good like 3g or 2g setting and that just means that when you're loading up your page We're gonna throttle that connection and it'll show up It'll load up a little bit more slowly and it's kind of nice just having that there because otherwise You bury it in the network thing. It's way too easy to leave it on some random setting start looking at the elements fixing other problems It's nice just having it constantly there in the responsive mode You can also like let's say you're building an app like a progressive web application and you've got service worker support You can also switch on offline to try out your service worker and just make sure it's working well offline It would be great. There's just like one button like disable internet. Yeah, just it's just the airplane icon That's what you need done Folks we're asking about ruler support. So we've got a show rulers option there wasn't there before it's now back You can check that out for you like rulers Some of the newer stuff that we've been playing with are the ability to trigger add to home screen So let's say you wanted to emulate your application manifest experience You can click trigger add to home screen. It'll bring up this message at the very top That says, you know add this site to your shelf to use at any time You can click add and it'll bring up a little prompt that says okay Well, what do you want to customize the name of this thing too and the idea behind this is that it's supposed to Like just emulate the add to home screen experience you get on Android Yeah, and it's kind of annoying because before you'd have to do it on your phone You need something to download the manifest file and normally the reason you'd want to do that is because if there's a problem in your manifest file And Chrome wasn't happy it wouldn't pass it and it's just tricky to debug so having this like Hard way of just saying go and download it and pass it is Insanely helpful when you just do it as a reminder We also have another little panel called sensors which lets you go and emulate different sensors So like you can emulate geolocation coordinates device orientation And you can decide whether or not you want to emulate touch based on your device or whether you want to do force touch force enabled Yeah, that's about it for the responsive toolbar and the new device mode. Yeah