What is the dev tools console? Definition for debugging

The dev tools console is the browser panel that prints JavaScript errors, log messages, and the output of commands typed directly into the page: the first place to look when a UI bug does not have an obvious cause.

When something visibly breaks but the page does not show an error, the console usually tells the story. A failed API call, a JavaScript exception, a missing asset, a CORS rejection: most of the silent failures that produce broken-looking UIs are loud in the console.

What to include in a bug report

A screenshot of the console with the relevant error visible. A copy of the error message text (exception class, message, and the file/line if available). A note about whether the error appeared on page load or after a specific action.

For a coding agent, this material is high-value context. The error text often names the file and line where the failure occurred, which lets the agent jump straight to the relevant code instead of searching for it. A bug report that includes the console state alongside the screenshot of the visible defect is one of the cheapest accelerators for an agent-driven fix.

Frequently asked questions

How do I open the console?

Cmd+Option+J on macOS Chrome, Ctrl+Shift+J on Windows Chrome, Cmd+Option+I to open dev tools and then click the Console tab. Firefox and Safari use the same shortcuts.

What should I capture from the console for a bug report?

Anything in red. Errors are the most useful; warnings sometimes matter. A screenshot of the console with the relevant error visible is faster than copying the text.