09 - 14 Must Know Dev Tools Tricks.vtt

WEBVTT

00:00:00.395 --> 00:00:03.900 line:100% position:50% align:middle
♪ [music] ♪

00:00:08.951 --> 00:00:13.030 line:100% position:50% align:middle
This is a quick video on some
dev tools and console tricks.

00:00:13.030 --> 00:00:16.610 line:100% position:50% align:middle
Chances are you know most of these
already, but I hope that you just learn

00:00:16.610 --> 00:00:20.510 line:100% position:50% align:middle
like one or two little nuggets from
watching this quick video.

00:00:20.510 --> 00:00:23.850 line:100% position:50% align:middle
So what we've got here is I've got a
paragraph tag, when you click it,

00:00:23.850 --> 00:00:27.430 line:100% position:50% align:middle
it's going to run a function called
"makeGreen". This function here.

00:00:27.430 --> 00:00:31.270 line:100% position:50% align:middle
And I've just done that inline for
simplicity's sake. I could have added

00:00:31.270 --> 00:00:34.370 line:100% position:50% align:middle
event listener, there's no difference
there. And when I run it,

00:00:34.370 --> 00:00:38.210 line:100% position:50% align:middle
it will just take the first paragraph on
the page and make it green and up the

00:00:38.210 --> 00:00:42.400 line:100% position:50% align:middle
size, right? So that's something that
happens to people, where they ask me,

00:00:42.400 --> 00:00:47.102 line:100% position:50% align:middle
"Hey, I have some JavaScript running on
the page but I don't know what is causing

00:00:47.102 --> 00:00:50.016 line:100% position:50% align:middle
it. I don't know what is actually
changing it. I know it's JavaScript,

00:00:50.016 --> 00:00:55.020 line:100% position:50% align:middle
but I don't know where the JavaScript that
is changing that is running." So what you

00:00:55.020 --> 00:01:01.060 line:100% position:50% align:middle
can do it you can inspect it, find it in
your DOM here, break on,

00:01:01.060 --> 00:01:04.550 line:100% position:50% align:middle
attribute modifications. There's some
other ones here, like when you remove

00:01:04.550 --> 00:01:09.114 line:100% position:50% align:middle
a child or you were to change one of the
children's texts or attributes or

00:01:09.114 --> 00:01:13.142 line:100% position:50% align:middle
something like that. We want this one,
attribute modification. Now, when you

00:01:13.142 --> 00:01:19.160 line:100% position:50% align:middle
click it, it's going to pop a debugger
command in. It's a break point for us

00:01:19.160 --> 00:01:25.000 line:100% position:50% align:middle
here, and it will then pause. Exactly
where it paused, it will tell us what the

00:01:25.000 --> 00:01:29.460 line:100% position:50% align:middle
paragraph is, and it will show us the line
of code that is causing that attribute.

00:01:29.460 --> 00:01:36.300 line:100% position:50% align:middle
I can pause it and go through, and we're
done. So we can take that off just by

00:01:36.300 --> 00:01:41.560 line:100% position:50% align:middle
going back to our elements panel,
and taking that off.

00:01:41.560 --> 00:01:45.270 line:100% position:50% align:middle
Next up, we have a whole bunch of
console. things, and you probably know

00:01:45.270 --> 00:01:50.860 line:100% position:50% align:middle
about console.log, like, hello, which
will give you, obviously, you've seen this

00:01:50.860 --> 00:01:55.010 line:100% position:50% align:middle
a million times, will log it. You can
also interpolate values into it,

00:01:55.010 --> 00:02:01.130 line:100% position:50% align:middle
so console.log, Hello I am a %s string!
And then whatever you pass it in

00:02:01.130 --> 00:02:10.917 line:100% position:50% align:middle
the other ones, you may have done another
language like PHP in the past where it

00:02:10.917 --> 00:02:15.514 line:100% position:50% align:middle
does this for you, and that will
interpolate whatever you have passed as

00:02:15.514 --> 00:02:20.322 line:100% position:50% align:middle
the second one into the first one. Now, I
don't use that all that much anymore now

00:02:20.322 --> 00:02:30.364 line:100% position:50% align:middle
that we have ES6 back-ticks, I much prefer
to do, console.log('Hello I am ${var}')

