How to capture console logs in Chrome

The Console in Chrome DevTools collects messages from the page: console.log output from the site's code, warnings, uncaught JavaScript errors with stack traces, failed resource loads, CORS and Content Security Policy violations, and deprecation notices. When a button does nothing or a page renders blank, the answer is usually a red error here.

1. Open the Console. Press Ctrl+Shift+J on Windows and Linux or Cmd+Option+J on Mac. You can also press F12 and click the Console tab.
2. Turn on Preserve log. Click the gear icon (Console settings) in the top-right of the Console panel and check Preserve log, so messages are not cleared when the page reloads or navigates.
3. Show all levels. In the Default levels dropdown, make sure Errors, Warnings and Info are checked. Add Verbose only if asked.
4. Clear the Console. Click the clear icon or press Ctrl+L (Cmd+K on Mac) so the log only contains the problem.
5. Reproduce the bug. Repeat the exact steps that cause the problem while the Console stays open.
6. Expand the errors. Click the arrow next to each red error to reveal its stack trace, which also gets included when you save.
7. Save the log. Right-click an empty area of the Console and choose Save as.... Chrome downloads a plain-text .log file named after the site.
8. Share it with context. Attach the file to your bug report along with the URL, the time and what you clicked.

To share a single error instead of the whole log, right-click the message and choose Copy console message, then paste it into your ticket inside a code block.

• Filter first, then save. Type a word in the Console filter box or select only Errors before using Save as... to keep the file focused.
• Show timestamps. In DevTools Settings > Preferences > Console, enable Show timestamps so each message has a time you can match to server logs.
• Capture from the moment you run it. For long sessions, you can wrap the console methods and copy the results with the DevTools copy() helper:

// Paste in the Console to start collecting messages
// (only captures what is logged after you run this).
const captured = [];
['log', 'info', 'warn', 'error'].forEach((level) => {
  const original = console[level];
  console[level] = (...args) => {
    captured.push({ level, time: new Date().toISOString(), args: args.map(String) });
    original.apply(console, args);
  };
});
window.addEventListener('error', (e) =>
  captured.push({ level: 'uncaught', time: new Date().toISOString(), args: [e.message] })
);
// Later, reproduce the bug, then run:
copy(JSON.stringify(captured, null, 2));

That snippet only records messages logged after you run it and is lost on reload, so it is a debugging aid, not a replacement for Preserve log.

You do not need to be a developer to add useful context. Recognizing a few frequent errors helps you judge whether the message is related to your bug and what else to attach.

Not every red message is your bug. Errors from browser extensions (URLs starting with chrome-extension://) and third-party analytics scripts are common noise. Retest in an incognito window with extensions disabled to rule them out, and mention that you did in your report.

The Issues panel (open it from the Console toolbar or the Command Menu) groups related problems such as cookie, mixed content and accessibility warnings. If a developer asks for "issues" rather than console errors, that is where to look.

• Screenshots of the Console. Developers cannot search or copy text from an image, and stack traces are usually cut off. Save or copy the text instead.
• Opening the Console too late. Messages logged before DevTools was open may be missing. Open it, then reload and reproduce.
• Missing Preserve log. A redirect after a failed login clears the Console and the evidence with it.
• Collapsed errors. Expand stack traces before copying so file names and line numbers come along.
• Leaking data. Some apps log user details or tokens. Skim the file and remove anything sensitive before attaching it.
• No network context. A console error such as "Failed to fetch" makes more sense next to the failing request. Pair it with a HAR file.

Asking every tester or client to open DevTools, set Preserve log and save a file rarely works. Bugmark is a free Chrome extension that keeps console context automatically, so it is attached to the bug report the moment anyone captures a screenshot or recording.

• Captures the last 150 console messages, plus JavaScript errors and unhandled promise rejections.
• No need to open DevTools before the bug happens.
• The same capture includes the network log, recorded steps to reproduce and environment details.
• Export as Markdown, CSV, a self-contained HTML report or PDF, or create a GitHub issue with the console errors included.

Logs stay in your browser until you choose to export them. See how to write a bug report for what else to include. Add Bugmark to Chrome — free