How to report a bug with a screenshot and console errors

A bug report that lets a developer fix the issue on the first try needs four things: a screenshot of what went wrong, the exact element or URL involved, any console errors that fired at the time, and any network requests that failed or were unusually slow. Most manual bug reports include only the first item, which is why so many tickets bounce back with “can you reproduce this?” — the developer has a picture of the symptom but none of the diagnostic data that would tell them the cause.

What to include, and why each piece matters

• Screenshot — shows the visible symptom, but not the cause.
• Exact element/selector — removes the “which button?” back-and-forth entirely.
• Console errors — a thrown JS error at the moment of the bug is often the actual root cause.
• Network requests — a failed or slow API call frequently explains a broken UI state that looks purely visual.
• Browser/OS/viewport — rules out “works on my machine” before it’s even asked.

Capturing all of this manually

Without tooling, this means opening DevTools, manually copying console output and the Network tab, taking a separate screenshot, and pasting all of it into a ticket by hand — a five-to-ten-minute task most people skip under deadline pressure, which is why so many bug reports end up screenshot-only.

Doing this automatically with Layerdock

Every pin placed inside a dock captures all five of the items above automatically at the moment it’s placed — the screenshot, element selector, the last 50 console log entries, the last 50 network requests, and system info — with no manual copy-paste step. See pricing.