whenever your javascript doesn't work
you probably resort to scattering
console.logs around your code and
checking the console but this can be a
messy and frustrating way to debug your
javascript in this video i'm going to
teach you a better way
so i have this web app here it's
actually the main project from my learn
react and redux from beginner to paid
professional course so it's a react app
but that's completely irrelevant
what i'm going to show you will work for
any frontend javascript whether you're
using a framework or not
anyway this app is broken if we do a
search the thumbnails all come back
broken
so what do we do so most people will do
this
they'll go to the part of the code where
we've got the function that processes
the search results and do a console.log
on the results
then go back to the browser
and reload it
then you want to bring up the console
and we want to check the results that
we've outputted
and yeah they all look fine to us so the
next step is usually to add another
console.log somewhere else
now this way of debugging does work but
it is a bit cumbersome constantly adding
and removing console.logs all over the
place
i'm going to show you a slightly nicer
way
in the code we simply remove the
console.log
and in its place we put the word
debugger
now let's go back to the browser and see
what that does
so we reload in the browser and you're
going to need to make sure the developer
tools are open all this won't work at
all
we perform our search again
now when the code hits the debugger
statement the browser stops the
javascript execution is paused at this
point we call this a breakpoint we can
now do some really cool things
we can inspect the current state of the
code
we can see exactly where we are in the
code we can mouse over variables and it
shows their current values
if you go down here we can see a call
stack showing all of the functions that
were called to get to this point
over here we can see all of the variable
scopes we've got available at the
current point and see all of the
variables in each scope and even their
current values
we can even add new breakpoints by
clicking like this and a blue arrow
comes up then we press the blue arrow
down here and this moves on to the next
break point or just to the end of the
code if there isn't one and you can just
remove the breakpoint by clicking it
again
you can press this down arrow here to
skip into functions or this right facing
arrow here to step through the code one
line at a time
so this goes into another function call
and somewhere down here
we've got the valley we want we thought
it was a string and this is why we've
got a problem but it's actually an
object and we want the url property
which is a string
and the debugger gives us the exact line
of code we need to go and fix it so we
go back to our code we know the exact
line number where we've got the problem
because we saw it in the debugger and
now we just fix it by adding dot url
and of course we go down and we remove
the debugger statement
so in the browser again we reload
perform another search
and now we get all our thumbnails
everything works as expected so there
you have it
breakpoints are a more professional
faster and hassle-free way to debug your
javascript code