Tap to unmute

Best Debugging Tips For Beginners

  Рет қаралды 128,819

Web Dev Simplified

Web Dev Simplified

Күн бұрын

Пікірлер: 97
@alanmartin6603
@alanmartin6603 5 жыл бұрын
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.
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@TheZamirOrion
@TheZamirOrion 10 ай бұрын
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.
@JustClickApprove92
@JustClickApprove92 3 жыл бұрын
Ive been coding since my early teens and I’m still terrible at debugging, thanks for the video ❤️
@rangabharath4253
@rangabharath4253 5 жыл бұрын
Thank you so much. Keep making these type of videos for debugging.
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
You're welcome! I'm really glad you enjoyed it.
@zerocode1504
@zerocode1504 2 жыл бұрын
Great Video. Also guys remember that debugging becomes extremely easy if your project uses typescript
@rogerwilco6725
@rogerwilco6725 4 жыл бұрын
Kyle's hair is always spectacular.
@bluestripes6037
@bluestripes6037 4 жыл бұрын
Right? I love it
@hardwired66
@hardwired66 3 жыл бұрын
haha
@dras227
@dras227 3 жыл бұрын
Border radius : 10px
@pranavjain9799
@pranavjain9799 2 жыл бұрын
This is an awesome video. I was not aware of breakpoints in the browser.
@geeno123
@geeno123 4 жыл бұрын
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!
@DavidOkwii
@DavidOkwii Жыл бұрын
Excellent debugging techniques here. Thanks
@kaynesheenan
@kaynesheenan 11 ай бұрын
Excellent video Kyle! thanks
@The-Average-Gamer
@The-Average-Gamer 5 жыл бұрын
Great topic. Would love to see advanced debugging in chrome next 👍
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
That is a good idea.
@mohammadkhakhsoor2068
@mohammadkhakhsoor2068 Жыл бұрын
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❤
@ManishKarki
@ManishKarki 5 жыл бұрын
Notification Squad 🙈. Thanks for all your videos. They are really helpful.
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
You're welcome! I'm glad you enjoy them enough to be in the notification squad.
@codinghusky5196
@codinghusky5196 2 жыл бұрын
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.)
@Holy_Frijole
@Holy_Frijole 4 жыл бұрын
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?
@saideepesh6036
@saideepesh6036 5 жыл бұрын
Sir try to do videos on algorithms and data structures in javascript whenever you find sufficient time to do for.
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
I plan to make some more algorithm videos but have been having a lot of fun doing small project based videos recently.
@charlesxavier77
@charlesxavier77 5 жыл бұрын
So good, I really like it when you take it slow
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
I'm glad you enjoyed it!
@ToddSaltzman
@ToddSaltzman 5 жыл бұрын
That’s what she said!
@eboubaker3722
@eboubaker3722 5 жыл бұрын
1:21 you are wrong here, it didn't say there is a missing "{", instead, it said the "{" was unexpected here (it expected a ",")
@cheshy2289
@cheshy2289 3 жыл бұрын
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!
@brina_larson
@brina_larson 3 жыл бұрын
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?
@Aditya.Santra
@Aditya.Santra 4 жыл бұрын
Very helpful video, Thank you so much. Keep Uploading amazing video 👍
@shinichi9do
@shinichi9do 5 жыл бұрын
your channel need more subscriber
@mattmarkus4868
@mattmarkus4868 4 жыл бұрын
Does your react course cover debugging react ?
@marcwinner567
@marcwinner567 5 жыл бұрын
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?
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@marcwinner567
@marcwinner567 5 жыл бұрын
@@WebDevSimplified Makes sense, thanks for the answer!
@WolverineMKD
@WolverineMKD 4 жыл бұрын
Do more on javascript man! Keep up the good work!
@Coding_Asmr_PraDev
@Coding_Asmr_PraDev 5 жыл бұрын
Mini project with localstorage plz bro . Btw your videos are so motivating
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
I have one coming up next week on this exact topic.
@vplayzgaming9602
@vplayzgaming9602 3 жыл бұрын
For javascript should i use document.write or console.log? Any difference ?
@cengiz-ilhan
@cengiz-ilhan 2 жыл бұрын
best way is chrome devtools ? what about vs code or someting
@Pareshbpatel
@Pareshbpatel 3 жыл бұрын
An excellent introduction to debugging in JavaScript. Thanks, Kyle {2021-08-04} {2023-06-28}
@MrNate858
@MrNate858 3 жыл бұрын
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.
@PuchoWebSolutions
@PuchoWebSolutions 3 жыл бұрын
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.
@RogerThat902
@RogerThat902 5 жыл бұрын
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) {...}
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@RogerThat902
@RogerThat902 5 жыл бұрын
@@WebDevSimplified Great. Thank you so much.
@Antipyj
@Antipyj 5 жыл бұрын
I again learned so much
@vibonacci
@vibonacci 5 жыл бұрын
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
@emonymph6911
@emonymph6911 3 жыл бұрын
Can you mention 3 debugging tools like this for python and JS and go into pros and cons of each? Ty
@ajaytidke8545
@ajaytidke8545 3 жыл бұрын
Brother, can you please make a video on debugging Node? thanks
@user-hj6su2pg9b
@user-hj6su2pg9b 5 жыл бұрын
Thank you so much.
@threeone6012
@threeone6012 5 жыл бұрын
You are the best!
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
Thank you!
@sunnz
@sunnz 4 жыл бұрын
Hi Kyle! What debugger would you use for reactjs (or anything compiled by babel) and nodejs codebase?
@swattertroops-yaaa
@swattertroops-yaaa 2 жыл бұрын
documentation
@ahnmichael1484
@ahnmichael1484 2 жыл бұрын
Overall extremely useful video!
@OnlyAngelsMayFly
@OnlyAngelsMayFly 2 жыл бұрын
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.
@ahnmichael1484
@ahnmichael1484 2 жыл бұрын
@@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.
@xipepe
@xipepe 2 жыл бұрын
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.
@willysnowman
@willysnowman 5 жыл бұрын
This is exactly how I program. Write about 20 lines of code. Remove 10 bugs.
@blubblubber9460
@blubblubber9460 5 жыл бұрын
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.
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
Only 10 bugs for 20 lines. I need to get this good :P My code is more like 20 bugs for 10 lines. Lol
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@willysnowman
@willysnowman 5 жыл бұрын
@@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.
@blubblubber9460
@blubblubber9460 5 жыл бұрын
@@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.
@hadifox
@hadifox 5 жыл бұрын
have a good day kyle...
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
You too.
@philrolly4465
@philrolly4465 5 жыл бұрын
Do you have a full tutorial on Udemy?
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
I do not but I have a React course on my own site and an in progress CSS course. courses.webdevsimplified.com
@khang541997
@khang541997 5 жыл бұрын
how to set up a debugger associated with google chrome console?
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@CD-iq8jk
@CD-iq8jk 4 жыл бұрын
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
@hightowergaming5301
@hightowergaming5301 4 жыл бұрын
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.
@nicholasmarino670
@nicholasmarino670 5 жыл бұрын
king
@stanislava8650
@stanislava8650 4 жыл бұрын
Where is the second like button?
@cas1889ify
@cas1889ify 5 жыл бұрын
Que onda Kyle 👍
@JNET_Reloaded
@JNET_Reloaded 5 жыл бұрын
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.
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@allinone-bb7rq
@allinone-bb7rq 5 жыл бұрын
Bro plz make a tutorial on how to create freindship quiz website to calculate friendship% (like buddy meter website) plzzzz make this tutorial plzzzzzz
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@blackbox8477
@blackbox8477 2 жыл бұрын
How to debug this in the video below kzbin.info1ScM80GlPss?feature=share
@willysnowman
@willysnowman 5 жыл бұрын
kzbin.info/www/bejne/fp-7nnxoiruNorc 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!!
@femaledeer
@femaledeer 5 жыл бұрын
I thought there was a way to set a breakpoint in visual code.
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@thoinguyen750
@thoinguyen750 5 жыл бұрын
Hope you can speak slower,cause English is not my mother language.BTW thanks for your video
@saideepesh6036
@saideepesh6036 5 жыл бұрын
Ya, even I can't catch him at 1.25x
@WebDevSimplified
@WebDevSimplified 5 жыл бұрын
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.
@ciphertester1147
@ciphertester1147 5 жыл бұрын
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.
@Xzouxze
@Xzouxze 3 жыл бұрын
@ToddSaltzman
@ToddSaltzman 5 жыл бұрын
I’m not sure why there is a little picture of you talking. It’s a little distracting.
@KaraokeMusicBox
@KaraokeMusicBox 3 жыл бұрын
This is not the best, and not tip(S). This is very basic
@alexeiw108
@alexeiw108 2 жыл бұрын
Thanks!
The Most Important Skill You Never Learned
34:56
Web Dev Simplified
Рет қаралды 227 М.
Tips and Tricks for Debugging JavaScript
13:03
James Q Quick
Рет қаралды 417 М.
How to treat Acne💉
00:31
ISSEI / いっせい
Рет қаралды 108 МЛН
Арыстанның айқасы, Тәуіржанның шайқасы!
25:51
QosLike / ҚосЛайк / Косылайық
Рет қаралды 700 М.
Quando A Diferença De Altura É Muito Grande 😲😂
00:12
Mari Maria
Рет қаралды 45 МЛН
Chrome Dev Tools Debugging CSS
16:18
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 11 М.
Debugging Like A Pro
5:48
ByteByteGo
Рет қаралды 122 М.
Be a Better Programmer By Mastering Debugging
12:34
Andy Sterkowitz
Рет қаралды 28 М.
Learn JSON in 10 Minutes
12:00
Web Dev Simplified
Рет қаралды 3,3 МЛН
JavaScript Pro Tips - Code This, NOT That
12:37
Fireship
Рет қаралды 2,5 МЛН
178. What Are The Steps To Quickly Debugging An Application?
17:17
How to Debug Errors in Javascript and React JS 😲🔥
16:12
RoadsideCoder
Рет қаралды 15 М.
How to Debug Code Like a Pro
11:11
Lama Dev
Рет қаралды 67 М.
Are you debugging JavaScript in VSCode? | YOU SHOULD!
7:06
Alex Ziskind
Рет қаралды 173 М.
How to treat Acne💉
00:31
ISSEI / いっせい
Рет қаралды 108 МЛН