DevTools Device Mode: Totally Tooling Tips (S3, E5)

Key Takeaways

[Music] so here we are next to a Rainy River our natural environment for working on codes yep and this one's going to be on dev tools so it's Dev TOS rain and boats nothing synthetic about this in the sliest right so today we're talking about responsive tool bar now for a while in Dev tools we've had device mode which has been useful for like building responsive sites this is sort of an evolution of that tooling so um some of the new things we've added are support for this little toolbar that lets you toggle between like different mobile sizes like medium large tablet desktop but we've also um improved device emulation so if we switch over to Nexus 5x for example you now get a little bit of device artwork um 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 um but you can also do portrait and landscape with key board 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 dropdown 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 um different media query breakpoints I already have some beef with this because if you try and use it as is after you selected a device it does 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 Mt it's all perfect it's all perfect no it need an issue okay you file a bug on that y um other things that we include in here include um show device pixel ratio so you can switch up your device pixel ratio settings uh another thing that I usually have on is Network throttling so if you're building um to be resilient against like really flaky Network conditions or lifi or anything like that Network throttling can be useful to toggle on um 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 um we're going to throttle that connection and and it'll show up it'll load up a little bit more slowly than normally would 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 um 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 um to try out your service work and just make sure it's working well offline it would be great if it was just like one button like disable internet yeah just it's just the airplane icon that's all you need done um folks uh were asking about ruler support so we got a show ruler option there wasn't there before it's now back um you can check that out if you like rulers some of the newer stuff that we've been playing with um are the ability to trigger ad to home screen so let's say you wanted to emulate your we 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 any time um you can click add and it'll bring up a little prompt that says okay what do you want to customize the name of this thing to and the idea behind this is that it's supposed to like just emulate that add a home screen experience you get on Android yeah and it was kind of annoying because before you'd have to do it on your phone you need something to download 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 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 um as a reminder we also have another little panel um called sensors which lets you go and emulate different sensors so like you can emulate ducation coordinates device orientation um and you can decide whether or not you want to emulate touch based on your device or whether you want to do Force touch uh Force enabled um yeah that's about it for the responsive toolbar and the new device mode yeah [Music]