 Here we are back in our natural environment next to lifeless barges and Wild life that probably hates us, but it stopped raining. So we're right up raining look on the plus side the tooling gods are being kind today, so DevTools People have wanted a dark theme built in for quite some time No, you've wanted the dark theme so people can ask you what DevTools theme is Addy using Let's picture a world where that might be true Now if you went to settings you could actually enable such a beautiful theme under appearance So let's go. Let's go try that out and see if it works So what that'll do is it'll instantly re-theme all of DevTools and device mode as of the build that we're using today And so you can go and you can check out all the different panels We can try out like recording timeline stuff just to see how well this looks on different paints So here we can see timeline looks great You can do all your screenshots stuff looks good Resources sources panel network profiles all this stuff has been optimized to look really good with this theme So it's kind of neat people should maybe check it out. Yeah So one of the other things that's recently been added to DevTools is the security panel, which is much more exciting Questionably more exciting. We're important questionably So basically what the security panel will do is if you've got HTTPS setup for your site and everything's fine There's literally no reason you really need to go here Because for the most part you should be fine But if you've got something wrong with your site like this one where it's served over HTTPS But it's not the red padlock or the green padlock. It's the usual like piece of paper The security panel will actually tell you why so in this case is saying the pages are secure because it's using a char one Certificate does the double check you're not on adios money.com. No, I think you're okay I couldn't I couldn't use your site as a bad example despite my attempt But it's also helpful things like you've got mixed content So in this case, we've got one blocked mixed content and in this case you can click on the network panel And it takes you to that one resource. So it's a JavaScript file that it's been blocked But it's just basically a super clean and super nice way of debugging half the problems And it's really useful if you find that Chrome's doing something weird and you don't really understand why it's doing what it's doing Yeah, that's the place to go. That's cool So do you know the way that like on your site your site looks really pretty? I'm kind of jealous because your site looks better than mine now, but on your site you've got like a mix of System fonts like that people probably have installed and web fonts that you might be learning from like I guess Google fonts or somewhere else, right? If you take a look The wildlife just loves us here. They're just like super stoked about what I'm going to show, right? So here what I'm going to do is I'm going to go and check out the dom tree view Select some text. So here I'm going to just zoom in in styles You can see that we've got this new little side panel called rendered fonts and what this will let you do is see if a font It's currently being used for a particular piece of UI is local meaning the system font or if it's been loaded over the network So that's a system font here. We've got some other text You've got you've got like unit testing a service worker. Yep, heading or something title block content you with your BEM And try you try and here we can see this one has been loaded over the network So it's just a nice little tidbit Well, I used to use like a Chrome extension I want fun for just exactly this because especially if you wanted a font to load and you wanted to figure out Was it the one that I specified or was it the full back? Yeah? Yeah, super nice. I love it So we've got that built in now Another thing I wanted to show so here we've got get bootstrap calm everyone is familiar with this You know half the web is built with this thing at this point And I'm just going to select a piece of UI so I've selected the download bootstrap button, right now over in styles If you take a look let's zoom in we've got a new dot CLS button, and that's basically element classes So what I'm going to do is I'm just going to click on that and what this button has done is it's actually gone and plucked out all the different class names that I have for this dom node and This just lets me go and toggle on and off different classes So here you can see that I'm able to turn this thing off from looking like a button And this type of thing is really useful if you're dealing with state of any kind and you just want to like iterate and play around with your Different classes. Yeah, the nice thing with this is I normally end up just like Unchecking all the styles for a particular class rather than just do what you've done You just disable the entire class altogether. It's really nice Like it cool. So another thing another thing another thing. Yeah, this is how I get kicked off stages at conferences I've had another thing. It's not good This is Paul loses voice memos app. I've currently got the DevTools color picker open and If you hold over any color and the color palette now what you'll see is we actually now show you a whole range of different tints for those colors Just kind of neat so you can like see lighter versions and darker versions of any of those colors here I'm just going to go and select some that's just kind of nice. We actually now show Titles like the hint at alternative shades. This just shows you all the different shades available for particular color that you've selected It's kind of nice avoids you having to go back out to yet another tool to check it out I'm still trying to find it You'll find it something