14 Must Know Chrome Dev Tools Tricks - #JavaScript30 9/30

[Music] this is a quick video on some dev tools and console tricks kids are you know most of these already but I hope that you just learned like one or two little nuggets from watching this quick video so what we've got here is I've got a paragraph tag when you click it it's going to run a function called make screen and this function here and I've just done that in line for simplicity sake I could add an event listener there's no difference there and when I run it it will just take the first paragraph on the page and make it green and up the size right so that's something that happens to people where they ask me hey like I have some JavaScript running on the page but I don't know what is causing it I don't know what is actually changing it I know it's JavaScript but I don't know where the JavaScript that is changing that is is running so what you can do is you can inspect it find it in your Dom here break on attribute modifications there's some other ones here like when you remove a child or you were to change one of the children's text or attributes or something like that we want this one attribute modification now when you click it it's going to pop a debugger command in it's a breakpoint for us here and it will then pause exactly where it paused it'll tell us what the paragraph is and it'll show us a line of code that is causing that attribute I could pause it and go through and we're done so we can take that off just by going back to our elements panel taking that off next up we have a whole bunch of console dot things and you probably know about console dot log like Hello which will give you obviously in this a million times will log it you can also interpolate values into it so console dot log say hello I am a and then use percent F string and then whatever you pass it in the other ones you may have done another language like PHP in the past where it does this for you and that will interpolate what you have passed as the second one into the first one now I don't use that all that much anymore now that we have es6 backticks i much prefer just to do console.log backticks hello I am and putting my variable right inside of there but it's totally up to you whether it which one you'd like it we can also style our text with percent C so console.log oh and some great text and if we put a percent C in front of there and on the second one we do things like font size and you can apply any font CSS to it 50px whoa I am some great text we can also do things like background red whoa you can do things like text shadow 10px 10px 0 rgba let's just do blue you get the point here you can do some pretty fun stuff with it so you do % C in front of the thing that you want to style and then the second argument that you pass the console will be interpolated right into there it's going to calm us out cuz it's obnoxious we have a console dot worn which we say oh no and that will give us a warning it will tell us the stack traces to where it got called we have console dot error which will throw any oh sorry we won't throw an error it will just display in there in the console and again that will also give you a stack trace as to where that was if we had a couple functions calling to get to that point it would give you the entire stack trace there we have combo info which will give you a little bit of info like I had like a fun hold on let me find you a fun fact here crocodiles eat three to four people for a year that's a fun fact it should be comfortable that fun fact but it's info and it will give you the little I info one you can use console dot a cert to check if things are true so if one is equal to one you will say that is wrong and if we run this you don't see anything why because that is true gospel that assert will only fire if something is wrong and then it will tell you assertion failed that is wrong if I were to grab a paragraph on the page so constant P equals document query selector paragraph and then you could assert that P dot class list that contains ouch and then you could tell the user that is wrong and if the class list is not contained ouch it will tell you that is wrong or you must apply a class you get the point here you can test for something and if it is false it will throw this error into your console here and if it is true nothing will happen so you don't have to have an if statement in here we have console dot clear which will clear your console if you really want to mess with a developer you could just put that at the bottom of your JavaScript file so that's that's really frustrating viewing Dom elements so I've got this paragraph here and if I were to come to a lot log that paragraph that we selected earlier you see this is the actual paragraph but how do you know what are the available methods and all the properties on that element well if you want to use console dot Durer that's going to give you a drop-down so that's the element console log console that Durr is going to allow you to open it up and take a look at the class list whoa open that right up child knows the children the data set on that specific one the style all the different properties and methods that live if you want to see all the methods you crack open the prototype all of the stuff that lives on that element console dot Durer will show you where as console dot log it's going to show you the actual element itself grouping things together this one is actually pretty cool and it's going to run another console dot clear in here if I were to take this dog's array that I've got up at the top here and loop over each one so console dot dog dot for each dog and then for each of these I'm just going to let console.log this is dog name and this is Snickers this is Hugo but what if I have some other information age I want to have like another one dog name is dog age years old okay and maybe another one dog named our dog's age times seven dog years old so this gets a little bit hairy got a lot going on here and imagine you're doing more stuff than just console logging three strings you have a lot of stuff so what we can do is we can say console group and you can start it up and we'll we'll use the dog's name here dog name and when you're done you say console group and and then you pass the same string that you used to define that group and now when you open it up you've got Snickers and Hugo these are the two groups that we've made by passing it and you can close open and close them if you feel like this is still a little bit messy you can switch out group with group collapsed and by default they will be collapsed which is really nice because you might not necessarily need that information but if you do you can crack open the Associated one that you're looking for and see all the info that is associated for that one console that count will count however many times you use a specific word or number or object or domnode or anything that you have so console account wes or run that a couple times it's going to tell me how many times i have run it but if I were to take in Steve in the middle and then do a couple more of those another one down here and a couple more so I'm all over the place here it's going to just log them in real time telling me how many we've iterated over or telling me how many we've counted at that time finally we have timing if you want to see how long something takes what you can do is start a timer so console dot time will say fetching data and then you can do something that takes time like fetch some data from github and when you are done you simply run console dot time end and then you pass it the same string that you use to start it and you can obviously console.log your data at that time and then that will tell us fetching data took 160 milliseconds so I'm 104 milliseconds 57 60 to 75 etc so you can see how long these things are taking there is I know there also is performance now in the browser but this is a nice way just to get a quick idea of how long your things are taking you don't have to have variables or anything like that you just start and stop them finally there's one last one which is console dot table but I've been showing you that one in every single video so far you probably know about it but you can take an array of objects so an array which is dogs of objects which is each dog and assuming that they all have the same properties like name and age it will display them in a nice table for you like that it gets a little bit hairy when you have a few other but you can always drag and drop the things different parts that you want that's it hopefully you learned a thing or two I will see you tomorrow [Music] ah [Applause]

Channel: Wes Bos

Views: 87,023

Rating: 4.9500604 out of 5

Keywords: ES6, HTML, CSS, Javascript, Web Development, Coding, Design, Dev Tips, Web Design, Website, Web, Internet, Internet code, Tips, How To, tutorial, web design tuts, net tuts, web tuts, coding tutorial, advice, development advice, friendly internet, programming, programming help, html, css, javascript, workflow, code editing, design, graphic design, graphic designer, designer who codes, designers who code, design prototyping, Trello, Mind Maps, Responsive Web Design (Industry)

Id: xkzDaKwinA8

Length: 10min 36sec (636 seconds)

Published: Thu Mar 02 2017

Reddit Comments

[u/TurnToDust]

That console.group() was awesome, didn't know it yet.

[u/dadschool]

Why are all dev tools tips and tricks always just a list of console methods?