How to give Codex a screenshot of a bug

Codex can't see your browser, but it can look at a picture. A screenshot with a short note is often all it needs to find a visual bug. Here's how to do it well, and what to add when a picture isn't enough.

Step by step in the Codex CLI

1. Take the screenshot. Crop it to the broken area plus a bit around it, so Codex can tell where on the page it is.
2. Save it where you can find it. Your Desktop is fine, or a screenshots/ folder in your project. If you save it in the project, keep it out of git.
3. Attach it. OpenAI's Codex CLI docs show codex --image for passing a screenshot with your first prompt, and you can also paste an image into the interactive composer. If the paste does nothing, see screenshot won't paste into Codex CLI.
4. Write the note. What page, what you did, what happened, what you expected. Keep it to three or four lines.

codex --image ~/Desktop/cart.png "On /cart the subtotal stays at $20 when I change the quantity to 3. Expected: $60. Only the cart page."

Make the picture do more work

• Mark the broken part. A red box or circle tells Codex which of the ten things on screen you mean.
• Show a good example too. If another part of the app looks right, say so: "should match the cards on the home page". Codex can open that code and copy the pattern.
• Keep secrets out of the picture. Screenshots of dashboards often show API keys or emails. Crop them out or blur them before you share.
• Add what the picture can't show. A button that does nothing looks fine in a screenshot. The reason is often a red error in the browser console. Copy it as text and paste it in. See how to copy console errors.

What a screenshot can't carry

A picture is great for "this looks wrong". It's weak for:

• errors that happen on click, with nothing visible on screen;
• failed requests, like an image or API call that returned an error;
• which exact element it is, when several look the same;
• bugs that only show after a few steps, like adding three items to a cart.

For those, write the steps out and paste the error text. A screenshot alone will make Codex guess.

The one-key way with Darnly

Darnly is a free Chrome extension that builds the screenshot and the note together. Press Option+Shift+B (Windows is coming soon), click the broken part, type what you expected and press Enter.

You get a PNG with the broken part boxed in red, plus a markdown report with the page address, the element's selector, text, HTML and styles, and console errors and failed requests from the last 60 seconds. Passwords, card numbers, tokens and keys are replaced with [hidden] before anything is saved.

If the project is on your computer, link its folder once and click Set up this project. Darnly adds a note to AGENTS.md, which Codex reads, and a skill file. The bug lands in .darnly/inbox/, and you tell Codex "fix my Darnly bugs". It fixes them, adds a Fixed: line, and moves each report to .darnly/done/. The Darnly panel then says "1 bug fixed. Take a look."

Using Codex in the cloud? Click 1. Copy picture and paste, then 2. Copy details and paste. Or connect Codex to the Darnly cloud inbox over MCP once, and it fetches your bugs itself: set up Darnly in Codex.

One honest note: in our benchmark, a pasted screenshot with one sentence fixed visual bugs just as often as a Darnly report, and cost less. Darnly is worth it for the capture itself (one key, no app switch) and for the errors and element details a picture leaves out. Details in Darnly vs a plain screenshot.