00:02:30.364 --> 00:02:33.580 line:100% position:50% align:middle
but it's totally up to you,
which one you would like here.

00:02:33.580 --> 00:02:37.156 line:100% position:50% align:middle
We can also style our text with %c.

00:02:37.156 --> 00:02:43.785 line:100% position:50% align:middle
So, console.log('I am some great text')

00:02:43.785 --> 00:02:50.806 line:100% position:50% align:middle
And if we put a %c in front of there, and
on the second one, we do things like

00:02:50.806 --> 00:03:00.250 line:100% position:50% align:middle
font-size, and you can apply any font CSS
to it, 50px. Whoa! I am some great text.

00:03:00.250 --> 00:03:07.756 line:100% position:50% align:middle
We can also do things like background:red.
Whoa! You can do things like

00:03:07.756 --> 00:03:18.902 line:100% position:50% align:middle
text-shadow: 10px 10px 0 blue.
You get the point here.

00:03:18.902 --> 00:03:22.820 line:100% position:50% align:middle
You can do some pretty fun stuff with it.
So you do %c in front of the thing that

00:03:22.820 --> 00:03:26.510 line:100% position:50% align:middle
you want to style, and then the second
argument that you pass to console will be

00:03:26.510 --> 00:03:29.773 line:100% position:50% align:middle
interpolated right into there.
I'm going to comment that out

00:03:29.773 --> 00:03:30.818 line:100% position:50% align:middle
because it's obnoxious.

00:03:30.818 --> 00:03:37.600 line:100% position:50% align:middle
We have console.warn, which will say,
"OH NOOO" And that will give us a warning,

00:03:37.600 --> 00:03:41.240 line:100% position:50% align:middle
and will tell us the stack trace as to
where it got called. We have

00:03:41.240 --> 00:03:46.027 line:100% position:50% align:middle
console.error which will throw,
well, sorry, it won't throw an error.

00:03:46.027 --> 00:03:51.190 line:100% position:50% align:middle
It will just display an error in the
console. And again, that will also give

00:03:51.190 --> 00:03:55.210 line:100% position:50% align:middle
you a stack trace as to where that was. If
we had a couple functions calling to get

00:03:55.210 --> 00:03:57.955 line:100% position:50% align:middle
to that point, it would give you the
entire stack trace there.

00:03:57.955 --> 00:04:01.960 line:100% position:50% align:middle
We have console.info which
will give you a little bit of info,

00:04:01.960 --> 00:04:08.056 line:100% position:50% align:middle
like, I had a fun...
Hold on, let me find you a fun fact, here.

00:04:08.056 --> 00:04:11.341 line:100% position:50% align:middle
Crocodiles eat three to four
people per year. That's a fun fact.

00:04:11.341 --> 00:04:14.743 line:100% position:50% align:middle
It should be console.funfact, but
it's info, and it will give you the little

00:04:14.743 --> 00:04:16.949 line:100% position:50% align:middle
"i" info one.

00:04:16.949 --> 00:04:24.790 line:100% position:50% align:middle
You can use console.assert to check if
things are true. So if one is equal to one

00:04:24.790 --> 00:04:31.750 line:100% position:50% align:middle
you will say "That is wrong!" And if
you run this, you don't see anything.

00:04:31.750 --> 00:04:36.630 line:100% position:50% align:middle
Why? Because that is true. Console.assert
will only fire if something is wrong.

00:04:36.630 --> 00:04:40.750 line:100% position:50% align:middle
And then it will tell you, "Assertion
failed. That is wrong." If I were to grab

00:04:40.750 --> 00:04:48.471 line:100% position:50% align:middle
the paragraph on the page, so,
const p=document.querySelector,

00:04:48.471 --> 00:04:59.090 line:100% position:50% align:middle
"paragraph', and then you could assert
that "p.classlist.contains(ouch)" and you

00:04:59.090 --> 00:05:07.210 line:100% position:50% align:middle
could tell the user, "That is wrong!" And
if the classlist does not contain "ouch"

00:05:07.210 --> 00:05:11.180 line:100% position:50% align:middle
it will tell you that is wrong or you must
supply class...you get the point here.

00:05:11.180 --> 00:05:17.060 line:100% position:50% align:middle
You can test for something and if it is
false, it will throw this error into your

00:05:17.060 --> 00:05:21.130 line:100% position:50% align:middle
console here. And if it is true, nothing
will happen. So you don't have to have an

