Guide
How to capture console logs for a bug report
Capture useful browser console evidence, reproduce the problem, and review private data before sharing your bug report.
Open the page's Console before you reproduce the bug. Preserve messages across reloads, trigger the failure once, then copy the relevant error and stack with the steps and browser details. Review the text before sharing it.
Capture the failure in Chrome
- Open the affected page in desktop Chrome. Press Ctrl+Shift+J (Windows/Linux) or Command+Option+J (Mac) to open the Console panel.
- Open Console Settings (the gear in the Console panel) and check Preserve log if the bug reloads or navigates. Clear old messages first when safe so the new attempt has a clear start.
- Reproduce the bug once. Check the Errors and Warnings levels, then expand the relevant message to reveal its stack. Include the first useful application frame and its file/line when available.
- For a small excerpt, select and copy the relevant text. For a whole-session record, right-click in the Console and choose Copy console or Save as… (.log). Inspect the copied or saved text before attaching it.
Chrome documents the controls in its Console features reference.
Capture the failure in Firefox
- Open the affected page in desktop Firefox. Press Ctrl+Shift+K (Windows/Linux) or Command+Option+K (Mac) to open the page's Web Console.
- Open the Console's gear menu and enable Persist Logs when the bug reloads or navigates. Clear old messages before the attempt if they are unrelated.
- Reproduce the bug once. Use the Errors and Warnings category filters and expand the relevant message or trace. Record its source file/line when Firefox shows one.
- Right-click a message and choose Copy Message for a small excerpt. To export what is displayed, choose Export Visible Messages To → Clipboard or File. Review the exported content before attaching it.
Firefox documents opening the Web Console, the Persist Logs setting, and copy and export commands.
Send the smallest useful excerpt
Write the action just before the failure, the expected result, the actual result, the browser and version, and whether reload or navigation matters. Include the first relevant error message, its time, and an application stack frame with file and line if shown. If the issue is intermittent, record how many attempts reproduced it.
Filters help locate the message, but revisit the full Console before concluding there were no other errors. In Firefox, “Export Visible Messages” exports what the display currently shows. A saved full log can contain unrelated history; trim it to the smallest useful interval after reviewing it.
Builder example · checkout failure
The Pay button stays disabled after a billing choice. A developer needs the failure at the click, not every page-load warning.
Include
- Steps: open /checkout, choose annual billing, click Pay; expected: payment flow opens; actual: button stays disabled.
- Console: TypeError: Cannot read properties of undefined (reading 'clientSecret') at submitPayment (checkout.ts:84:12).
- Environment: Chrome desktop, browser version, OS, time of attempt, and whether a reload changes the result.
Leave out
Omit unrelated favicon 404s, extension messages, repeated analytics warnings, and any payment details or authentication values.
Agency / QA example · client form
A client says a contact form fails after a route change. The agency needs a report the client's developer can reproduce without exposing lead data.
Include
- Steps: open /contact, enter synthetic test data, navigate to another page and back, submit; expected: confirmation; actual: no confirmation.
- Console: Uncaught TypeError: Cannot read properties of null (reading 'value') at validateContact (contact-form.js:37:9).
- Environment: Firefox desktop, browser version, OS, time of attempt, and whether the error appears only after navigation.
Leave out
Omit the client's real name, email, message body, session URL, third-party ad warnings, and unrelated CSS notices.
Review private data before sharing
Search the excerpt and any saved file for names, email addresses, form values, access tokens, cookies, authorization headers, and URLs with query strings or fragments. Replace private values with clear labels such as “[redacted email]”, then reread the result. Do not paste a complete log into a public issue without that review. Use synthetic test data when you can reproduce the bug without real customer details.
How this differs from a ContextCapture report
This walkthrough creates a manual DevTools excerpt. When its widget is installed on a site, ContextCapture can attach a bounded set of recent page console messages, uncaught errors, browser context, a screenshot, and a limited request summary to a submitted report. It does not replace a complete DevTools session export or a HAR file. Capture the full stack manually when the report needs it, and review sensitive content in either kind of evidence before sharing.
Examples for your team
Builder example
A builder clears earlier console noise, repeats a failed save, and copies the error that appears at the moment of failure.
Start your 14-day free trialAgency / QA example
A QA tester notes the browser and test steps, captures the relevant error, and removes client details before handoff.
Start your 14-day free trial