How to Screenshot a Web Page with Browser Console Errors for a Bug Report
Capture a readable screenshot of a web bug and its Console error, then add the steps and browser details needed to reproduce it.
To report a web bug with useful evidence, open browser Developer Tools before reproducing the problem, keep the relevant Console error visible, and capture the broken page at a readable size. If the page and error do not fit legibly in one screenshot, attach two images: one of the page and one of the Console. Include the page URL, exact reproduction steps, expected and actual behavior, browser and operating system details, and whether the issue repeats.
1. Prepare the browser before reproducing the bug
Open the affected page, then open Developer Tools before triggering the problem. This helps ensure the Console is present when the relevant messages are generated. In Microsoft Edge, the Console is the default place for JavaScript and connectivity errors. Firefox’s Web Console records network requests, JavaScript, CSS, security messages, and messages logged by page scripts. Microsoft Edge Console documentation · Firefox Web Console documentation
- Open the page where the problem occurs.
- Open Developer Tools using the browser menu or its keyboard shortcut. Shortcuts vary by browser and operating system.
- Select the Console. Clear old messages if they would make the relevant error hard to identify; do not clear messages if they are part of the evidence.
- If a reload or navigation is part of the failure, open the Network tool and enable Preserve log before reproducing it. This retains requests across page loads. See the Edge Network reference.
Reproduce the issue using the same steps you plan to give the developer. Note the time it occurs and identify the relevant error or failed request. Avoid changing several conditions at once: a concise reproduction makes it easier to connect the visible failure with the Console evidence.
2. Capture the page and error at a readable size
First try a browser-window screenshot that includes both the broken page and the relevant Console message. Keep the error text large enough to read. If the browser window cannot show both clearly, do not shrink the whole view until the text is illegible. Save a page screenshot and a separate Console screenshot, or include a relevant saved log.
| Capture | Use it when | What it shows |
|---|---|---|
| Viewport screenshot | The failure is visible in the current browser view. | The immediate broken state at a useful scale. |
| Full-page screenshot | The surrounding layout or content farther down the page matters. | More page context, though the relevant defect may appear smaller. |
| Element screenshot | A particular component is the clearest evidence. | The selected element without unrelated page content. |
| Console screenshot or log | The error text cannot fit legibly with the page. | The browser-reported message and its details. |
| Network log or HAR | A request, response, or navigation failure is relevant. | Request activity that can help diagnose the failure; review it for sensitive data before sharing. |
In Firefox, you can enable the full-page screenshot button in Developer Tools settings under Available Toolbox Buttons, then use that button to save a full-page capture. For one element, right-click it in the Inspector and select Screenshot Node. Firefox’s Web Console helper also supports :screenshot --fullpage, along with filename, delay, and device-pixel-ratio options. See Firefox’s screenshot documentation. Controls and menu names can vary by browser version and platform.
3. Attach enough context to reproduce the failure
Include this information with the images or issue:
- Page URL: Include the relevant route or page, while removing private query parameters or tokens.
- Reproduction steps: Number the actions in order, including any inputs or navigation.
- Expected behavior: What should have happened.
- Actual behavior: What happened instead and when it appeared.
- Environment: Browser and version, operating system, and relevant viewport or device.
- Repeatability: Say whether it happens every time, intermittently, or only under a known condition.
- Evidence: Attach a legible page image and the relevant Console or Network evidence.
This is a practical reporting checklist, not a universal required form. A GitHub issue is one place to submit and track a report; see GitHub’s guide to creating an issue.
4. Protect private information in attachments
Inspect each image and exported log before sharing. Look for account names, email addresses, private page content, access tokens in URLs, request payloads, and other information that should not leave your team. Crop or redact sensitive details while retaining enough context to understand the failure.
Edge can sanitize HAR exports by default, omitting sensitive headers such as Cookie, Set-Cookie, and Authorization. That does not make every part of a HAR safe automatically: URLs, request data, and visible account details may still disclose private information. Review the file yourself before attaching it, as described in the Edge Network reference.
5. Troubleshooting evidence capture
| Problem | Likely cause | What to do |
|---|---|---|
| The relevant error is missing. | Developer Tools opened after the error occurred, or the page reloaded. | Open Developer Tools first and reproduce the issue again. Enable Network Preserve log before a reload if navigation is involved. |
| The error text is too small to read. | The page and Console were squeezed into one image. | Capture the page and Console separately, or enlarge Developer Tools and retake the browser-window screenshot. |
| The full-page capture control is missing. | The browser’s screenshot tool is not enabled or the browser version uses different controls. | In Firefox, enable the screenshot button under Developer Tools settings and Available Toolbox Buttons, or use the Console helper documented by Mozilla. Check the browser’s current documentation for platform-specific controls. |
| A HAR contains sensitive information. | Sanitization does not remove every sensitive URL, payload, or visible detail. | Review the exported file, remove or redact private data, and share only the requests needed to explain the bug. |
| The screenshot does not show the same failure another person sees. | The issue depends on viewport, browser, session, timing, or another environment condition. | Record the environment and exact steps, then capture again under the affected conditions. State clearly if the failure is intermittent. |
6. Or skip the browser setup
For a clean screenshot of the page itself, ScreenshotNeo is a website screenshot API and MCP server. A screenshot API cannot capture your local browser Console, so keep a separate Console screenshot or log when that error is part of the report. ScreenshotNeo can capture the page state from a URL in one request:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpEquivalent Python and Node.js requests:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed; and its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000 screenshots. Sign up for 1,000 free screenshots a month, with no card required.
FAQ
Should I put the page and Console in one screenshot?
Only if both remain readable. Otherwise, attach separate screenshots and label what each one shows.
Do I need to attach a HAR for every bug?
No. Add a Network log or HAR when a failed request, response, or navigation helps explain the problem.
Should I include the entire Console?
Include the relevant error and enough surrounding context to identify it. Remove unrelated messages that make the evidence harder to review, while preserving any messages needed to understand the sequence.
Can a URL screenshot show a local browser error?
No. A URL-based screenshot captures the page returned to the screenshot service; it does not include the Console from your local browser session. Capture that Console separately.
