Debugging in Javascript can be made easy by using the browser’s Developer Tools. Here’s how to use it:
1. Open the Developer Tools on your browser. On Google Chrome, do so by going to Menu > More Tools > Developer Tools or by using the shortcut key (F12 or Ctrl+ Shift+ I on Windows/Linux and Cmd + Opt + I on Mac).
1. Enable the Source Tab. Find the ‘Sources’ tab to view your website’s files.
1. Open Your File. Click File > Open to open your JavaScript file.
1. Set Breakpoints. You can set breakpoints by clicking on the line number. The code will pause execution when it hits a breakpoint.
1. Start Debugging. Refresh your website. The code execution will stop at your breakpoint.
1. Analyze Variable Information. You can hover over variables to check their values, or use the ‘Scope’ section to view parameters.
1. Step Through The Code. Use the buttons on the top right, next to the play button, to step over lines, step into function calls, or step out of the function calls.
In addition, you can use console.log(), console.info(), console.error(), etc., to print information to the console at runtime for debugging purposes.
One more thing to keep in mind is the usage of the ‘debugger’ statement. You can embed this statement in your JavaScript code which will automatically create a breakpoint when the code is run.
Always remember, proper usage of console and debugger can save a lot of time in detecting and fixing issues in your program.
