This is an excellent question and I am so happy you asked it 😄
However, you are already very close to figuring out how to start. Right now, you inspect elements with your browser.
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:
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.
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.
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.
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?
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.
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.
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.
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 am so happy you found this helpful!
Thank you! You re a great teacher!
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.