A developer's screenshot workflow: bug reports, code review, and step guides

Akok — Mon, 26 Oct 2026 16:45:33 +0000

Why another screenshot post

Developers take screenshots all day: a bug report, a design review, an API example, a step in an onboarding doc. The built-in tools capture pixels; the real work starts after that—annotating, redacting, stitching, writing the steps down.

I build InSnap, a screenshot and screen-recording tool for macOS and Windows, so take the tool mentions with that bias. The workflow below works with any editor; InSnap just removes the app-switching.

1. Bug reports that get fixed

A screenshot alone tells the reader what you saw, not what you did. Three additions change that:

Numbered steps. Put 1, 2, 3 on the screenshot in the order you clicked. In InSnap, changing a number shifts the following numbers automatically, so you do not renumber by hand.
Arrows that point at the exact control. Draw them on the capture overlay; no image editor round trip.
Redaction before sharing. Solid fill for tokens and passwords, high-strength mosaic for names and emails. Blur is the weakest option—avoid it for secrets.

Long stack traces and logs rarely fit on one screen. A scrolling screenshot stitches the whole page into one image:

Then attach a template the reader can reproduce:

## Environment
- OS: macOS 14.4 / Windows 11 23H2
- App version: 1.2.3 (build 456)
- Runtime: Node 24 / Chrome 155

## Steps
1. Open Settings → Notifications
2. Turn off Email alerts
3. Reload the page

## Expected / actual
- Expected: the toggle stays off
- Actual: it turns back on after reload

## Attachments
- Screenshot: above (steps 1–3)
- Recording: screen-recording.mp4
- Console log: long screenshot

2. Code review and before/after

For UI changes, a before/after pair is faster to review than a paragraph. Capture both states, stitch them in the image editor, and paste the result into the PR.

When I need to use a screenshot while coding—a design spec, an API response, a config snippet—I pin it above other windows instead of switching tabs. Pinning a clipboard text or JSON also works: it renders as a readable card, not an image of text.

Share links are useful when the attachment would expire in chat. In InSnap that is the optional Cloud subscription (expiry and optional password); a saved file attached to the PR is enough for local teams. Pro and Cloud are separate; neither includes the other.

3. Docs and debugging

Copy text from an image. Box the error, hit OCR, then select text directly on the image. Recognition runs locally—no upload—and works well for Chinese, English and Latin-script languages. Japanese kana, Korean and Russian are not reliable yet.
Keep a command or JSON beside the code. Pin the clipboard: plain text, Markdown and HTML become a floating card.
Find that screenshot from last week. History keeps captures locally and indexes OCR text, so searching an error code finds the image even if the file name is meaningless.

4. Turn a task into a guide

Recording a task is often faster than writing the steps:

Start guide recording.
Do the task normally. Every click becomes a step: a screenshot taken before the click, a marker on the target, and a title derived from the button or input name. Double clicks merge; drags are ignored.
Stop. The guide opens in an editor.

In the editor you can rewrite titles, reorder or hide steps, add substeps and callouts (tip/warning/note), crop each screenshot, and blur the same region across all steps in one action.

Export matters more than editing: PDF for customers, Word for colleagues, PowerPoint for training, HTML for a knowledge base, Markdown for a repo, SCORM for an LMS, JSON for automation.

For screen recordings, the same idea applies to video. “Record & edit” stores mouse and keyboard events; the editor generates zoom segments around clicks and follows the cursor between them. You can delete or add segments on the timeline instead of keyframing by hand.

5. My setup

Action	macOS	Windows
Capture	`⌘1`	`Ctrl+1`
Pin clipboard	`⌘2`	`Ctrl+2`

Other actions (long screenshot, recording, guides, history) are optional global hotkeys. Inside the capture overlay, ⌘A selects the full screen, ⌘C copies, ⌘S saves, ⌘Z undoes.

Settings worth turning on:

auto-detect windows and UI elements (hover instead of dragging edges);
screenshot history with OCR indexing;
output options: scale Retina captures to 1x and add a 1px border for docs.

6. Limits, honestly

No Linux build. macOS 14.4+ and Windows 10+ only.
OCR is local and language-limited. Chinese, English and Latin-script languages are good; Japanese kana, Korean and Russian are weak.
Smart erase is a local algorithm, not a generative model. It works best on flat, gradient and UI backgrounds; subjects that match the background color can leave artifacts.
Pro and Cloud are separate. Pro unlocks advanced tools (long screenshots, GIF, video effects, guides, smart erase); Cloud is an optional subscription for hosted share links. Neither includes the other.
Screenshots, annotation, pinning, OCR and history are free, including basic MP4 recording.

Closing

If your current loop is system screenshot → open Preview → draw arrow → send in chat → open a recorder for the video, collapsing it into one tool saves a surprising amount of context switching.

InSnap runs on Mac and Windows: https://insnap.cn

Disclosure: I build InSnap. The workflow above is what I use for my own bug reports and docs; the tool is optional.

DEV Community: Akok