How to use the console, debugger, and other tools to debug javascript code

Debugging JavaScript code is essential for identifying and fixing errors. Whether you’re a seasoned
developer or just starting out, you’ll likely encounter bugs in your code. Debugging helps you
locate and resolve these issues.

What Is Debugging?

Debugging involves searching for and fixing errors in your code. Even if your JavaScript code is syntactically correct, logical errors can still occur, especially in complex applications. Unfortunately, these errors often don’t provide clear error messages or clues about their location.

You need to force your code to stop running at specific points to debug effectively. You can achieve this by setting breakpoints. Once the code is paused, you can inspect variables, check function calls, and identify what’s wrong.

There are different tools and methods for debugging JavaScript code, depending on your browser and preference. One of the most common and powerful tools is the browser’s dev tools, which provide a graphical interface for inspecting and manipulating your code, as well as the web page’s elements, network, performance, and more.

To use the browser’s dev tools to debug JavaScript code, you need to do the following steps:

• Open the dev tools in your browser. You can do this by pressing F12, or right-clicking on the web page and selecting “Inspect” or “Inspect Element”. Alternatively, you can use the browser’s menu and navigate to the devtools option. For example, in Chrome, you can go to More Tools> Developer tools.
• Go to the Sources panel in the devtools. This is where you can see the files that the web page requests, including the JavaScript files. You can also edit and save the files here, as well
  as run snippets of code in the console.
• Set a breakpoint in your code. A breakpoint is a point where the code execution will pause, and you can inspect the values of the variables, the call stack, the scope, and the watch expressions. You can set a breakpoint by clicking on the line number in the code editor, or by using the debugger keyword in your code. You can also set conditional breakpoints, which only pause the code if a certain condition is met.
• Run your code. You can reload the web page, or trigger the code execution by interacting with the web page, such as clicking a button or filling a form. The code will pause at the breakpoint, and you can see the current state of your code in the JavaScript Debugging pane.
• Step through the code. You can use the buttons in the JavaScript Debugging pane to control the code execution. You can step over, step into, step out, or resume the code execution. You can also jump to a specific line of code by using the Run to cursor option.
• Modify the code. You can edit the code in the code editor, and save the changes by pressing Ctrl+S or Cmd+S. You can also evaluate expressions or run commands in the console, which is located at the bottom of the dev tools. The console also shows any errors or messages that your code generates.

Example:

1. Utilizing the Console
   The console is perhaps the most basic yet powerful tool for debugging JavaScript. Here are some essential techniques:
   ● console.log(): The simplest debugging method. Use console.log() to print out values, variables, and messages to the console to understand the flow of your code.Other console examples include: console.table() and console.error()


console.log("Hello, world!");


2. Leveraging the Debugger
   The debugger statement is another invaluable tool for debugging JavaScript. Placing a debugger
   in your code pauses execution and opens the browser’s debugger tool, allowing you to inspect
   variables, step through code, and analyze the program’s state.


function foo() {
let x = 10;
debugger;
console.log(x); // Execution will pause here
}
foo();


3. Monitoring Network Requests and Console Errors
   Debugging isn’t just about code logic; it also involves diagnosing issues related to network
   requests, console errors, and performance bottlenecks. Use the network tab in developer tools to
   monitor HTTP requests and responses, and pay attention to any error messages logged in the
   console.
   Remember that debugging is an essential skill for any developer, so embrace it as part of your
   coding journey! 🚀. I hope this helps you learn how to debug JavaScript code with your browser’s
   devtools. If you have any more questions, feel free to ask me.

Happy coding! 🚀

Reference & Source:

JavaScript Debugging – W3Schools. https://www.w3schools.com/js/js_debugging.asp.
How to Debug JavaScript with your Browser’s Devtools – freeCodeCamp.org
https://www.freecodecamp.org/news/how-to-debug-javascript-with-your-browsers-devtools/