JavaScript and Debugging

Hey there new debuggers, here in this blog I will go through some debugging steps that has helped me become a better developer! Sometimes coding can get quite difficult. Bugs are very common within your code and using a debugger could make a huge difference! You may used a thing called console.log() which is not the same as debugger, and is not as effective.

When to use Debugger

Usually whenever you feel like it! In most cases you’ll use it when there is a bug. Bugs can range from a syntax error to a logical error, and to access the debugger simply type ‘debugger;’ in your code. Now just placing it anywhere won’t get you the most out of it, you’d want to place it near where you think the bug is coming from. Next we can move on and access the debugger in the next step.

Accessing debugger

In order to access debugger you'll want to open your console. On a mac use the keyboard and press ‘command + option + J’ and on windows ‘shift + cntrl + J’. The console will be opened and you want to make sure your code is saved with the debugger in it. Then you can refresh the page with the console, the code will run and it will be paused once it reaches the debugger.

Using debugger

Now, we are at the point of debugging. Here we can see what’s really going on, take a second and just observe what’s going on in the code. Depending on what you are looking for you are able to step into a function and watch line by line execution. This is most helpful when you believe the function is not working as expected. There is also a step over and resume function, this is used best when you don’t want to see a certain function ran line by line. Debugger is very helpful and another tool that can help is break points! Break points are a great way to set the debugger to run specific code, you simple go to the right hand side of the code in your console and click to add a breakpoint. Here is more on break points by Chrome Dev Tools https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints.

In conclusion, the debugger can make a developers life way easier. Even though the debugger is also tricky to use and understand. It will come easier with practice and using it more often, but it will certainly step your game up!