How to debug JavaScript code like a pro

Debugging is an essential skill for any JavaScript developer. Here are some tips for debugging JavaScript code like a pro, along with examples:

1- Use console.log() to print variables and messages: One of the simplest and most effective ways to debug JavaScript code is to use the console.log() function to print the values of variables and messages to the console. For example:

javascript
let x = 5;
console.log(x); // prints 5

2- Use breakpoints to pause code execution: You can set breakpoints in your JavaScript code using the debugger statement or by using your browser's developer tools. This allows you to pause the code execution and inspect the values of variables and step through your code line by line. For example:

javascript
let x = 5;
debugger;
console.log(x); // code execution will pause here and you can inspect the value of x

3- Use the debugger keyword: Similar to setting breakpoints, you can use the debugger keyword to pause the code execution and open the developer tools. For example:

javascript
let x = 5;
debugger;
console.log(x); // code execution will pause here and you can inspect the value of x

4- Use try...catch statements to handle errors: When your code throws an error, you can use try...catch statements to handle the error and provide a more helpful error message. For example:

javascript
try {
  let x = null;
  console.log(x.toUpperCase()); // throws a TypeError
} catch (error) {
  console.error('An error occurred:', error);
}

5- Use the console.trace() function to trace function calls: If you need to understand the call stack and trace how your code got to a certain point, you can use the console.trace() function to log a stack trace. For example:

javascript
function a() {
  b();
}

function b() {
  c();
}

function c() {
  console.trace();
}

a(); // logs the stack trace, showing the path of function calls

By using these debugging techniques and tools, you can more easily identify and fix bugs in your JavaScript code like a pro.

View this post on Instagram

A post shared by Humza (@humza.co)