How to Use the Console in Chrome DevTools

Short answer

The Console is a multipurpose tool for logging messages, running JavaScript, and viewing errors. It appears in its own tab or as a drawer in other panels.

Steps

1. Open DevTools with F12 or Ctrl+Shift+I, then click the Console tab.
2. View log messages from console.log, warn, and error calls.
3. Type JavaScript expressions at the bottom prompt and press Enter to execute.
4. Use $0 to reference the currently selected DOM element.
5. Filter messages by level or text using the filter options.

Tips

• Use console.table() to display arrays and objects in a readable table.
• Interpolate values with console.log("Value: %s", val).
• Preserve logs across page reloads by enabling the setting in Console settings.

Common issues

• Cleared logs cannot be recovered; preserve them if needed.
• Some console errors originate from third-party scripts and are not actionable.