Mastering Chrome Developer Tools with Jon Kuperman

hey everybody I just wanted to run through some cool things under the premise of mastering chrome dev tools so hopefully there's going to be a couple of things that you have not seen before didn't know you could do with the dev tools and I'm just going to kind of go through panel by panel and show some cool stuff so first of all I'm John Cooperman I'm J coupon all the things like Twitter and github and all that and then for some of this video I'm going to be using a little web app that I made just a really simple site to help me demonstrate some of the dev tools stuff so if you're interested in following along you can find it at my github which is github comm /j coop and then find mastering chrome dev tools it's just a really really basic node site cool so before we get started with the devil stuff there's a couple of things I wanted to talk about one is using Chrome Canary the dev tools team is always working on really cool stuff and often the best way to stay up to date with all the great features that they're releasing is to download Chrome Canary which is just sit on your computer as a separate application that's pretty cool you get all the bleeding edge stuff and a bunch really cool dev tools second on the same note to stay up to date with all the cool things before features are kind of green-lighted for production for stable readiness they're often put in experiments so if you want you can check out all the cool experiments by going to Chrome colon slash slash Flags and so you go ahead to this page and you can just do a search like command F or whatever for dev tools and you'll see this developer tools experiments so you can go ahead and enable that it requires a restart and then as soon as this loads back up I'll show you what we get from that okay so now if I open up the dev tools which I do with command option hi and I go here to these three dots and I click on settings there's a new tab over here which is experiment so this is pretty cool they're always changing they add some really cool ones I've got like this promise inspector some async stuff accessibility stuff color schemes just like really really cool so I would definitely recommend checking those out I just kind of played around with them so we got canary we got experiments turned on should be ready to go so I'm going to hop over to this site which is just the one from my github over here and the first thing I wanted to do is pop open the dev tools and go to the elements panel so it's a lot going on here for those that aren't familiar the basic premise is we've got you know chrome dev tools basically takes in all the HTML from a web site and it outputs this Dom that you can kind of interact with so this is kind of a way to like visualize the actual document object model so you can kind of click on things you can change things around you can like double click into a tag if you wanted to change it get in there there we go so I can change like this now zhu-li or something like that um anyway so that's pretty cool and then on the way back on the other side we've got basically the styles that are affecting whatever selected so if we select this container we can see the Styles affecting it so there's some cool things here one of them actually going to move away from the site for a second and go back to Twitter so I'm logged in just as another account right now so basically what you have and what I have happened to me pretty often is that I'll find something in the element inspector but I don't know exactly where it is in the page so let's say I right click on this tweet and I inspect so at this point I'll have the actual tweet let me just scroll up a little bit right here this item is the div class tweet I've got it selected but let's say I got that through some kind of search in the console or something like that so I can hover over it and chrome you'll see like over here is smart enough to tell me that it's down you can see this like arrow points down but it's pretty tedious to like scroll through and keep checking to see where it is so what you can do is you can right click on any item in the elements tab and you can click scroll interview and then I'll actually scroll your viewport down so now the tweet or whatever it is that you're looking for is in view I use that a lot on big pages like Twitter it's really helpful another thing that I wanted to show is whenever you've got any of these elements hit you can hit the H key on your keyboard and it will hide the element edit so it'll do like a display:none so it'll you know still keep its box model but you can show in hide elements just by hitting H on them and you can see here what web inspector adds this like little class hide shortcut so that's pretty cool use that a lot when doing design stuff another thing that's really great with big applications like Twitter um is if you're looking at all these different styles and you're like trying to figure out where the border comes from sometimes it gets really tedious because you'll see like you know these are being crossed out because they're being overridden by something else and you're kind of scrolling through so one thing that's always really good to check out over here is this computed styles tab so that'll kind of go through and will remove all of the crossed out overwritten things and just show you what's really coming through and what's really neat about it is if you find like okay here's where the border colors coming from you can click on it here so that arrow and it'll take you back to the Styles tab and it'll show you the exact selector that's editing it so that's great with like big CSS projects I really like that a lot another thing that's pretty cool we're going to get into breakpoints and step through debugging in a bit but for those that aren't familiar the ideas basically you like click a line in your code and you tell the debugger if you ever parse this line pause for me throw an exception pause let me see see what's going on at that state and time but what I've noticed a lot is when you start on a new project you're not super familiar with what's going on it's really like you'll sometimes you'll get a bug file and you really have no idea where in the code any of that is being triggered so what's cool is you can take kind of the opposite approach to breakpoints with chrome dev tools so let's say that I got a bug filed and it's something to do with clicking the like button on one of these tweets and I have no idea where the JavaScript is for clicking the like button right we've got this like huge code base so what you can do is you can you know right-click and inspect element on the tweet make sure we've got it and then you can right-click in the elements tab and you've got this break on here so you can tell chrome dev tools to break when something happens to the actual front-end as opposed to the you know the backend the JavaScript code and the three choices you have are when anything in the elements subtree is modified any of the elements attributes are modified or the note itself is removed so this is really helpful like if you get a bug that's like hey whenever I delete my to-do item something goes wrong and you're like oh I have no idea where the code is to delete to-do items you can click note well for now I'm going to click sub-tree modifications because that like button is part of the subtree of this tweet so now I've got that breakpoint set and I go ahead and click like oh - hold on once again hmm I thought it was a subtree maybe it's not let me try it let me try a little bit of a different example here so let me go to this footer and break on subtree modifications I was just not working all right there we go um so it's a little bit particular with like maybe those buttons are outside of the tree itself but you can see when I go to click on settings here it does throw a breakpoint it pauses in the debugger and from that point I can go ahead and will cover this later but I can pretty print out the code which takes a second these big JavaScript files and I can see right here like this prepend function is getting called and I can see a full call stack of like something triggered the open drop down and then prepend got called you can kind of walk through the code and see what's going on so I use that one a bunch another thing that's really cool that you can do I'm going to go ahead and find these breakpoints and I'm going to remove them like this and then I'm going to hit play through so another thing that you can do that's really cool is you can force an element state so if you're doing any kind of design work and you want to like change the way something looks when it's hovered on or something like that you can go to the button you can go to styles and then you can click on this toggle element State it looks it's : HOV in Canary I think it's like a little thumbtack pointing down in chrome stable but anyway you can do things like you can force a hover State this one's tricky right because you have to actually hover on the thing that has the event listener so it looks like that this button does not have the event listener so maybe I'll go up a step to this div and add it here there you go so now you can see what it's like when it's hovered you can see if there's a visited thing you can see what it's like when it's focused on active all those kind of things so that's pretty cool for doing design work as opposed to like trying to like you know actually hover and then to make changes and hover again you can just keep it hovered as you change things around another thing that's great that they just added recently I like a lot so if you you find you know let's see let's go back to the hover and now we can see that something in here is this pink let's try to find it here it is okay so this color pink is being generated so you can go ahead and you can click on the box itself and it opens up this really nice little modal here and there's a couple of things you can do let me just make this a bit bigger so there's a couple of cool things you can do here one of them is you can you know kind of drag the color around if we scroll down this you know you can see like what it would look like as we go to like you can see that for kind of changing in there I think the container also has a separate something still pink here anyway so you can see kind of like you know what things would look like as you change colors around which is really nice but the things that have been added recently which are really cool is this little picker here which can change the color format so you can have hsla hex RGB things like that you can also do that from this screen find my green thing here from here by just shift clicking on these elements so you should click on the box and it changes the color format for you which is pretty sweet and another thing that they added which I love a lot is these color palettes so you can kind of you can see here we've kind of got this pre-loaded color palette so your options are you can use the Google's material design color scheme which is really nice this is like often how I just build sites these days I'll just kind of click around on the material design colors and you can long press on one and see like the whole you know all the different fades from light to dark of each color but the thing that I use more often at work is you can actually click here and pull from the page colors so now you can see I have this like perfect Twitter palette where I have you know like the green we use I have the you know pink we use for the like all those different things so that's really helpful you don't have to go back looking up hex codes or anything like that you can just pull the page colors down and then mess around with them there yeah so I think that's about it I wanted to show four elements there's some other really cool things but those are the main ones so moving onto the network tab I guess one other thing I should mention is in Canary and soon coming to stable these tabs are draggable and that's pretty neat and on top of that the changes that you make persist to disk so you can kind of arrange them in whatever order you would like and then every time you open chrome dev tools they'll stay in that order okay so back on the network tab for those that don't know the basic concept is that it gives you kind of this waterfall of all the page assets as they load so I guess let me just go ahead before we I'm going to do a refresh to capture one but before we do that it's worth noting that there's this disabled cache button here that's really important so basically it's telling the browser only when dev tools is open don't cache any of these assets pull them all as though you're hitting the page for the first time so always have that selected if you're doing debug work I just leave it selected all the time because you're caching will work just fine when dev tools is closed so I'm gonna go ahead and do a refresh here and there's a couple of different really cool things I know it's a lot of information so basically one of the newer things that's come - dev tools is this camera camcorder up here and so what this will do is it'll capture screenshots every time the page does a repaint the only bummer with it is it only captures screenshots of the visible viewport that you've left so in this case like just this like 300 pixels of room up here so usually if I'm really intent on the screenshots I'll pop the dev tools out by clicking here and clicking you know pop out into a separate window that way I'll get the full page render the screenshots are pretty cool if you double click on them you can kind of see what comes first so for Twitter it's like all the text comes first and then the avatars and background images load in and then the viewport is forced to scroll back to the position that it had and then you can see kind of laughs that the notifications come in so that's pretty cool like one thing that I would do when auditing a site is look at like the initial screenshots and make sure that there's something for the user to do like in this case the user can go ahead and read all the text which is great they might not be able to see the avatar pictures but I think that's the proper order if you had a page where it was just loading the background image and then eventually loading the content I'd go and probably switch those things around the next thing that you'll see is this visualization of the waterfall and it's all color-coded so you can see like the big document comes in and then it starts loading all of these different assets and things like that and the colors if you this is basically a mile high view of what's represented down here so if we go and we click on any one of them or I think yeah even hover it'll show you what the colors mean so the colors are like request sent how long it had to wait and how long the content took to download so basically using these different colors analysis you can kind of see where your bottlenecks are like is the back end taking a long time to send assets or is there a problem where you're sending too many HTTP requests and they're just kind of stalled out waiting for their turn to go or is your content just too big and it's taking a really long time to download so you can kind of get an idea of what's going on here which is pretty cool another thing that's nice you can do there's all these different pieces of information so you can see like did any assets come back bad or are they all okay what type they are who initiated them and a cool way of visualizing this is kind of Easter Egg is a you can hold a shift over any asset and so if you go to the document you hold shift you'll see that in red the things that what you're currently hovering on called so the document called that CSS and likewise if you hover over one in green you'll see what called it so you can see that the CSS and the CSS and that these were all called by the document which is kind of a way of visualizing this here so like the document itself does not have an initiator because that's what you actually request and then everything else you can start seeing it you know this is requested by index same with all these and then as we get maybe down a little bit more that looks like basically everything here is just requested by index but if you have JavaScript that's like loading other JavaScript or whatever you'd see that here another great thing is device emulation and so basically it's a little blue phone in chrome stable but it's these two a phone and a tablet in canary so basically you can emulate all these different devices like different phones different resolutions and then you can choose how big or small you zoom in so this would be like a tablet or like some type of responsive web tester where you can move things around but you can also see like what would it look like if I visited it on an iPhone 6 and then when you refresh one thing to keep in mind is this actually sends you know all of the headers as though it were an iPhone so when you hit a site like Twitter with the iPhone header you're actually going to get redirected to mobile Twitter comm so just something to keep in mind that you're actually sending those mobile headers it's not just a viewport change so take it back to responsive Twitter calming em cool and then we can click on the phones again and it turns off device emulation mode well I got stuck on mobile there we go okay another thing that goes hand in hand with device simulation is network throttling so I think this is really important because I think a lot of us tend to build sites as though they're only going to be used by people with really fast internet connections and really powerful computers and so one of the things that you'll see is you'll see these sites that are serving so many assets and so slowly that they load fine if you're in a city on you know really fast Wi-Fi but if you're like you know somewhere that doesn't have a great connection or you're on your phone or you're on a train somewhere your sites almost impossible to use so one thing that I always recommend doing is doing this network throttling and try it out like a good 3G connection or something like that and then you can hit refresh on the site and see how long it'll tell you down here how long it actually takes to load so like Twitter here it took almost four seconds for just the Dom content to load I'm not great connection the whole page took 8 seconds so that's something that's important there's no silver bullet there like you know your page should be under X seconds on a 3G connection but just try to empathize with your users try to you know put the put the throttling on you know put responsive mode on and just see what it would be like you know and try to see what you can do any winds around that are always good cool so the last kind of things I wanted to cover here is if you have a site with a ton of different assets like Twitter has a pretty good you can select up here you can filter like only show me JavaScript or only show me CSS things like that and then you can command or ctrl on Windows click on them and so you can see like only show me CSS and JavaScript and images something like that so that's like a nice way to kind of filter down there's also like I showed over here there's like status and type and initiator if you right-click on these there's actually a ton more options I don't use them all that often but you can like sort by domain content length you know cookies all these different things so if you're really looking for something you're not seeing it on the network tab I would try right-clicking and see if there's anything cool over there cool that's kinda what I wanted to cover there next is the sources tab so for those that aren't familiar the sources tab is basically where chrome kind of can become your editor so you'll see basically let me remove this folder real fast so basically what you'll see up front is you'll see all the different top-level domains where assets are coming from so when you hit Twitter you can see that it's like Twitter comm twin jeet whimsy syndication all these things but if we go to a simpler site like my mastering chrome dev tools one over here and I do a refresh on there you can see that the only places things are coming from our localhost Google font API and then Google static content so basically you can do here is you can kind of drill down just like you're you know in your text editor or something like that so you can see like the CSS you could open style dot CSS and you can make changes like you know background red or something like that right and then you can do all these cool things with JavaScript with CSS you can edit all this stuff you can do command P and you can get like a fuzzy file sort kind of thing so you can look for jQuery hit enter and open it yeah so you can do all these really cool things so one thing that's really neat about it though like you'll notice real quick if you make these changes and then you go ahead and you refresh the page they're gone which can be kind of frustrating so one thing that's really neat is that they really encourage you now to serve these assets from the file system which I love so the basic idea is you can close out everything and then you can go into like your finder in this case for me let me go ahead and find find the actual project pestering Chrome I think this one's called dev Jules yep okay so I can find the project here where'd you go and I can actually just drag and drop it over here and what this will do first to ask for permission you have to click allow' but this now you'll see that we not only have the things that are coming from the server but we've got this kind of workspace here this gets a little bit tricky because there's some bugs with it still sometimes it's smart enough to figure out what files map to what files which is really cool other times it's not you'll have to do it manually by right clicking on a file and like right clicking on a file and mapping to network resource so I'll take my CSS and I'll right-click on it and I'll say map to network resource and I want to map it to the localhost CSS ok cool so now that that's done I'm going to go ahead and let me open up a text editor or yeah let me open up a text editor give it one second I'll just close out whatever I was working on and I'll go ahead and I'll open that same mastering chrome dev tools folder okay so now I've got atom open over here with the files on it and I've also got Chrome open over here with the same file so we can see in this style dot CSS you know the exact same thing we can see in this one what's cool now that we've mapped them as network resources is if we go back and make a change like background red or something like that I can hit Spile command save and we can pop back into atom and see that that actually persists to disk now so all of your CSS and JavaScript changes like you could do you know font size 100 pixels or whatever you can see that they instantly save back and forth so you get this really cool relationship where you don't even really need your a separate text editor if you're doing you know front end stuff with JavaScript and CSS what all you really need to do is mess around in chrome dev tools and this will work kind of all across the board so if we let go into like elements tab over here and we see this background come on and we change it to blue we can come back over here and see that that change persists too so you get this really cool workflow where you're like actually over here you know you're like messing with the font sizes and then as you get it you don't need to copy those changes over anymore they've already been made the one caveat here is that these days most people use some kind of trance pile or pre-processing step so if you have like a bunch of sass or a mustache and you're running your JavaScript through Babel this will be a little bit less useful for you you won't be able to do that but I have heard people I've heard like think Paul Irish giving a talk saying that supporting those things in workspaces seems to be definitely on the roadmap so really hopeful that soon will get like at least like sass support maybe some mustache support in dev tools something like that would be great another cool thing is at any time you can hit escape through on any of these panels and it'll open this little drawer here there's more choices in Canary than you'll see in stable but one of the ones that I really like is you can enable paint flashing under this rendering time so what this is going to do is it's basically going to show you in green whenever the screen has to do a repaint and so what you want is to see not a lot of repaints as you're messing around on your page because too many repaints can cause it they call screen jank which is like a noticeable Genki ness as you're scrolling around um so I have a really good and a not-so-good example of these that we can run through together real quick first is this website called koalas to the max calm and it's a cool website it's like a d3 experiment page so I hit an able paint flashing and I'm just going to make this a little bit smaller so we can see as I'm dragging the window around the whole window needs to repaint that seems obvious but then what happens is you how the circle is this animation takes place and so this is a good example of repaints because you can see the whole thing never needs to repaint just because you're animating one small part only the stuff that's actually changing repaints so as you kind of scroll around you can see in green what's going on here so this is a really good example because like I said you're only seeing repaints over the exact things that actually need to change and this site school because it's called koalas to the max because if you hover over enough of these little dudes then eventually this cute picture of a koala reveals itself but we don't have time for that right now so then here's an example of a really cool site this guide to biasing rights about all this really great you know web development stuff and I saw a video where arrow twist from Google was kind of reading one of his articles and was able to notice that he felt when he was scrolling around on this page he felt there was screen jank and so he opened up his dev tools and let me make this a little bigger again he enabled paint flashing and then he started scrolling around and sure enough you can see that this whole screen repaints every single time that he Scrolls um and so he was kind of poking around trying to see how you can fix that and there's a pretty cool API which is again not a silver bullet but basically what he was able to find is it's this div class menu animation wrapper that's causing the problems and it's basically this like fix position thing which is a hundred percent width and 100 percent height and has a really high Z index so it's like always there always repainting so one of the cool things you can do is there's this CSS property called will change and the basic idea there is it's like a plea from the CSS to the GPU to say hey I've got this element it's going to be changing a ton can you handle some of the rendering for me so what you can do is you can do will change and you can do transform so I put that in there and now we can immediately see as we're scrolling no more repaints over here so again you want to check the browser support for it and see if it actually helps you at all but it is pretty cool to eliminate screen jank and I think you could do like very much the same thing you can see this fixed position Carbon add here repaints pretty often so I think if you like inspect element on it find it's like you know its parent carbon add container I guess yeah this is what's fixed and so then you could do the kind of same thing will change transform and now we can see that doesn't repaint as well so you can make your site a lot smoother by messing around with those things and finding pink rectangles coming back over here in the sources tab you can see if you ever have a minified file like let me see if I have any in this one none of these seem to be um I guess we can use Twitter as an example so if we've got this like uh let's see in it yeah okay so we've got this dang it none of these are minified uh here we go okay so we've got this minified file which can be difficult to work with so one of the cool things dev tools allows you to do is click here you can pretty print any file javascript or css and so you can see it'll space it out all nice and neat for you it still doesn't help with like if you do any of that Uggla fiying like changing variables to one letter variable names like here we have like Barbie and like a and things like that but if you have source maps or a DEP build or anything like that it'll work with those so that's great another cool thing that's of some use like earlier we covered the breakpoints um so like you can the ones that we didn't cover is you can set a breakpoint by clicking on a line number in a JavaScript file so if this ever gets hit it'll break they're the ones we did cover were the Dom breakpoints where you can say like oh if any subtree is modified break here one other kind of breakpoint that you can do which I really like is xhr breakpoints so I had this one from earlier I'll remove it but basically like I know that Twitter does a really regular check to the timeline and I can see that back in the network tab kind of trying to put it all together here I'll select just xhr and I'll wait here for a second I might have to restart um cool all right so I hit just xhr and I'll refresh so this should be logging for me every single time that app does any kind of Ajax request essentially so it's not going to log all the rest of the stuff in here okay so here we go so we can see some one four trends one four prompts one four recommendations these are probably the things that are loading in on the side here but now as the page is finished loading we can see it does these regular calls the timeline and so if where this comes in really useful just to back up for a second is like let's say you have an application where you have one method that you use for all of your Ajax calls like you just pipe in a different end point to the same method like you're using jQuery and you have this get um one thing that I've done before is you like I'll set a breakpoint in there and then I'll keep getting breakpoints for the wrong request like I'll see one like oh that's prompts that's not what I want oh that's recommendations that's not what I want there we go we got timeline but what you can do which is pretty cool is you can set these xhr breakpoints and so you can say like only do an xhr break when the URL contains then you can put a word in here like timeline so we set that and we wait until the next timeline request happens and then boom we get this pause in the debugger and we go ahead and pretty print and we can see it's actually on this like you know ajax send request this is where it gets broken we can see this whole full call stack which we can see we have like a clock and the clock is like a timer and the timer ticks calls the callback you can kind of get a really nice visual of how this happened another really cool thing you can do kind of approaching it from the same end is you can set conditional breakpoints so instead of just clicking on a line number you can right-click on it and you can say edit breakpoint and so it's like only break here if and then you can put an expression like you know true is equal to false or you know whatever but you can do like data endpoint is equal to timeline so you could do approach it that way too these are really nice for things that aren't xhr related we're like hey only stop here if you know count is higher than 12 or something like that another great thing so I've been using this call stack a lot without really explaining it um but basically it's just the entire path the code took to get to where your break point is um but one thing that's really nice is you'll often see apps that have like a bunch of files here Twitter's not one because it's all custom but you'll see like library stuff like lodash or jQuery or things like that and it kind of clogs up messes up your view because you're pretty sure whatever bug you're tracking down is an in jQuery it's probably in your application code so what you can do is you can right click on any file and you can black box a script so I can black box this init script and then what you'll see is basically I think we gotta give it a second again but you can see that from now on it won't highlight those scripts because and it even says up here this script is black boxed in the debugger so basically what it's doing is it's going to make it um it's gonna make it a lot cleaner for you to see call steps and things like that if you just go ahead and do black box jQuery you black box backbone or lodash whatever you're using that's pretty nice and I think it persists by domain so um you know it won't black box jQuery from all different websites I think it might be a little bit tricky because I'm not sure if you black box on localhost it might persist that localhost black box for all the day you know all of the different localhost projects that you have some other little cool things in the sources panel arm make pretty print this you can do multiple cursors um you know much like you would in like I don't know sublime or something like that so you can stick cursors kind of all over and then you can start typing and you'll see that it makes you know that change kind of everywhere um that's pretty cool and then you can also there's a mode over here where you can just pause on all exceptions so this is kind of like you know it might be nice it might not be nice but you can just let your code run in anytime JavaScript there's any sort of exception it'll break here so you don't have to know where the bug is just to you know throw that so I would check it out this is not an exception this is back to my breakpoint but throw that on for a minute see if there's any exceptions in your code and then you can turn it back off cool so I think that's what I wanted to cover for sources the next I'm just going to skip to the timeline the time line is pretty complicated between time line and profiles I could probably do a whole other talk on the basic idea is you go to time line and used to actually let me just turn that Rick point off before it goes again you go to time line and you start capturing and then you can kind of scroll around and you can do whatever you got to do and then at any point you can hit stop and then you get a massive amount of information optionally you can do the screenshots I've elected not to because we just did them in the network panel so what I'm looking at here is JavaScript profile a memory profile and all about screen paints so let's do the screen paints first we kind of talked about it earlier you know painting is expensive and it can make your screen look Genki your application so Chrome goes ahead now and they give you these little red boxes for areas in the code where they suspect possible page jank um and then there's kind of a lot kind of lot going on I'll cover a little bit of it so you can like one cool thing you knows you can scroll in and out to kind of focus on a place here and when you're scrolling in and out you can get like let's say we wanted to see where's my graph somewhere over here um well I guess we'll get to the graph in oh here okay here it is just hidden a little bit um all right let me cover these two second items so this one is just like this summary tab you can see what your app spends the most time doing so we can see that just after Twitter loads most of the time was spent idling a little bit of scripting a good amount of rendering and painting almost no loading just to kind of give you like an idea of what's going on you can read view that information is like this like bottom up view where you can kind of click into like what was rendering so much what was painting so much um also a call tree where you can see like where the renders came from and then this is like a log of every event that got fired cool so we can kind of go ahead and squish this tab down now and then this is your memory profiler here um basically what you want to watch out for is what they call jigsaw in when you see memory going like up and up and up so this really wouldn't be one to worry about too much because you can see that the jst coat starts going back down but it might be something to keep an eye on like is memory growing and growing and growing and then it separates memory by different types like the GPU the JavaScript heap event listeners different elements nodes being created documents things like that so you can not only see if there's a jigsaw but you can see specifically what looks problematic to give you kind of an idea of what's going on there all right now that I've gotten those hidden we can go back over here so we can find an area that looks janky like over here there's a lot of screen jank so I'm going to click and drag and it'll zoom in on that area so zooming in on this area is this is like the closer view of it so you can kind of see basically what's going on here is you want to watch out for really wide blocks long blocks are fine because we can scroll in and see that this is just a call stack so a function that calls much other functions is not really a big deal but we're worried about is things that take out this is time on the x-axis so you really want to worry about things that take a ton of time so if we scroll like all the way out on the site we can see like I guess like maybe over here looks like the most expensive thing the thing that takes the longest so we can see like this timer was fired a function was called anonymous function you can start clicking through like that I'm gonna kind of stop here because like I said I could do a whole day on this stuff but this is just a basic view of what's going on one thing I did want to point out is there's this nice trashcan button up here which can force garbage collection so if you're worried about a memory leak you can kind of play around on the site forced garbage collection everything should go back to 0 and if it doesn't you can look a little further to probably have a problem the next I'll do the profiles page this one is pretty pretty well relates to the timeline there's basically two types of profiles you can do you can do a JavaScript CPU profile or a memory heap profile and then this one is multiple heap snapshots over time so like a CPU profile is pretty simple you record it you can do some stuff if you want to then you stop it and it's kind of like what we saw in the Timeline view but basically you get this like top-down view of like what took a long so you can see what took a long time itself and then you can kind of sort this way to see like what had children that took a long time I find the self down the most useful the ones in parentheses here are just things that you kind of can't avoid like idle time or like actual you know program API time but you can get into things here like okay like this anonymous function f took a really long time and you can like kind of go over here you can click on a file and it'll take you back into the sources tab and then you can pretty print it again and you can see obviously this is Uggla fide so you'd want to developer build but you can see like something in here is what's taking a really long time on the on the after the page is loaded in a very similar vein you can go to these heap snapshots and you can just take one and it loads up a nice little u2 which is like kind of what's taking up memory in your application basically so you'll see like how objects and arrays and closures and like you know what's taking up time shallow and retain the size I guess I get into those just really briefly like shallow size is how big the actual thing is retained size is how big it is and how big things that it is the only pointers to so that you'd have to know a little bit about garbage collection but basically a very tiny object can be the only pointer to a very huge object which gives it a huge retain size but a small shallow size and then you can take multiple snapshots and compare them you can also do this require keep allocations over time and see if you have a memory leak next over the console panel pretty cool it's basically just like a JavaScript ripple so you can console.log hello world ah oh I think this is a Twitter thing yeah the console console is hidden for some reason it's like null cast or something so if we go on a regular site like this one here and we go to console we can console hello world yeah that's just a Twitter calm thing um so yeah you can do multi-line code too like you could do function foo and then you can just hit shift enter you know console.log foo shift enter and then end X and then you call foo and it console.log foo you can also do some cool things interacting between the elements panel so if you click on something like I click on nav and then I click on main content and I go back into the console you can do dollar sign zero and that'll show you what you have currently selected which is main content you can also do dollar sign one and that I'll show you what you had previously clips collected which is nav um and this isn't even though it has dollar signs it has nothing to do with jQuery it's just an API that the chrome dev tools give you there's also dollar sign underscore which shows you the result of the last thing you processed on dev tools so you can see that i've you know i logged nav and then the result is still laughs um someone's pretty cool you can do command k or clear to clear your history um you can see if there's any other really cool things you can do i guess the last one i wanted to mention is that you don't really ever need to go to the full console drawer because at any other time you can just hit escape and pop open a console here you know and you can do all of your things and hit escape to hide it again some last little things is um you might notice that i have whenever things are moving I have these rulers show up here which is kind of nice for design stuff so you can do that by going to settings and then at the bottom show rulers um the console drawer already covered timeline stuff the security tab is pretty cool basically it's just helping you look at a page and see it how secure it is it's pretty simple it's like does the page have SSL certificate and do all the resources on the page get served over SSL the audits tab is really nice it's basically for those that are familiar it's a little bit of a watered down version of Google PageSpeed insights but basically you can reload a page and it can do network utilization or web page performance I do them both together all the time and it'll kind of point out what things are problematic on your website I would still recommend whenever you can doing the Google PageSpeed insights because it's got more stuff they're more of the same stuff but um this is pretty nice so just let the page finish reloading um so you can see like it gives you like some suggestions Reb is bad and yellows are warnings it's like hey your cookies are too big but that's just a warning but it's like hey like none of these have browser caching buried on them same thing here like it can calculate unused CSS rules this can be a little bit deceptive because if you have a single page application the CSS might not be used yet but your page is not going to reload and more elements will appear so I would watch out for this one you'll see it a lot like I'll probably see it over here on my site I'll see that same one because the problem is that I'm using bootstrap which is like a ton yeah here we go like 1,400 unused selectors I have a really basic page so it might be worth looking into um oh this one here like nothing's being gzipped and compressed so these things are nice and then if you like see a warning here like I have this node app it's using Express nothing's gzipped but I know that there's like a compression package for node um so I could just install that and gzip everything yeah that's pretty cool resources I haven't really covered it's basically just so you can see what the website is storing on your computer so you can see cookies session storage local storage all that stuff it's kind of cool worth checking out looking like what different apps leave on your computer um I think that's about it I think I was a little long-winded on that I will do some other videos in the future on like timelines and profiles and doing memory analysis stuff like that but I shouldn't want to get you deep for now Thanks

Channel: This Dot Media

Views: 25,987

Rating: 4.9344263 out of 5

Keywords: chrome, chrome developer tools, chrome canary, developer tools, jon kuperman, jkup, modern web, modernweb, javascript training, javascript, learn web development, web developer, this dot labs, this dot media

Id: ZRr9X-rD3Hc

Length: 43min 4sec (2584 seconds)

Published: Wed Jul 06 2016