Thanks dude, I am one of those guys, who have had sleepless night, not being able to figure it out what I did wrong, It would drive me nuts, please do some more debugging. I find very few tutorials confront this important aspect of coding, I suppose your channel can grow further if you make more videos on this subject.
As a WebDev teacher, this video (and so many other of your videos) is gold. It explains in a concised way all the bugs that my students are facing at the beginning. Thank you for your excellent content.
This was great! Debugging is and probably will be one of my greatest weaknesses, so thank you for taking the time to make this video! Is there any possibility that you could do one for debugging PHP? And in extension php with Wordpress? Again great video and I look forward to all you other ones you do!
Create a vid and explain the chrome debugger tool where we use breakpoints and global and local stuff , deep dive into it cuz its a must to have , thanks❤
OK, one tip for the braces and quotes - I'm always surprised how many people don't get this right; even with today's modern text editors who basically do this for you: NEVER open a brace, like {, then start coding. ALWAYS insert BOTH braces, like {}, THEN go a step back and THEN start coding. (I am NOT "forgetting" to mention the indentation here, I am ignoring it. But I DID write () first, then went a step back and started typing this to make sure this had a closing brace.)
Before this i was like "omg i know nothing in debugging nobody will hire me" and after you're video, seeing you debugging like me, i feel sooo much more confident! Thank you Kyle!
Love your videos! Especially that you usually start with an empty folder and build from there. How come you do not usually use strict equality when comparing?
I generally use strict equality for everything except for comparing null since I want to catch both null and undefined. I have an entire video explaining the difference between the two forms of equality and when I use one over the other if you are interested.
Thanks. 1) [9:30] so you clicked on line 5 to add a break point. So does the code run up til or including line 5? 2) Are there times one wouldn't use console to tweak and test code when implementing breakpoints?
Hello from New York! What is the best procedure to step through JavaScript code in order to understand program's control flow and inspect variable data in real time? Thanks for informative video.
The 'run code step by step debuggers with full view of variables in memory in scope' are by far the strongest debugging tool. console.log, var_dump, print should be forbidden :) It is so slow in comparison
Best way is to not rely on the debugger at all. Trying to make code work in the first run, and even if there's an error trying to figure it out without using the debugger first. Best way to train fast coding.
I actually think it is really important to learn to use the debugging tools since it is impossible to always get the code to work the first time and being able to quickly debug a problem is one of the most important skills a developer can have.
@@WebDevSimplified My debugging logic is much better than my memory. I actually remember proper code based on the debug. This is how my brain works. Others may differ. I'm not coding everyday though.
@@WebDevSimplified Not contesting that it's impossible to code without a dubugger. However many devs spend much more time debugging than they spend time coding. In these cases there's potential for a significant speed gain if you actively try to make your code work immeadiately and not simply rely on the debugger as your second brain.
This is great. Is there a reason to put the negative if condition first? I see that done a lot and I always wonder if there is a good reason or it's just preference? For ex is there a reason you went: if(user.age != null) {...} Instead of: if(user.age) {...}
I like to be explicit when checking for null. Your if statement would return false if user.age was 0 for example even though 0 could be a valid age for a newborn baby.
The reason I disagree with you is because this video is aimed at beginners, who will not be able to deduce the error from the messages as you just did. A useful error message, from the viewpoint of a beginner would be 'did you miss a colon?' or something along those lines, like python does for example.
Every debugging video is the same. Small blocks of code, nobody is doing it with a complex project with different libraries, where your code jumps from one file to another. But good work and thanks for sharing.
You speak so fast. But after a few tries it helps...I am a BRAND new web dev student @ a local tech school...And it's all online. And so far, debugging is Killing me..i see this was a year ago and I hope that your other videos you speak just a little slower to really emphasize what you are showing. Tell Show DO..it helps. thanks
Bro plz make a tutorial on how to create freindship quiz website to calculate friendship% (like buddy meter website) plzzzz make this tutorial plzzzzzz
This is a very specific concept which I generally do not like to do on my channel. I do have a video on how to create a quiz and from there you can expand that to make it a buddy quiz.
ua-cam.com/video/HnXmI2UVZlU/v-deo.html here is another good tip that really helped me out. For those of us who are used to break points and stepping thru code in Visual Studio. Thanks for all the help!!
There is but you need to setup vscode with Google chrome to have them work properly. This isn't too hard to do though. That is what the debugger tab is for in vscode.
im stuck using w3shools dit com mail template trying to make it dynamic would you make a proceedual php vid tut on this subject please would help me out a lot i can get it half way there with while loop I really think i should be using for loops and also stuck with there js as need to also make that dynamic. I would apreciate any help from anyone on this as i hate being defeated with code issues lol its here the page i on about w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_mail&stacked=h When I say dynamic i mean using a mysql database using mysqli (old school proceedual not object oriantated or anything fancy). The problem I have is showing more than 1 email on the left nav pane 1 works im not sure if it is due to while instead of a for loop or the javascript as they set it up only for 3 examples with div id's and they dont show how to make this a real thing you see.
This seems to be a really particular problem and use case, so I do not think it would make a very good video since it would be too specific to be useful outside this context.
You can try watching the video at a slower speed such as .75 or .5 if I am speaking too fast. I try to speak at a rate that is comfortable for most people, but if it is too slow or too fast I always recommend changing the playback speed.
yes I think adjusting playback speed to suit your needs is the best strategy. I personally like faster speed, and WDS is one of the few channels I watch without doing 1.5X, I only occasionally do 1.25X only when am familiar with the topic. I found I am forced to focus when teacher is a bit fast, heehee.
Great video, but you're method for debugging is flawed. Debugging is much like trouble shooting for those that are familiar with the term. To properly debug you must use the half-way method, this means that you're finding the error in log n time. If you're using a debugging tool you want to set the break-point at the halfway mark. This will narrow down where the error occurs. If you're using just print statements make sure you have one half-way to ensure that its good/bad at that point. In simple code you can just test if the error occurred here then there, but if the input to output process is complex that not ideal.
Ive been coding since my early teens and I’m still terrible at debugging, thanks for the video ❤️
Thanks dude, I am one of those guys, who have had sleepless night, not being able to figure it out what I did wrong, It would drive me nuts, please do some more debugging. I find very few tutorials confront this important aspect of coding, I suppose your channel can grow further if you make more videos on this subject.
I plan to make more videos on debugging. It is hard to make good videos on debugging though since it is very situational and hard to generalize.
Thank you so much. Keep making these type of videos for debugging.
You're welcome! I'm really glad you enjoyed it.
As a WebDev teacher, this video (and so many other of your videos) is gold. It explains in a concised way all the bugs that my students are facing at the beginning. Thank you for your excellent content.
This was great! Debugging is and probably will be one of my greatest weaknesses, so thank you for taking the time to make this video! Is there any possibility that you could do one for debugging PHP? And in extension php with Wordpress? Again great video and I look forward to all you other ones you do!
Kyle's hair is always spectacular.
Right? I love it
haha
Border radius : 10px
Great Video. Also guys remember that debugging becomes extremely easy if your project uses typescript
Great topic. Would love to see advanced debugging in chrome next 👍
That is a good idea.
Sir try to do videos on algorithms and data structures in javascript whenever you find sufficient time to do for.
I plan to make some more algorithm videos but have been having a lot of fun doing small project based videos recently.
This is an awesome video. I was not aware of breakpoints in the browser.
Create a vid and explain the chrome debugger tool where we use breakpoints and global and local stuff , deep dive into it cuz its a must to have , thanks❤
Excellent debugging techniques here. Thanks
OK, one tip for the braces and quotes - I'm always surprised how many people don't get this right; even with today's modern text editors who basically do this for you:
NEVER open a brace, like {, then start coding.
ALWAYS insert BOTH braces, like {}, THEN go a step back and THEN start coding.
(I am NOT "forgetting" to mention the indentation here, I am ignoring it. But I DID write () first, then went a step back and started typing this to make sure this had a closing brace.)
Excellent video Kyle!
thanks
Notification Squad 🙈. Thanks for all your videos. They are really helpful.
You're welcome! I'm glad you enjoy them enough to be in the notification squad.
An excellent introduction to debugging in JavaScript. Thanks, Kyle
{2021-08-04} {2023-06-28}
Very helpful video, Thank you so much. Keep Uploading amazing video 👍
Thank you so much. I am a person who needs to see it rather than read it in an old book. I am learning this in school. Do you have one for PHP?
Thanks!
So good, I really like it when you take it slow
I'm glad you enjoyed it!
That’s what she said!
Do more on javascript man! Keep up the good work!
Before this i was like "omg i know nothing in debugging nobody will hire me" and after you're video, seeing you debugging like me, i feel sooo much more confident! Thank you Kyle!
Love your videos! Especially that you usually start with an empty folder and build from there. How come you do not usually use strict equality when comparing?
I generally use strict equality for everything except for comparing null since I want to catch both null and undefined. I have an entire video explaining the difference between the two forms of equality and when I use one over the other if you are interested.
@@WebDevSimplified Makes sense, thanks for the answer!
best way is chrome devtools ? what about vs code or someting
Thanks. 1) [9:30] so you clicked on line 5 to add a break point. So does the code run up til or including line 5? 2) Are there times one wouldn't use console to tweak and test code when implementing breakpoints?
For javascript should i use document.write or console.log? Any difference ?
Does your react course cover debugging react ?
I again learned so much
your channel need more subscriber
Hello from New York! What is the best procedure to step through JavaScript code in order to understand program's control flow and inspect variable data in real time? Thanks for informative video.
Thank you so much.
Mini project with localstorage plz bro . Btw your videos are so motivating
I have one coming up next week on this exact topic.
The 'run code step by step debuggers with full view of variables in memory in scope' are by far the strongest debugging tool. console.log, var_dump, print should be forbidden :) It is so slow in comparison
Can you mention 3 debugging tools like this for python and JS and go into pros and cons of each? Ty
Brother, can you please make a video on debugging Node?
thanks
1:21 you are wrong here, it didn't say there is a missing "{", instead, it said the "{" was unexpected here (it expected a ",")
How do I get my visual code javascript file to output it on chrome, like the way you have it? I'm outputting everything using node js.
This is exactly how I program. Write about 20 lines of code. Remove 10 bugs.
Best way is to not rely on the debugger at all. Trying to make code work in the first run, and even if there's an error trying to figure it out without using the debugger first. Best way to train fast coding.
Only 10 bugs for 20 lines. I need to get this good :P My code is more like 20 bugs for 10 lines. Lol
I actually think it is really important to learn to use the debugging tools since it is impossible to always get the code to work the first time and being able to quickly debug a problem is one of the most important skills a developer can have.
@@WebDevSimplified My debugging logic is much better than my memory. I actually remember proper code based on the debug. This is how my brain works. Others may differ. I'm not coding everyday though.
@@WebDevSimplified Not contesting that it's impossible to code without a dubugger. However many devs spend much more time debugging than they spend time coding. In these cases there's potential for a significant speed gain if you actively try to make your code work immeadiately and not simply rely on the debugger as your second brain.
You are the best!
Thank you!
This is great. Is there a reason to put the negative if condition first? I see that done a lot and I always wonder if there is a good reason or it's just preference?
For ex is there a reason you went: if(user.age != null) {...}
Instead of: if(user.age) {...}
I like to be explicit when checking for null. Your if statement would return false if user.age was 0 for example even though 0 could be a valid age for a newborn baby.
@@WebDevSimplified Great. Thank you so much.
Hi Kyle!
What debugger would you use for reactjs (or anything compiled by babel) and nodejs codebase?
documentation
Overall extremely useful video!
The reason I disagree with you is because this video is aimed at beginners, who will not be able to deduce the error from the messages as you just did. A useful error message, from the viewpoint of a beginner would be 'did you miss a colon?' or something along those lines, like python does for example.
@@OnlyAngelsMayFly There are ways to make the message more accessible, yes; but them being how they currently are does not mean they are not useful.
Every debugging video is the same. Small blocks of code, nobody is doing it with a complex project with different libraries, where your code jumps from one file to another. But good work and thanks for sharing.
have a good day kyle...
You too.
Do you have a full tutorial on Udemy?
I do not but I have a React course on my own site and an in progress CSS course. courses.webdevsimplified.com
how to set up a debugger associated with google chrome console?
You can just type the word debugger in your code on a line anywhere and it will stop your code at that line in the chrome dev tools.
You speak so fast. But after a few tries it helps...I am a BRAND new web dev student @ a local tech school...And it's all online. And so far, debugging is Killing me..i see this was a year ago and I hope that your other videos you speak just a little slower to really emphasize what you are showing. Tell Show DO..it helps. thanks
On the youtube player go to: *Settings* > Playback speed > *0.75*
Speech sounds a tad slurred but it gives you a split second longer to follow.
How to debug this in the video below
ua-cam.com/users/shorts1ScM80GlPss?feature=share
Bro plz make a tutorial on how to create freindship quiz website to calculate friendship% (like buddy meter website) plzzzz make this tutorial plzzzzzz
This is a very specific concept which I generally do not like to do on my channel. I do have a video on how to create a quiz and from there you can expand that to make it a buddy quiz.
Where is the second like button?
king
Que onda Kyle 👍
ua-cam.com/video/HnXmI2UVZlU/v-deo.html here is another good tip that really helped me out. For those of us who are used to break points and stepping thru code in Visual Studio. Thanks for all the help!!
I thought there was a way to set a breakpoint in visual code.
There is but you need to setup vscode with Google chrome to have them work properly. This isn't too hard to do though. That is what the debugger tab is for in vscode.
im stuck using w3shools dit com mail template trying to make it dynamic would you make a proceedual php vid tut on this subject please would help me out a lot i can get it half way there with while loop I really think i should be using for loops and also stuck with there js as need to also make that dynamic. I would apreciate any help from anyone on this as i hate being defeated with code issues lol its here the page i on about w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_mail&stacked=h
When I say dynamic i mean using a mysql database using mysqli (old school proceedual not object oriantated or anything fancy).
The problem I have is showing more than 1 email on the left nav pane 1 works im not sure if it is due to while instead of a for loop or the javascript as they set it up only for 3 examples with div id's and they dont show how to make this a real thing you see.
This seems to be a really particular problem and use case, so I do not think it would make a very good video since it would be too specific to be useful outside this context.
Hope you can speak slower,cause English is not my mother language.BTW thanks for your video
Ya, even I can't catch him at 1.25x
You can try watching the video at a slower speed such as .75 or .5 if I am speaking too fast. I try to speak at a rate that is comfortable for most people, but if it is too slow or too fast I always recommend changing the playback speed.
yes I think adjusting playback speed to suit your needs is the best strategy. I personally like faster speed, and WDS is one of the few channels I watch without doing 1.5X, I only occasionally do 1.25X only when am familiar with the topic. I found I am forced to focus when teacher is a bit fast, heehee.
This is not the best, and not tip(S). This is very basic
Great video, but you're method for debugging is flawed. Debugging is much like trouble shooting for those that are familiar with the term. To properly debug you must use the half-way method, this means that you're finding the error in log n time. If you're using a debugging tool you want to set the break-point at the halfway mark. This will narrow down where the error occurs. If you're using just print statements make sure you have one half-way to ensure that its good/bad at that point. In simple code you can just test if the error occurred here then there, but if the input to output process is complex that not ideal.
I’m not sure why there is a little picture of you talking. It’s a little distracting.