Even for professionals, coding isn’t easy. That’s probably why developers spend a large amount of their time hunting down bugs in their code. Sometimes a bug is obvious, causing the entire program to break all at once. Other times a bug is very subtle, producing correct-looking output which nevertheless contains flaws.
As counterintuitive as it may seem, obvious bugs are better because they’re easier to find. A sneaky bug can lurk for years in software used everyday.
Think of it this way: if you were in a building that was slowly filling with poisonous gas, would you want the gas to be odorless, tasteless, and colorless, or bright purple and smelling like gunpowder?
Using the Source Panel
This is a fantastic way to read the code of websites you enjoy, and to learn to debug them.
As of 2019 and the most recent version of Chrome, accessing the developer tools is as simple as going to View -> Developer -> Developer Tools in the browser menu at the top of your screen. This opens up the Chrome developer panel with its many useful tabs.
The ‘Sources’ tab shows you the actual content of the page’s source files and gives you a way to set breakpoints and inspect the call stack.
Breakpoints and debugger;
Along with print statements, breakpoints are one of the basic techniques developers use for debugging.
Setting a breakpoint in the Chrome console is easy: just click on the line number you’re interested in. A breakpoint is a place where code automatically pauses in its execution. This allows you to inspect everything that’s happened up to this point, including things like the current value of every variable and all the transformations that have taken place.
Breakpoints are a great way to check the progress of your code to see if anything has gone wrong.
We can manually achieve the same effect by placing debugger; into our code wherever we want to begin the debugging process.
By setting multiple breakpoints we can get a close-up view of everything our code is doing, which makes it much easier to spot errors.
While this certainly isn’t everything you need to master the art of debugging, it’s quite a head start. Most of successfully fixing code comes down to very patiently and very clearly thinking through what you wanted your code to do and comparing that to what you actually told your code to do.