I teach college web development classes in Denmark and I have been messing around on the Internet since the WWW became a thing.
I love simple solutions and humour!
This is an excellent question and I am so happy you asked it 😄
HTML and CSS, even though they are programming languages, behave very differently from i.e. JavaScript. This means that you can't debug JavaScript the same way you would those other two.
However, you are already very close to figuring out how to start. Right now, you inspect elements with your browser.
In your inspect view, at the top, there's a "Console" tab. This is where error messages from your JavaScript will appear. But in order to debug JavaScript, you need to learn about the different error types that you will inevitably meet. Three of the most common ones are:
TypeError (maybe you used a string instead of a number?)
ReferenceError (does the variable/function/API you are trying to use exist?)
SyntaxError (did you forget a } or ) somewhere?)
Error messages will tell you in what files and on what line-number your error occurred, but it takes some training to learn to understand how that works. I wrote a 5 (plus 1) step list of debugging a while ago:
Debugging 101
When you program something you will more often than not encounter bugs or errors.
This is a step-by-step guide on how to deal with the process of debugging.
Step 01 Read The Error Message
Almost all errors and bugs will show you an error message in the console. Read this message carefully and make sure you understand what it says.
Error messages will tell you what went wrong, in which file, and on what line.
3 Common Error Types
TypeError: The TypeError object represents an error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected type.
ReferenceError: The ReferenceError object represents an error when a non-existent variable is referenced.
SyntaxError: The SyntaxError object represents an error when trying to interpret syntactically invalid code.
Step 02 Look At Your Code
Spend some time inspecting your code. Look at it with the knowledge that something in that file, on a specific line went wrong. Here are some questions to help you
Why did something go wrong (error-types)?
Did I spell everything correctly (typos as well as spelling errors)?
Did the error happen because something else went wrong a few steps up in the code?
Step 03 Use Debugging Tools
Learn how to use a debugging tool. Most IDEs and browsers have really great debugging tools. These tools allow you to pause and play your code. As you go through the code you can inspect all your variables at breakpoints you define.
You can also resort to console.log() or printf if you are unable to use other tools.
Step 04 Explain Your Error
Often, explaining your error can lead to insights that will solve your problem. Practice explaining your error to other people. Rubber Duck Debugging is a great method to practice this.
Describe your problem on StackOverflow or to your colleagues/classmates.
Step 05 Take A Break
There is science backing this step.
Take some time away from your computer. Do something completely different. Go for a walk, clear your head, listen to a podcast, play a game of ping pong – whatever you do, it must take your mind off the problem.
Step 06 Last Resort
When you have gone through all the steps above and you are still stuck, ask your teacher or mentor to help you.
That's me after the MERN stack Bootcamp after 3 months, through many problems && bugs, your advice helps me much. I wanna come back and say thanks to your contributes to this community for many newbies like me. Thank you!
I teach college web development classes in Denmark and I have been messing around on the Internet since the WWW became a thing.
I love simple solutions and humour!
Hi @dechariot 👋
This is an excellent question and I am so happy you asked it 😄
HTML and CSS, even though they are programming languages, behave very differently from i.e. JavaScript. This means that you can't debug JavaScript the same way you would those other two.
However, you are already very close to figuring out how to start. Right now, you inspect elements with your browser.
In your inspect view, at the top, there's a "Console" tab. This is where error messages from your JavaScript will appear. But in order to debug JavaScript, you need to learn about the different error types that you will inevitably meet. Three of the most common ones are:
Error messages will tell you in what files and on what line-number your error occurred, but it takes some training to learn to understand how that works. I wrote a 5 (plus 1) step list of debugging a while ago:
Debugging 101
When you program something you will more often than not encounter bugs or errors.
This is a step-by-step guide on how to deal with the process of debugging.
Step 01 Read The Error Message
Almost all errors and bugs will show you an error message in the console. Read this message carefully and make sure you understand what it says.
Error messages will tell you what went wrong, in which file, and on what line.
3 Common Error Types
TypeError: The TypeError object represents an error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected type.
ReferenceError: The ReferenceError object represents an error when a non-existent variable is referenced.
SyntaxError: The SyntaxError object represents an error when trying to interpret syntactically invalid code.
Step 02 Look At Your Code
Spend some time inspecting your code. Look at it with the knowledge that something in that file, on a specific line went wrong. Here are some questions to help you
Why did something go wrong (error-types)?
Did I spell everything correctly (typos as well as spelling errors)?
Did the error happen because something else went wrong a few steps up in the code?
Step 03 Use Debugging Tools
Learn how to use a debugging tool. Most IDEs and browsers have really great debugging tools. These tools allow you to pause and play your code. As you go through the code you can inspect all your variables at breakpoints you define.
You can also resort to console.log() or printf if you are unable to use other tools.
Step 04 Explain Your Error
Often, explaining your error can lead to insights that will solve your problem. Practice explaining your error to other people. Rubber Duck Debugging is a great method to practice this.
Describe your problem on StackOverflow or to your colleagues/classmates.
Step 05 Take A Break
There is science backing this step.
Take some time away from your computer. Do something completely different. Go for a walk, clear your head, listen to a podcast, play a game of ping pong – whatever you do, it must take your mind off the problem.
Step 06 Last Resort
When you have gone through all the steps above and you are still stuck, ask your teacher or mentor to help you.
That's me after the MERN stack Bootcamp after 3 months, through many problems && bugs, your advice helps me much. I wanna come back and say thanks to your contributes to this community for many newbies like me. Thank you!
Hi @dechariot
I am so happy you found this helpful!
Thank you! You re a great teacher!