Chrome DevTools Masterclass

all right there are so many so few Portuguese people here but anyways both are the everyone hello all right so I wanted to do something to kind of wake up the crowd you know like make a video and stuff go crazy but the crowd is kind of not that great so I'm just gonna go straight to the point which is dev tools right so in the crowd how many guys use dev tools on like pretty much more or less daily basis okay so almost everyone that's here all right Google Chrome debuted in 2008 and came along with it the incredible dev tools right and since then many of us web developers use dev tools I'm pretty much a daily basis but even though we use it daily there are a lot of things a lot of tools a lot of features and they're tools that we should be using but we're not and that's because dev tools evolve in a really fast pace things are being added things are changing things are being removed it's kind of hard to catch up on everything that's in there right so I'm here today to share with you guys some of my tips and dev tools my product productivity tips and tricks debugging workflow and stuff like that which by the end of it all will hopefully get you guys excited about chrome dev tools all over again but before that a little bit about myself I am Prashant Bala hey this is my Twitter but my name is kind of difficult so I created something like bitly account bitly Nepal - Portugal will lead you to my Twitter account so obviously I come from Nepal a couple of things about Nepal number one is we are not the same as Tibet and number two is we do not all live in the mountains just saying and nine years ago I moved out of Nepal to the Netherlands where I finished my study in computer science and moved on to become a web developer which I've been doing for the past six years and currently I'm working at a company called non touch as a front-end consultant and by the way non Dutch here it comes Ananda is still actively looking out for non Dutch front-end developers so if some of you guys are curious about that you know find me after the talk today or tomorrow and we can have a chat one more thing about me is I love the American sitcom friends I love it so much that I've went ahead and created a mini applet of myself which I call friends flakes which I used to watch friends whenever or wherever or however I want it so what I've done today is I've created this buggy less performant version of this app so we're gonna use dev tools for the rest of the session to find and fix the issues on the app all the while learning about the things that dev tools have to offer what I've also done is I've created this Trello board full of issues that covers a wide range of things we got some load time performance issues some runtime issues some bugs that we got a debug and the idea is to pick this card one by one and fix the issue you mentioned in the car using the dev tools so we got a lot of ground to cover so without any delay let's just get into it or in Portuguese way of saying things wrong as I each to write my colleague over here David taught taught me how to get this right like one hour straight or something so I hope I didn't butcher it few things before - I would like to address before we actually get into dev tools and number one is I'm gonna be using the canary build of dev tools how many of you guys are using no or use canary build okay for those of you don't know canary bill is the latest like the nightly developers build a problem where you get to play with the latest dev tools feature this nightly builds so you know it might not always be stable it may be buggy it may be a bit sluggish but most of the time it's okay and you get to play with the cutting-edge dev tools feature which is great right number two you need to make sure that the chrome dev tools experiment flag is turned on in google chrome and you do that by going to Chrome flags and look for dev tools experiment and make sure that it's enabled and with that we go to number sorry that's fine okay with that we go to number three is which is when you have the dev tools flag on and you go to your dev tools settings you gonna see this new experiments tab here right and if the feature that I'm talking about you cannot find in your dev tools then it's most likely that you need to enable this experimental feature in this list and if you can't find the feature even in this list then we got to do some magic and the magic involves hitting shift six times so while on the screen I'm just gonna go ahead and hit shift six times four one two three four five six and a whole bunch of other things come in right and these are like super experimental dev tools feature that are kind of hidden away on dev tools but you know some of these features may never see the light of day that's the idea there that's why they're hidden but some of this feature in here are really cool really useful and I've actually went ahead and turned some of them on which I'll show you guys later and another thing that I want to do or I don't want to do is constantly have to switch between dev tools and my editor I want to use dev tools as my IDE for the rest of the session and that's super easy to do using workspace all you have to do is while you were on your app you go to your sources panel and then drag your project folder in there you just drop it Chrome's gonna ask for some permission over here allow the permission and then it's gonna appear here in the file system if you guys can see that maybe that's a bit better so now you have to map your network asset to your local asset easy to do right click on your index.html map to filesystem resource chrome is smart enough to give you the correct suggestion hit enter and then you get this like nice little green indication showing that things are mapped all your CSS is all your JavaScript everything is already mapped now I don't have to leave the dev tools at all to you know like everything is persisted as I make the changes in the dev tools it's persisted onto the disk so if I reload the browser it's gonna be preserved and since I'm working on the browser I get immediate feedback so my feedback cycle is really small which is great for productivity right with that I'm ready to show you guys the first feature that I want to talk about on dev tools which is the command menu you bring the command menu in by hitting command shift B on Mac so if you guys are on different platform you can just go ahead over here on top-right find shortcuts and you will get the shortcut for your own platform so on Mac command shift B to bring the command menu you can do a whole lot in the command menu using only your keyboards so if you're our keyboard guy like me you're gonna love this as an example you can set the team to dark set it back to light theme or default that's how it's called and like my dev tools is docked on the right at the moment right so I can use the command menu to type in dobo notice that it has fuzzy matching capability so you don't actually need to type in dog to bottom doble is gonna match to doctor bottom so dobo enter is gonna dock it to the bottom Doe read to dock it to the right and um to undock by the way when it when this dev tool or inspector is on Doc's you can actually hit command option I to bring this another dev tools which is kind inspecting the inspector sort of like inspector reception kind of thing and you can go infinitely deep in this but let's not do that right now you know web tools is just a web app as well so you can just inspect it just like any other web app so I'm gonna go ahead and put it back to the right and with that we are ready to pick the first card from the Trello board after the sleep of water all right so make the app loading approximately one second load time performance stuff right load time performance is all about how fast does it take for your application to load and not just the initial HTML but all the static assets required by your application right but it's not just about the load time only it's also about how fast does it take for the browser to construct something visually important for the user and place it onto the screen so that the user despite having longer load time perceives your application to be faster about perceived performance and whenever I want to debug like profile Network related load time performance my go-to pain obviously is the network panel because network panel tells you a story everything using the network activity tells you everything that starts when the user clicks enter on the URL address bar until your application fully loads and Beyond so I'm just gonna go to network panel and I'm gonna make sure that this little feature over here filmstrip view is enabled what the filmstrip view does it shows you how your application was built up over time just the way your users see it so it's like great to profile perceive performance so with that I'm just gonna hit command R and capturing recording frames it is taking a long time so yeah we definitely need to take care of that so over here if I double click on it I can zoom in on the thumbnail and once zoomed in you can navigate through these frames using your keyboard so here we see down here that up until 5 second the browser did nothing showed nothing useful for the user on the screen and that's really bad that's bad user experience so we definitely gotta fix that so let's go ahead and see diagnose the issue down here at the waterfall chart and whenever I'm diagnosing Network issue on the waterfall I'm looking for huge green bars which indicate you know like the resource took a long time to come back from the server may indicating that problem is probably on the application back-end or the network or I'm looking for huge blue bars which indicate that it took a long time for the resource to download meaning you probably need to send less data down the wire so here we see immediately this huge Barr's so I'm gonna hover over it and it tells me that the browser that the server took five seconds to send back this data something related to this advertisement all right so normally load time is not that big of issue if it's like an image because browser progressively renders the rest of the thing while the image downloads but this one looks suspicious so I'm gonna see what kind of resource it is and it looks like it's a script by the way like it's the third-party content like advertisement so it's not it's not required it's not a critical content for your application so I want to quickly test out like how how would the application perform if we were not using the ad service and that's really easy to do in Chrome now you right-click on the resource and you just do block request URL that means the Chrome is not even gonna make a request to the URL it's like you're not using the ads so with that let's see how it performs that looks a lot better we immediately I can show you on this one it's like 739 milliseconds and the app is ready to go so that adds that script is definitely a problem so let's go ahead and fix it so I'm gonna go to elements let's see how the script is being used I'm gonna search for ads and it's a script on the head now the problem with this script is when the browser is parsing your HTML and building the Dom as soon as it reaches the script tag it's gonna be like whoa it's JavaScript it has a capability to modify the Dom that I'm trying to build so I gotta be careful so I'm gonna play it safe I'm gonna wait until the script is fully downloaded from the server and when it's all good when I know everything is safe I'm gonna parse the rest of the document so basically until this script was downloaded browser has nothing built up make sense you can fix this easily by dragging this thing and placing it at the bottom of the body like that's one of the best practices in the industry right like just place the scripts at the bottom of the body but it's not gonna work out in our case because it's an angular application and an angular application waits until the document is completely built and document ready event is fired before it kick-starts itself and does its thing so but we have another solution for that one and that is the async attribute on the script tag what the async attribute does is basically tells the browser like I know I'm JavaScript but I promise I won't do anything bad so just go ahead and do your thing parse the document and build the document while you wait for me to download and when I'm downloaded just execute me browser does exactly that it even goes ahead and why is the document ready event way earlier and bootstrapping the angular application way earlier should fix our issue with the load time so I'm just gonna go ahead go to I'm gonna remove the request blocking from here cuz we're gonna test it out I'm gonna go to index dot HTML and I'm just gonna drop the async tab tag in here save it go to network panel and recapture everything and see how it does because of the workspace everything is being saved on the disk so I can just reload the browser and it's gonna pick up the latest change so yeah double click over here 20 millisecond white screen it's 20 millisecond doesn't matter and go down and 529 millisecond most of the stuff that the user need to see is on the screen so the parsnip performance has definitely broke notice that the load time over here has not improved but that doesn't matter as long as a user sees the important stuff on the screen and perceives their application to be fast that's what counts so with that using the network panel we kind of guide ourselves to the problem resource and fixed it which means we fixed our first issue but before we move on to our second issue I want to show you guys a couple of things in here that I find really cool like we've got these filters over here right we have all kinds of resources and you can filter it by JavaScript you can filter it by CSS if you hold the command button you can just filter it by multiple resource types and over here on the search input it's really powerful as well because you can do things like show me all the resources that are larger than 1k shows you all the resources that are larger than one kilobyte and if you want to see all the resources that are smaller than one case just put a negative sign in front of the query and it's going to show you all the resources that less than 1k you can do stuff like show me all the resources that send back status code of 404 9 in our case 200 stuff like that really powerful and you got the network throttling over here to simulate how your application forms in shaky Network weathers right but if you're working on like fully offline first application using service workers or whatever you can also do that you can bring down the network for this tab without affecting the rest of the taps or you can use the command menu to do this as well command shift B go offline brings down the network for this tab command shift B go online and you're back on another stuff if you've got some JSON some JSON API and you've got this the JSON response and you want to play with it on console like kind of manipulated in different ways just right click on it copy copy response it's going to copy to the system clipboard now we can go to console put it in a variable and now you can start doing whatever array either for each manipulator check it out whatever you want to do back to network what else can you do here yeah so we got this like different columns if over here and let's consider you have your own custom response header like SUV response header that you want to have an insight on in this panel that's really easy to do now as well right-click on it response headers manage header columns add custom header go ahead and put your custom header or whatever you're returning and that's gonna appear in this column super easy I mean I'm just gonna go ahead and remove it for now because I don't want this pollution so removed so that's it for the network panel for now so let's go ahead and move on to the second issue this one's done searching is too slow alright let's go ahead and see if that's really true so I'm gonna go over here and search something and I typed in something and after a while it showed up on the screen so yeah it feels a bit sluggish for application to feel instant to user interactions it has to respond around hundred millisecond and looks like we blew the mark way off so it's about runtime performance right runtime performance is about how the how faster application response to user interactions am I go to place for run analyzing runtime performance is the timeline panel by the way these panels if you if you're using timeline panel a lot and you want to have it right next to the elements or something you can just drag this and move it around and there be persisted in the session so you can customize it the way you want it so while in timeline panel I'm gonna hit command e to start recording and just type something hit command e to stop recording and we see a bunch of data on top over here we see a lot of a lot of yellow which means browser spent a lot of CPU time doing script executing JavaScript and down here which we call the flame chart you see every JavaScript function that was invoked while handling our key press during the capture horrifically is functioning death to function invocation this function invoked this and gold days and this and like that horizontally is the length of function execution how long the function took execute so while profiling performance you're keeping you need to keep an eye on long horizontal bars so we can we can check it out like we have the key press event if I hover over it it says that it took around 216 milliseconds to handle the key press so we are way past 100 millisecond mark so let's go ahead and fix that I'm just gonna dive dive in deeper over here we got a bunch of garbage collection events over down here fine and there is one thing over here the on episodes data received which seems to take awful long time if I click on it on the summary pane it tells me exactly on which which file this function is defined clicking on it takes you right on to that function but if there is like a lot of data here and you have no idea where to look into this bottom of view is really useful as well so you click on the bottom of view it and group Group by category by the way and then it shows you where the browser spend most of your time root by category scripting or painting or stuff like that just opening it up and it gives you the bottom of view of where the browser spend most of its time takes you directly to the problem JavaScript and if you click on it is the same thing it's going to take it to the function so let's examine what this function is doing so we're some promise and down here there is a sleeper we've got a sleeper down here it's basically this bit of a script is basically stopping the JavaScript execution for 200 millisecond and only then continuing therefore jamming the main threat and in browsers the main thread is responsible not only for your JavaScript execution but also to update the UI so if you're jamming the main thread your UI is gonna completely freeze for the screen for the users so you definitely don't want to do that so I'm gonna go ahead and comment it out fixed it comment it whatever save it then start typing and that feels a lot better um I can go ahead to the timeline and start capturing it again so command either capture time command either stop capturing and that looks a lot better we want our flame chart to look anorexic theme and that looks really good so over here we got like 470 milliseconds that's like way below hundred millisecond mark right so that's great yeah so it looks like we've fixed our second issue is well notice that I didn't have to reload the page when I change the JavaScript because v8 is being redone and you know the changes are applied immediately so second down the third one make side menu animation buttery smooth okay so we got this side menu over here that animates in kind of like this and we want it to be smoother whenever something is moving on the screen and I need to profile that my go-to place on dev tools is kind of it in a way when you hit the escape button this drawer comes in and then over here on the Left find the rendering rendering panel and then there is this paint flashing over here that's what I'm looking for so with that turn on what it does it shows everything that the browser is painting in the viewport it shows us a big green flash so with that turned on let's see how our animation is doing so I'm just gonna go ahead and click it I don't know if you guys can see it but there are huge green flashes there right so every time this thing is moving on the screen the browser is having to repaint the entire viewport and that's a lot of work Paul Paul Lewis from Google who is this performance guru has ones nicely put that performance is the art of avoiding work so what if we could avoid all this paint work that could be a lot cheaper for the browser to do and we are able to do that but first let's see how this how this navigation now this side menu is implemented so I'm gonna hit command shift C so that I can select any element on the page get this and this is the drawer over here and yeah when the drawer is visible we are making the left to zero when it was not visible it was you know placed - hundred percent something like that position:absolute we can definitely fix this and in order to understand what and how the fixed works we need to understand a little bit about how browser at least blink performs rendering it's a complex thing but I'm gonna try to put it really simple right now basically what happens is like all the elements in your Dom gets painted into this one bitmap which gets uploaded to GPU and eventually split out onto the screen so whenever something is moving on this on the on the application so the browser has to create one bitmap another another another while catching up with this good 60 frames per second rays you know create all these bitmaps put it to GPU and to the spring that's a lot of work what if we could like split out this moving lay moving element onto its own layer and have the GPU just transform it on the x-axis that's a lot cheaper than the browser's are having to paint it all the time and we can do that exactly we can do that by using CSS 3d transforms there's a new spec Paul will changed something that also does the same thing basically pull an element onto its own layer which we call the composite layer but will change apparently is having a problem I saw a lot of tweets about it recently so you watch out for that one but you know since the 3d transference is going to do the same pull an element onto its on 3d GPU accelerated rate layers so I'm gonna go over here the sources I'm gonna hit command o to find to bring out this fuzzy matching file finder type in drawer we got the CSS over here and I'm just gonna quickly gonna paste the correct solution which looks like this so what I've done is I'm using position fixed and instead of using transforming left value I'm transforming the translate3d on the x-axis from minus hundred four percent to when it's visible down here to zero so and I've also used will change transform but basic idea these PSS values is gonna pop my layer out onto its own composite layer so let's see how it looks now so as you can see the green flash has completely gone away and only to the bottom is button it's probably like some kind of focus ring or whatever but we removed all the paint works needed when the browser was moving you know when this drawer the side nav was moving great and this is gonna perform equally good in all the devices which support the GB accelerated perfect by the way like down here you got this like layer borders if you turn it on its gonna can you see it that they're like orange layers borders around them around the things in the application that those are all the composite layers in your application the layers that are existing on its own but you can visualize that a little bit better using this experimental layers panel so with the layers panel you visualize exactly all the layers on your application right not only that it actually tells you on the left like which layers are composite layers and why they're composited in my case it was like 3d transform in position fixed and will change and stuff like that so it tells you why the browser does the thing that is doing and you see like when you move on it's like you get this nice visualization about the layers that are moving onto the screen that's layers three down we're almost halfway I'm going to put that over here and move on to the next one which is body background color is not the same as the header okay let's go ahead and check it out is that visible on my screen it's it looks kind of visible what's happening is the body has a background color of like dark grayish and the header has the background color of completely pitch black so I'm gonna hit command shift C again to find the the element which is main and it has a background of two to two so it's an easy one I just gotta change it to zero zero zero but I I want to take this moment to show you some of the coolest stuff that's in here basically if you hit this color tab over here this color picker pops in right and now I can pick any color from the page so over here I wanted the header one so yeah click on the header enter work workspace magic everything saved on the disk reload the page and it's all black and nice and the issues fixed not just that there is a little bit more on this one like when you when you're on this color picker you can you know cycle between RGB at HSL in all these different color formats and you also got some ready-made palettes for you so if you're prototyping with material design they got the material design palette over here long hole than this and you get different shades of colors and stuff like that and the chrome also goes ahead and creates this custom palette based on all the colors used in your application really easy and this applet is not the only applet over here you got some quick action to add the background color which is shows the same applet but you also got some box shadow editor and the canary right now which which you can you know use a visual GUI to modify and work with your box shadows blur spread values and stuff like that staying with tech shadow down here check shadow visualizer and same with if I go to CSS we also got the animation visualizer so you can up until now you would have to use a third-party tool to see how your easing functions are working out but you know chrome got you covered you got the built-in animation and see you can click on it to replay the animation or you can use a custom like preset easing function isn't out or whatever what else do we got on this tiles panel oh yeah the adding or removing the classes got really easy using this classes being you know just add a new class it's it's only a matter of you know toggling the checkbox instead of having to type in or you can just add a new one like noticed it also autocompletes give you the results from all the classes that are defined in your CSS so if you want to add a class from your CSS it's super easy now enter that's gonna screw everything up so I'm gonna remove it that's the classes pane and this plus to add a new style rule normally you just do this and you add it like text-align:center or whatever and it adds it to this temporary style sheet called inspector style sheet that has higher specificity than the rest of your cells or let's say you want to just add it to one of your CSS files that's really easy to do if you click on this plus button just hold it a little longer and then it just shows you all the files that are in your application and just pick a new one like base the CSS sure whatever text-align:center it actually goes ahead and saves it on your file and by the way this this modification that you make on dev tools have a local history of its own so you can just go ahead and go to local modification and it shows you all the history that you can revert apply again so they got you covered in that one he's gonna go ahead and remove it so that was that was this one and ya numeric stuff like when you were adding some number I don't know border one pixel solid something like that like you can up or down the unit using your arrow keys right but you can if you hold the shift button it up by ten unit if you hold the command button is off by 100 unit and if you hold the option button it ups by point one unit and it works the same way that's really this it works the same way like if I got over here computer style double click on it and it becomes editable and you can modify it the same way basically that's it on the Styles panel for now so with that we another one down again body background color is not the same in header let's put it two done the next one is continuing watching button does not do anything I should have given you guys a demo of the application to see what to continue watching button is but basically it's kind of like Netflix like it remembers what I was watching the last time so I can continue where I left off so I was watching the one with the sonogram at the end so I can continue watching but apparently it's not working so let's go ahead and see what's up is it not working yeah I'm clicking and nothing's happening command shift C to select this item and is examine it button has some controller method defined called start watching so what I'm going to do is I'm going to hit command option F F to bring this like global search now we can search through entire front-end code base you can also do that by going over here and search the same thing come on up should have just the keyboard shortcut to get things faster and over here I'm gonna look for start watching alright it gives me the function click on it to takes you right there I'm gonna put a debugger in here see what happens and click the button and it does not come there so now I'm kind of curious like is there is there even an even even listener defined for this element so I'm gonna go back to elements panel and I'm gonna use this new console API called get event listeners which takes a reference to the Dom element but how do you get a reference to the dominum and you can do something like VAR button equals document dot query selector all button stuff like that but there's an easier way to do this on console which is dollar zero dollar 0 refers to the the Dom element currently selected in the elements panel but it does it goes a little bit more than that you got dollar zero dollar one all the way to the dollar four so if dollar zero is the currently selected element what is dollar one let me show you so I have the button selected dollar zero obviously the button I'm gonna still like now playing episode dollar zero is now playing instead of episode dollar one the previously selected element is the button so works like that so using get even listeners and dollar zero I can see if there are any event listeners on this element and I get this object which an empty object that there are no event listeners all right we got a chick what's happening on the source code so I'm gonna go back to search click on this function so we have some angular component definition here some bindings apply the controller controller defines a method and when that method executes it's basically changing the URL and we got the template and the angular guy is probably already see it but there is some grade-a down mastery going here which is instead of ng click there is an mg click in here so yeah the solution is relatively simple ng quick save this file I'm gonna have to reload this page so that the angular gets to compile everything again click and now let's get back to that element get even listener 0 and it gives me back an object and there is a click event listener bound to this element so if I click on it it should work and it does cool now there is one trick like let's say you went into this new project and you want to understand where in the thousands of lines of JavaScript is they even listener being defined for this specific element or you want to understand the internals of a JavaScript framework or something you can use this really nice trick by obtaining the reference to these functions like get even listener 0 gave me exact reference to the listener function so let's go ahead and grab that listener equals I'm going to use another shortcut over here which is dollar underscore and dollar underscore refers to the result of the previous evaluation that means this object right so this object has a click property which is an array so let's grab the first element and it has a listener so now I got the reference to the listener function now I'm gonna use another API called where's my cursor called debug which expects a reference to a function so I'm gonna place the listener in there now what happens is every time the listener function gets invoked dev tools is gonna pause the execution on the first line of that function so let's go ahead and click on this button and bam there we go so you know you know exactly where the function was defined which handled that event and now from here you know this looks like some angular code listen about how angular is doing things if you want to learn that just followed the track from here this is supported on most of the modern browsers like Safari and Firefox as well as far as I'm concerned but the reason they're there is an easier way to do all this thing in chrome oh by the way like this is gonna keep coming back so I want to turn it off turning off is really easy just use on debug passing the same reference and then it won't bother you done it's also I also used this trick to you know like remove listener functions from an element during the runtime to grab the listener element that remove event listener pass the reference that way so oh the friends is going on for a long time all right so with that we are actually oh yeah I was going to show you that there is an easier way to do all this right on Chrome which is if you select the element over here you get this even listeners and it tells you exactly that there is one click event listener on this element open it up you get the handler right click on it it takes you right to the function definition so basically the same thing but a lot is your GUI way to do it and this is not present on the other dev tools so it's really handy so with that let's bring another one down continue watching button is working so the next one is side menu the drawer can be dragged within the viewport okay there's this I had this slide me anything that you can bring in whenever you're doing some stuff but apparently it can be brought inside though the viewport yeah so that's definitely a problem right so we got to go ahead and fix that all right so my workflow is like this like okay touch move well we are touching something we're moving something there's most likely a touch move annular in this code so I'm gonna use the command option F again and look for touch move all right draw our controller has a touch move it was related to drawer so I'm gonna go to source this hit command Oh to bring this file finder drawer controller find it enter command shift o to pop in the function finder typing move takes me right to the function then I'm gonna place the debugger in here let's see what's happening so let's run this alright so let's see what we're doing we're calculating the Delta between the touches based on that we're seeing what the direction is and there is this update function that's being called which puts in the requestanimationframe callback and there's this translate x value which is interesting and because this translate x value is being applied to the drawers so that it appears to be moving with your finger so I want to inspect what this translate X value is but I don't want the debugger to pop on me every time so how do I inspect this value and not have the debugger stop the trick is to use conditional breakpoint right click on the breakpoint you can edit it now you can put a condition JavaScript expression in here and I'm just gonna put in console.log translate X it needs to be a one-line down though the conditional break one works in this way like if whatever expression is the expression in there evaluates to true true T value is going to stop the JavaScript execution there if not it's not gonna bother controller log always returns undefined which is false T so it's never gonna stop here but it is always gonna log the value that I'm trying to lock so hit enter over there I'm gonna move it actually I should have done it in here because that's where the transit X value is so console the log translate X and let it play and now I can see my variable without the debugger stopping on me every time so if I look through it yeah we're getting some values and as soon as this thing enters the viewport yeah so looks like the problem is the translate x value gets way over zero and that means it's going to be inside the viewport right solution yeah we just got to make sure that stays not it never comes more than zero so basically all you got to do is put a math that I mean function on it mmm either negative or maximum of 0 save it let's see how it does and bring it in and yeah staying right in there all right awesome so one more thing I would like to show you here before we move on to which looks like the last one is the a think button over here on the top right I usually leave it on so JavaScript front-end lots of asynchronous stuff timers promises clicks extra chars being fired have finished all asynchronous so you're dealing with a Synchron 80 a lot right but you don't really get to see an aries informated stack traces for a sing operation let me show you an example so I'm gonna go over here dropping one of the snippet called async since this function is doing something asynchronously there's a promise returns a promise that gets resolved when the timer gets fired after 10 milliseconds and this function is being called and when the promise gets resolved I'm gonna stop the script execution right so let's see what's enter and check out the call stack on async task completed that's all it got it doesn't tell you about where the async tasks started why did it complete nothing about that so with this acing let's watch this tacked race when the acing flag is turned off so I'm gonna do a sync flag on react secure the same function and now we get this richer stack trace for our acing operation he tells me the async task completed was fired because a promise got resolved the promise why did it get resolved because the timer fired why because that timeout callback was set why because a promise resolver called it why because do something anything you get a richer stacktrace for asynchronous our operations so I usually just leave it on async tagged with that I'm ready to go to the last one which is slide many moves vertically when it opens alright so which is this one yeah it just look like it's moving vertically but I want to examine it a little better so what I'm gonna do is I'm gonna go to this many over here animations and then it's gonna listen for animations with that turned on I'm gonna reanimate so it captures something over here now I'm gonna slow it down to 10% of his speed replay it and then we see exactly what's happening right the the drawer like kind of starts on the top and slides a little bit down I can stick it manually as well like see exactly what's happening and notice that the dev tools is telling you exactly which elements was animating at that time so if these animations are being done using CSS animations or newer web animation API dippel's going to capture it for you why is it important because then you can easily reverse-engineer the cool animations that you see on the web you know just go there capture the animation and you can just examine what elements are being animated and how so the fixed worth this one must be in the drawer CSS commando bringing the drawer CSS and the drawer starts on the top of 0 left of 0 YX is 0 but when it gets visible it's somehow being moved on by 12 pixels on the y-axis that's what's moving it down something's gonna play bring it down to 0 and with that let's recapture the animation name let's see if we fixed it and yeah this that's going on the straight line yeah that was the last issue so let's bring it back to done right before we actually call it off there are a couple of things that I would like to show to you guys one of them is snippets snippets is over here on the sources panel snippets and snippets allow you to run like your JavaScript on pretty much any page for an example I got this snippet that includes lodash in the current page so for me it's the matter of using commando typing lodash takes you to this snippet hit command enter to run the snippet and then you got lodash in your page easy does it so the same way you can include jQuery you know if the application is not using jQuery and if you want to bring it in in real life it's so so you can do it so fast like it commando typing lodash come and enter and you got lodash in your page you can put in whatever library you need like that another thing I got over here is this pixel came snippet that shows you like the schedule of the pixel scam it takes the data directly from the pistol scam API is in shows you in a nice table form like currently we are somewhere over a year and how did I did the table because we got a nice console table API it takes an object and it shows you in a nice table form how did I make this pixel camp looking banner on top because console the law takes in this dot percentage C placeholder and then you can replace the placeholder with CSS like syntaxes you know background of FDC whatever and you can style your consult some people went ahead and did some crazy stuff so you get to do things like this like pixels games so awesome followed by use rainbow I did not make it let's just grab it from the internet somebody's got a lot of time but anyways you can do it stuff like this alright the last thing that I want to show is no js' debugging using the dev tools as starting node version sticks for 3.0 I think I don't count me and this I think is six month 3.0 you can't you have this new command-line option with which you can do like I got this node script over here you can just normally you do note your script Egeus but now just do a node inspect and if you're gonna place the debugger on the first line debug break and then your script let me zoom it in for you guys so it's like no inspect debug break index a J's it's gonna give me this nice dev tools URL and I'm just gonna copy this URL and place it on here and then it stopped now it's executing nodejs esprit on tiptoes and I can use all the hotness from the guru dev tools to you know kind of debug my node script yeah you got everything like async stack traces you got call stack everything that devtas has to offer you got it there and that was the last feature that I wanted to talk to you guys about I hope that was that was you guys learned a thing or two from about dev tools yeah I thought you I hope you guys found it interesting before I go how do I catch up with all the things how do I find all these features how can you guys stay on top as well I follow some really good people on Twitter Paul Irish works for dev tools and tweets about or writes about performance related stuff how we can use dev tools to you know profile and hunt down performance issues Paul Irish and he's super approachable and Twitter so if you got a problem then you can just tweet to him and he's like he's gonna help you out that's right great similarly addy Osmani also from Google he is writing a lot about on medium and tweeting a lot about Chrome and fresh stuff in chrome and you got this guy called Umar honza at Umar and he has this like dev tool tips newsletter so you can subscribe to the newsletter and there's gonna be like nice gifs coming your way every other week about the new feature in dev tools and of course you got the developer tools documentation yourself so just go ahead over here on the top right and then go to help and it's going to actually take you to the documentation related to this panel that you're opening so and they keep it really really fresh and updated as well so that's really good place to go for information and there are some github repositories like awesome chrome dev tools if you look it up you're gonna find it there and there's some nice stuff that you can use to make your dev tools even more awesome and like I said before dev tools is just the web app so if you know JavaScript you know HTML if you know CSS you'll understand the code of dev tools so just get the code and start digging in looking into it and then you get to stay on top of the game basically and yeah with that I think we are at the end of the talk thank you very much for attention oh my god if you got cushions now's the time no questions all right right thank you very much guys

Channel: Pixels Camp

Views: 23,381

Rating: 4.9603958 out of 5

Keywords:

Id: KykP5Z5E4kA

Length: 48min 6sec (2886 seconds)

Published: Thu Oct 13 2016