00:05:21.130 --> 00:05:22.900 line:100% position:50% align:middle
"if" statement in here.

00:05:22.900 --> 00:05:29.020 line:100% position:50% align:middle
We have "console.clear" which will clear
your console. If you really want to mess

00:05:29.020 --> 00:05:32.760 line:100% position:50% align:middle
with a developer you could just put that
at the bottom of your javascript

00:05:32.760 --> 00:05:36.817 line:100% position:50% align:middle
file. Because that's really frustrating.
Viewing DOM elements. So I've got this

00:05:36.817 --> 00:05:40.597 line:100% position:50% align:middle
paragraph here, and if I were to
"console.log" that paragraph that we

00:05:40.597 --> 00:05:43.450 line:100% position:50% align:middle
selected earlier, you see this,
the actual paragraph.

00:05:43.450 --> 00:05:47.433 line:100% position:50% align:middle
But how do you know what
are the available methods

00:05:47.433 --> 00:05:50.962 line:100% position:50% align:middle
and all the properties on that
element? Well if you want to use

00:05:50.962 --> 00:05:54.956 line:100% position:50% align:middle
"console.dir", that's going to give you a
dropdown. So that's the element

00:05:54.956 --> 00:05:59.890 line:100% position:50% align:middle
"console.log". "Console.dir" is going to
allow you to open it up and take a look at

00:05:59.890 --> 00:06:05.530 line:100% position:50% align:middle
the class list. Whoa! Open that right up.
Child knows the children,

00:06:05.530 --> 00:06:09.970 line:100% position:50% align:middle
the dataset on that specific one, the
style, all the different properties and

00:06:09.970 --> 00:06:12.680 line:100% position:50% align:middle
methods that live. If you want to see all
the different methods, you crack open the

00:06:12.680 --> 00:06:17.310 line:100% position:50% align:middle
prototype. All of the stuff that lives on
that element, "console.dir" will show you,

00:06:17.310 --> 00:06:22.220 line:100% position:50% align:middle
whereas "console.log" is going to show you
the actual element itself.

00:06:22.220 --> 00:06:25.510 line:100% position:50% align:middle
Grouping things together. This one is
actually pretty cool. I'm just going to

00:06:25.510 --> 00:06:33.281 line:100% position:50% align:middle
run another "console.clear" in here. If I
were to take this "dogs" array that I've

00:06:33.281 --> 00:06:42.730 line:100% position:50% align:middle
got up at the top here and loop over each
one. So "console.dogs.forEach", "dog",

00:06:42.730 --> 00:06:47.080 line:100% position:50% align:middle
and then for each of these I'm just going
to do "console.log(`This is

