Use console.log() for quick checks, preferably with labels or console.table() for objects; 2. Utilize browser DevTools to set breakpoints, step through code, and inspect variables; 3. Implement try...catch for synchronous and async/await errors, and monitor the Console tab; 4. Apply ESLint and Prettier to catch errors and maintain code consistency; 5. Insert debugger; statements to pause execution where needed; 6. Investigate network requests and DOM issues using the Network and Elements tabs—combining these methods ensures effective JavaScript debugging.

Debugging JavaScript code is a skill every developer uses daily. Here’s how you can effectively find and fix issues in your JavaScript:

1. Use console.log() for Quick Checks

The simplest and most common way to debug is using console.log(). Insert it at key points in your code to check variable values, execution flow, or whether a function is being called.

console.log("User data:", userData);
console.log("Is active?", isActive);

It's fast and works almost everywhere—browser, Node.js, etc. But don’t leave console.log() statements in production code.

Pro tip: Use labeled logs to avoid confusion:

console.log("At step 3:", step3Value);

And use console.table() for arrays or objects—it formats data nicely in tables.

2. Use Browser Developer Tools

Modern browsers (Chrome, Firefox, Edge) have powerful built-in DevTools. Here’s how to use them effectively:

• Open DevTools with F12 or Ctrl Shift I (Cmd Option I on Mac).
• Go to the Sources (or Debugger) tab.
• Find your JavaScript file and set breakpoints by clicking on line numbers.
• When the code runs, it pauses at the breakpoint.
• Use the controls to step through code:
  • Step over
  • Step into
  • Continue execution
• Inspect variables and the call stack in real time.

You can also:

• Add conditional breakpoints (only trigger when a condition is met).
• Use debugger; in your code to force a pause:

  if (error) {
    debugger; // Execution stops here if DevTools is open
  }

3. Handle Errors Gracefully

Use try...catch blocks for synchronous code to catch runtime errors:

try {
  riskyOperation();
} catch (error) {
  console.error("Something went wrong:", error.message);
}

For asynchronous code (Promises), use .catch() or try...catch with async/await:

async function fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
  } catch (error) {
    console.error("Fetch failed:", error);
  }
}

Also check the Console tab in DevTools—JavaScript errors and warnings appear there in real time.

4. Lint and Format Your Code

Use tools like ESLint to catch common mistakes early (e.g., undefined variables, syntax issues):

npx eslint your-file.js

And use Prettier to keep code formatting consistent—sometimes bugs hide in poorly structured code.

5. Use debugger; Strategically

Insert debugger; where you want execution to pause (if DevTools is open):

function processUser(user) {
  debugger;
  return user.name.toUpperCase();
}

It's like a breakpoint you can toggle quickly.

6. Check Network and DOM Issues

Sometimes the bug isn’t in JavaScript logic but in:

• Failed API calls (check Network tab).
• Elements not found (document.getElementById returns null).
• Event listeners not attached properly.

Use the Elements tab to inspect if the DOM matches expectations.

Basically, debugging is about observing what your code actually does vs. what you expect it to do. Combine console.log, DevTools, and structured error handling—and you’ll catch most bugs quickly.

The above is the detailed content of How do you debug JavaScript code?. For more information, please follow other related articles on the PHP Chinese website!