A screenshot annotation tool that works on the live page

The usual workflow is capture, save, open an editor, draw, export, then drag the file into a ticket. On a web page that detour loses context: the editor doesn't know the URL, the viewport or which element you meant, and a cropped image doesn't show where on the page the problem sits. Repeat that for ten issues and the markup work becomes the slowest part of a review.

Annotating in place keeps everything attached. The drawing happens over the real page, the capture records where you were, and the result goes straight into a report you can export or turn into an issue. You never manage a folder of image files. Keyboard shortcuts keep the loop short: ⌥⇧S opens the toolbar, Enter captures, and ⌘/Ctrl+Enter saves, so marking up a page takes seconds rather than a trip through a separate app.

Press ⌥⇧S (Alt+Shift+S) and a toolbar appears over the page. Everything is drawn on top of the live site, so you can scroll and position annotations before you capture.

• Visible area — what's on screen right now.
• Full page — scroll-and-stitch capture of the whole document. It also handles inner scrolling panels and SPA containers, where the page body doesn't scroll but a div inside it does, which trips up many full page screenshot extensions.
• In 3 seconds — a delayed capture so you can hover a menu, open a tooltip or trigger a focus state before the screenshot is taken.
• Element — capture one component on its own, cropped to its bounds.
• Mobile · tablet · desktop — Chrome device emulation renders the page at 390×844, 768×1024 and 1440×900 and combines them into one side-by-side image.

“Interact with page” mode pauses the drawing layer so you can open a dropdown, expand an accordion or switch a tab first, then return to annotating. If you only need a plain full page image without an extension, our guide to a full page screenshot in Chrome shows the built-in DevTools command.

An arrow that says “too much space” invites a round of back-and-forth. Bugmark's element inspector lets you click the element and attach its CSS selector, rendered size and computed styles: font, color, background, padding, margin, border, radius and display. The designer's note and the actual values arrive together, which is usually enough for a developer to fix spacing or typography issues without opening the page. It also avoids a classic mix-up on component libraries, where the same card appears in several places: the selector says exactly which instance you meant.

After the fix, the before/after option adds a second screenshot to the same report, recaptured at the same scroll position, uploaded, or pasted from the clipboard, and shows both side by side.

1. Open the toolbar with ⌥⇧S and pick a capture mode.
2. Draw your annotations and redact anything sensitive.
3. Press Enter to capture, then add a title and comment that references your numbered pins.
4. Save with ⌘/Ctrl+Enter. The screenshot is stored in your local dashboard.
5. Share it as a GitHub issue, a Markdown copy for Slack or Jira, or an exported HTML or PDF report.

Each screenshot also carries steps to reproduce, console messages, network requests and environment details. You can ignore them for a pure design note, but they are there when an annotated “this looks broken” turns out to be a failed API call. The bug reporting tool page explains that context in detail.

Bugmark is a markup tool for websites running in Chrome and Chromium browsers (Edge, Brave, Arc). It does not capture your desktop or other applications, it is not a general image editor with layers and filters, and it does not host images at a public link. Screenshots are stored in IndexedDB on your device and leave only when you export or create a GitHub issue. If you mostly annotate for client sign-off, the website feedback tool page covers white-label reports and review rounds.

Free with no account, no item limits and no required watermark. It installs in about a minute and works in Chrome, Edge, Brave and Arc, so the whole team can mark up pages the same way. Add Bugmark to Chrome — free.