The Console tab
The Console tab contains the errors and messages produced by the page. When a control does not respond and no error is shown on screen, the error is usually recorded here.
What appears here
Red lines are errors: execution stopped. Yellow lines are warnings, which on their own rarely break functionality. The remaining entries are messages the page logs through console.log. Failed requests are also reported here, which points to the Network tab for details.
Reading an error
On the left are the error type and message, for example TypeError: Cannot read properties of undefined; on the right, the file and line number. The link opens the corresponding line. Expanding the entry shows the call stack — the sequence of calls that led to the error, most recent first. The message and the first line of the stack are the parts to include in a defect report.
Filters and Preserve log
The level selector limits output to Errors; the adjacent field filters by substring. Preserve log is required when the defect involves a redirect or a form submission, otherwise the error is cleared together with the previous page.
Not every error belongs to the page
Browser extensions, analytics scripts and ad blockers write their own errors into the same console. Before reporting, the case has to be reproduced in a private window with extensions disabled. An empty console is also a result: the page did not fail, so incorrect values on screen point to the data rather than the code, which returns the investigation to the Network tab.
At the interview
These check whether an error can be read, and whether a defect of the page can be told apart from noise that belongs to something else. Try answering before opening the answer.
juniorentry-level knowledge
1. What do the red and yellow lines in Console mean?
Red lines are errors: execution stopped, and on the page that usually shows up as a control that does nothing. Yellow lines are warnings, which on their own rarely break anything. The rest are messages the page writes itself through console.log.
2. What do you take from an error for a defect report?
The type and text of the error, for example TypeError: Cannot read properties of undefined, the file and line number shown on the right, and the first line of the call stack, which unfolds when the entry is expanded.
3. How do you leave only errors in Console and keep them across a navigation?
The level selector limits the output to Errors and the field next to it filters by substring. To stop entries disappearing, turn on Preserve log: without it the error is cleared along with the previous page — which is exactly the case when the defect involves a form submission or a redirect.
middlea more advanced level
4. A button does not work and Console shows an error. Is the defect found?
The error is a fact for the report, not yet the cause. First make sure it belongs to this action: clear the console, repeat the action and see what gets written. Then check Network — whether a request went out and what the server returned.
5. Why does not every error in Console belong to the site?
Browser extensions, analytics scripts and ad blockers write their errors into the same console. Before a defect is reported, the case is repeated in a private window with extensions disabled.
6. Console is empty but the screen shows wrong data. What does that tell you?
That the page did not fail: the code ran through. So the problem is most likely in the data, and the investigation moves to the Network tab and the response body.
Questions on the other topics are collected on the QA interview questions on DevTools page.