Section 4 (Javascript): Lesson 17 - Troubleshooting JavaScript in the browser
Hey you.
And welcome.
In this video we will learn how to debug our JavaScript that we have written, so let's dive right into
it.
There are a few ways to debug your JavaScript and by debugging I mean find out if if you run into a
problem, find out where the problem is and troubleshoot that.
So first way would be the one we have already looked at where we console log the items.
So I can console log a value here.
Let's say I pass a value argument and accept that value as a parameter and then pass it to the console
log as an argument.
There we are.
And if I have it open already in the browser, so I have my Firefox open and in the browser if I open
my developer tools for the browser.
So command option K because I'm in Firefox, but on brave browser Chrome browser command option J on
Mac would open the developer tool or you can just right click inspect element.
Both of them work the same way.
So yeah, you can see that the value is actually equal to value because that's what I provided in my
VS code.
So if I was to change it to args, save that, go back to the browser and we can see that the value
is now set to args.
So that's one way to do it.
You just put console logs in different places and there's not just console log.
I'm going to switch back to my VS code for a bit.
There's console error.
There is console.
Debug.
Sure there is the console info.
Sure.
Perfect.
Save all of that and we can see that some of them show up, some of them don't.
And the reason for that is because by default, browsers only show maybe logs.
They may not show warning or error.
They may not show info.
So you have to open that or toggle that open to say, show me all kinds of logs, errors, warnings,
logs, info, debug all of them and that's what console log would do for us.
Let me take this away.
And go back to the originals.
Yeah, right there.
Perfect.
This is what I wanted.
Perfect.
So that's one way to do it.
Console log.
The other way to do it is by using the developer debugger tool that is in every browser.
So let me show you how to use that.
So let's say if I go over to the debugger section in the browser developer tools, that's where it will
show up.
That's where Firefox and Chrome, it may be called source, and if you click on source, it will look
exactly the same way.
So you can follow the steps along exactly the same way.
So I can see there's a bunch of files.
One of them is the index file, which is the HTML file that we wrote along with some other information
that got added by the browser.
So we don't really have to care about that.
But up until here, up until the script tag, that's the HTML code that we have written.
Then there's also the Index.js file, and that's the Index.js file.
You can see that we have just been modifying and that shows up in the debugger tool as well.
Meaning now I can play around with it or slow it down, slow down the execution and go step by step.
In order to do so, we have to create a breakpoint.
And a breakpoint would just be click on the line number and you can see when it hits this line number,
stop the execution of JavaScript and give me control to go step by step and I want to see what's happening
behind the scenes.
So let's say I put line number two as my breakpoint, and if I was to refresh my page at this point,
notice that it says Pause for breakpoint or paused on breakpoint.
And on the right hand side it says that as well.
At the bottom right paused on Breakpoint.
That's because our debugger tool has now taken control and stopped it right on line number two.
And we have some extra information given to us on line number one.
I can see on the right hand side it said the value will be set to args, which is true.
Value will be set to args.
If I was to hover over the value it gives me the same information.
Value will be set to args.
So if you want to see what the different variable state would be at certain point, this is how you
would do it.
You just hover over it and it will tell you on the right hand side it has some more information too.
If I was to scroll down, I believe.
There we go.
It tells me the setup function that this keyword is undefined because remember, it's a error function.
So that's why there is no this context to it.
But if it was a regular function, then there would be a this and it will provide you information about
what this is.
And then in the arguments, if I scroll for like open that up, you can see the first argument provided
to us is args and the value parameter is set to ARG so we can see some more information.
As the functions get bigger, we can debug them using this tool.
All right.
Next I want to show you how can we keep going further down the line to see how things change?
So if I click on Step Into or it says Command F11 so we can go either way, I'll just click on it.
It takes me to the next line and you can see as I go to the next line, line number two has the same
En esta página del sitio puede ver el video en línea Section 4 (Javascript): Lesson 17 - Troubleshooting JavaScript in the browser de Duración hora minuto segunda en buena calidad , que subió el usuario ximxim 07 junio 2023, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 4 veces y le gustó 0 a los espectadores. Disfruta viendo!
