What tools and techniques do you use for debugging JavaScript code?

TL;DR

Some of the most commonly used tools and techniques for debugging JavaScript:

JavaScript language
- console methods (e.g. console.log(), console.error(), console.warn(), console.table())
- debugger statement
Breakpoints (browser or IDE)
JavaScript frameworks
Browser developer tools
- Chrome DevTools: The most widely used tool for debugging JavaScript. It provides a rich set of features including the ability to set breakpoints, inspect variables, view the call stack, and more.
- Firefox Developer Tools: Similar to Chrome DevTools with its own set of features for debugging.
- Safari Web Inspector: Provides tools for debugging on Safari.
- Edge Developer Tools: Similar to Chrome DevTools, as Edge is now Chromium-based.
Network requests
- Postman: Useful for debugging API calls.
- Fiddler: Helps capture and inspect HTTP/HTTPS traffic.
- Charles Proxy: Another tool for intercepting and debugging network calls.

Here are common tools and techniques developers frequently use for debugging JavaScript code.

console.log(): The most basic way to inspect values, variables, and data structures at various points in your code.
console.error(): Outputs errors to the console, often with more detailed stack traces.
console.warn(): Displays warnings.
console.table(): Formats data (especially arrays of objects) in a readable table.
console.time() and console.timeEnd(): Measure the execution time of code blocks.

Pauses code execution at the line where debugger; is placed.
Allows you to step through code line by line, inspect variables, and understand the flow of execution.

Set breakpoints directly in the Sources panel of your browser's developer tools or IDE (e.g. VS Code) to pause execution at specific lines of code without modifying your source code.

Monitor network requests made by your JavaScript code (e.g., AJAX calls, fetching data).
Inspect request headers, responses, timing, and identify potential issues.