00:06:47.080 --> 00:06:52.740 line:100% position:50% align:middle
${dog.name}`)" and "This is Snickers,",
"This is Hugo." But what if I have some

00:06:52.740 --> 00:07:02.840 line:100% position:50% align:middle
other information? Age. I want to have
like another one, "dog.name" is "dog.age"

00:07:02.840 --> 00:07:14.310 line:100% position:50% align:middle
years old. Okay, and maybe another one,
"dog.name", "dog.age*7" dog years old.

00:07:14.310 --> 00:07:18.060 line:100% position:50% align:middle
So this gets a little bit hairy, got a lot
going on here, and imagine you were doing

00:07:18.060 --> 00:07:22.230 line:100% position:50% align:middle
more stuff than just console logging three
strings. You have a lot of stuff.

00:07:22.230 --> 00:07:30.550 line:100% position:50% align:middle
So what we can do is we can say
"console.group" and you can start it up

00:07:30.550 --> 00:07:36.820 line:100% position:50% align:middle
and we'll use the dog's name here,
"dog.name". And when you're done, you say

00:07:36.820 --> 00:07:43.810 line:100% position:50% align:middle
"console.groupEnd" and then you pass
the same string that you used to define

00:07:43.810 --> 00:07:49.000 line:100% position:50% align:middle
that group. Now when you open it up,
you've got "Snickers" and "Hugo",

00:07:49.000 --> 00:07:53.890 line:100% position:50% align:middle
these are the two groups that we've made
by passing it, and you can close,

00:07:53.890 --> 00:07:57.930 line:100% position:50% align:middle
open, and close them. If you feel like
this is still a little bit messy,

00:07:57.930 --> 00:08:02.530 line:100% position:50% align:middle
you can switch out "group" with
"groupCollapsed", and by default they will

00:08:02.530 --> 00:08:05.540 line:100% position:50% align:middle
be collapsed. Which is really nice because
you might not necessarily need that

00:08:05.540 --> 00:08:09.510 line:100% position:50% align:middle
information, but if you do, you can crack
open the associated one that you're

00:08:09.510 --> 00:08:14.240 line:100% position:50% align:middle
looking for and see all the info that is
associated for that one.

00:08:14.240 --> 00:08:21.880 line:100% position:50% align:middle
"Console.count" will count however many
times you use a specific word,

00:08:21.880 --> 00:08:27.200 line:100% position:50% align:middle
or number, or object, or DOM node, or
anything that you have. So "console.count"

00:08:27.200 --> 00:08:32.520 line:100% position:50% align:middle
"Wes", I run that a couple of times, it's
going to tell me how many times I have

00:08:32.520 --> 00:08:37.124 line:100% position:50% align:middle
run it. If I were to take and say "Steve"
in the middle, and then do a couple more

00:08:37.124 --> 00:08:42.047 line:100% position:50% align:middle
of those, another one down here and a
couple more. So I'm all over the place

00:08:42.047 --> 00:08:50.615 line:100% position:50% align:middle
here. It's going to just log them in
real time, telling me how many we've

00:08:50.615 --> 00:08:52.577 line:100% position:50% align:middle
counted at that time.

00:08:52.577 --> 00:08:56.740 line:100% position:50% align:middle
Finally, we have "Timing". If you want to
see how long something takes,

00:08:56.740 --> 00:09:03.910 line:100% position:50% align:middle
what you can do is start a timer. So
"console.time", we'll say "fetchingData",

00:09:03.910 --> 00:09:17.970 line:100% position:50% align:middle
then you could do something that takes
time, like fetch some data from github.

00:09:17.970 --> 00:09:23.460 line:100% position:50% align:middle
And when you are done, you simply run
"console.timeEnd" and then you pass the

00:09:23.460 --> 00:09:29.250 line:100% position:50% align:middle
same string that you used to start it. And
you can obviously "console.log" your data

00:09:29.250 --> 00:09:35.331 line:100% position:50% align:middle
at that time. Then that will tell us,
fetching data took 160 milliseconds,

00:09:35.331 --> 00:09:42.178 line:100% position:50% align:middle
this time 104 milliseconds, 57, 62, 75,
etc., etc. You can see how long these

00:09:42.178 --> 00:09:47.147 line:100% position:50% align:middle
things are taking. I know there also is
"performance.now" in the browser,

00:09:47.147 --> 00:09:52.011 line:100% position:50% align:middle
but this is a nice way just to get a quick
idea of how long your things are taking.

00:09:52.011 --> 00:09:55.006 line:100% position:50% align:middle
You don't have to have variables
or anything like that.

00:09:55.006 --> 00:09:56.736 line:100% position:50% align:middle
You just start and stop them.

00:09:56.736 --> 00:10:00.335 line:100% position:50% align:middle
Finally, there's one last one, which is
"console.table", but I've been showing you

00:10:00.335 --> 00:10:03.806 line:100% position:50% align:middle
that one in every single video so far.
You probably know about it.

00:10:03.806 --> 00:10:09.878 line:100% position:50% align:middle
But you can take an array of objects, so
an array which is "dogs" of objects,

00:10:09.878 --> 00:10:13.570 line:100% position:50% align:middle
which is each dog, and assuming that they
all have the same properties,

00:10:13.570 --> 00:10:17.982 line:100% position:50% align:middle
like "name" and "age", it will display
them in a nice table for you,

00:10:17.982 --> 00:10:21.102 line:100% position:50% align:middle
like that. It gets a little bit hairy
when you have a few other,

00:10:21.102 --> 00:10:25.026 line:100% position:50% align:middle
but you can always drag and drop the
things, different parts that you want.

00:10:25.026 --> 00:10:29.868 line:100% position:50% align:middle
That's it. Hopefully you learned
a thing or two. I will see you tomorrow!

00:10:29.868 --> 00:10:32.841 line:100% position:50% align:middle
♪ [music] ♪