More DevTools Tips, Totally Tooling Tips (S3, E7)

[Music] here we are back in our natural environment next to lifeless barers and Wildlife that probably hates us but it stopped raining so we're right it has stopped raining look on the plus side the twoing gods are being kind today so Dev tools people have wanted a dark theme built in for quite some time know you've wanted the Dark theme so people can ask you what Dev to theme is Addie 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 with that'll do is it'll instantly rethe all of Dev tools and device mode as of the build that we're using today um 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 pains so here we can see timeline looks great you can do all your screenshot 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 Dev tools is the security panel which is much more exciting questionably more exciting more important questionably more important so basically what the security panel will do is if you've got htps setup for your s and everything's fine there's literally no reason you really need to go here um 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 surfed over htps but it's not the red padlock or the green padlock it's the usual like piece of paper um the security panel will actually tell you why so in this case it's saying the page isn't secure because it's using a Shan certificate just to double check you're not on adm.com no I think you're okay I couldn't I couldn't use your site as a bad example despite my my attempt um but it's also helpful for things like you've got mixed content so in this case we've got one blocked uh 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 has been blocked um but it's just basically a super clean and super nice way of debugging half the problems um 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 awesome do you know the way that like on your site your site looks really pretty I'm kind of jealous cuz your site looks better than mine now but um on your site you've got like a mix of um system fonts like that people probably have installed and web fonts that you might be loaring from like I guess Google fonts or or somewhere else right um 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 and select some text so here I'm going to just zoom in in Styles you can see that we've got got this new little side panel called rendered fonts and what this will let you do is see if a font that's currently being used for a particular piece of UI is local meaning it's a system font or if it's been loaded over the network so that's a system font here we've got um some other text you've got you've got like unit testing service worker y heading or something title block content you with your bem um and try you try and here we can see that this one has been loaded over the network so it's just a nice little tidbit you I used to use like a Chrome extension or what font 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 fullback um yeah super nice love it so we've got that built in now um another thing I wanted to show so here we've got um get bootstrap.css built with this thing at this point um 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 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 dumb node and this just lets me go and toggle on and off different classes so here you can see that um I'm able to turn this thing off from looking like a button um 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 class 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 all together it's really nice like it cool so another thing um another thing another thing yeah this is how I get kicked off stages at conferences another thing it's not good um this is Paul L's Voice Memos app I've currently got um the dev Tool's Color Picker open and if you hold over any color in the color palette now what you'll see is we actually now show you um a whole range of uh 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 and this just kind of nice um we actually now show uh titles like that hint at alternative Shades so this just shows you all the different shades available for particular color that you selected it's kind of nice avoids you having to go back out to yet another tool check it out I'm still trying to find it you'll find it someday [Music]