Name: JavaScriptのデバッグ - 間違ったことをしていませんか？ (Debugging JavaScript - Are you doing it wrong?)
Uploaded: 2021-01-14T10:29:49.000Z
Duration: 4 min 13 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

様態の副詞

Whenever your JavaScript doesn't work, he probably resort to scattering Consul Doc logs around your code and checking the consul.

But this could be a messy and frustrating way to debug your Java script 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 re ducks from beginner to paid professional course.

So it's react up, but that's completely irrelevant.

What I'm going to show you will work for any friends in Java script, whether you're using a framework or not.

If we do a search, the thumbnails all come back working.

They'll go to the part of the curried where we've got the function that processes the search results on do it consul dot log on the results, then go back to the browser on Reload it.

Then you want to bring up the consul and we want to check the results that we've output it on.

Yeah, they all look fine to us, so the next step is usually to add another concert dot log somewhere else.

Now, this way of debugging does work, but it is a bit cumbersome, constantly adding and removing consul dot locks all over the place under him to show you a slightly nice away in the code, we simply remove the consul dot log and in its place, we put the word D bugger.

Now let's go back to the browser and see what that does.

You're going to need to make sure the developer tools are open.

We perform our search again Now, when the code hits the debug a statement, the browser stops the Java script.

At this point, we call this a break point.

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 cool 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 got available at the current points and see all of the variables in each scope and even their current values.

We can even add new break points by kicked clicking like this.

Onda blew our comes up and we press the blue arrow down here and this moves on to the next break points or just to the end of the code.

If there isn't one, and you can just remove the break point by clicking it again, you can press this down our hair to skip into functions or this right facing arrow here to step through the code one line at a time.

And somewhere down here we've got the valley we want.

We thought it was a string, and this is what we've got a problem, but it's actually an object on.

R L property, which is a strength on the bugger, gives us the exact line of code we need to go and fix it.

We know the exact line number where we've got the problem because we saw it in the deep bugger and now we just fix it by adding dot u R l And of course, we go down on We removed the debug a statement.

So in the browser again, we reload performance of the search.

 Break points are more professional fast that and hassle free way to debug your Java script code. 

字幕リスト動画再生

JavaScriptのデバッグ - 間違ったことをしていませんか？ (Debugging JavaScript - Are you doing it wrong?)

constantly

slightly

completely

expect