5.5Attachments That Accelerate Fixes

The right attachment can cut investigation time from hours to minutes.

Screenshots with Annotations

Do not just screenshot the entire screen. Annotate:

• Circle or arrow pointing to the broken element
• Highlight error messages
• Include the URL bar so the developer knows the exact page

Tools: macOS Screenshot (Cmd+Shift+4), Snagit, Lightshot, browser DevTools screenshot.

Video Recordings

For complex multi-step flows where screenshots are insufficient:

• Keep videos under 60 seconds
• Narrate if possible ("Now I click Submit, and you can see the error appears...")
• Trim the beginning and end — start just before the bug trigger

Tools: Loom, macOS screen recording (Cmd+Shift+5), OBS Studio.

HAR Files and Network Logs

For API-level issues, a HAR (HTTP Archive) file captures every network request:

1. Open Chrome DevTools > Network tab
2. Reproduce the bug
3. Right-click in the network tab > "Save all as HAR with content"
4. Attach the .har file to the bug report

Console Logs

Copy-paste the actual console output. Do not paraphrase.

Console output:
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at UserList.render (UserList.jsx:42)
    at processChild (react-dom.js:1234)

cURL Commands

For API bugs, provide a curl command that reproduces the issue directly:

curl -X POST https://staging.example.com/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email": "user+tag@test.com", "password": "ValidPass123!"}'
# Returns: HTTP 500 {"error": "invalid_parameter"}

This lets the developer reproduce without touching the UI.