Website Annotation Tool: Visual Feedback, Screenshots & CSS

Use this website annotation tool to annotate a website with visual feedback, full page screenshots and CSS, and export a bug report.

Use this website annotation tool to show what is wrong on a page and send it as one file. Capture an area, a full page or one element, write a comment, and each capture becomes a numbered item in a report. Export the report as Markdown, HTML, DOCX or PDF. WHAT YOU CAN CAPTURE • Area: drag a rectangle over the visible part of the page. • Full page screenshot: the page is scrolled and stitched into one image, including everything below the first screen. • Element: its screenshot, HTML, a CSS selector and XPath. • Text: a selection, a code block or a table. • Metadata: title, description, canonical, robots, language, headings and social tags. CSS OF THE ELEMENT Many layout bugs live in styles, so element capture saves the CSS next to the screenshot: rules in cascade order, the stylesheet each rule comes from, @media conditions and :hover states. Untick what does not matter. The developer gets the same rules you saw, without opening DevTools. HOW IT WORKS The website annotation tool opens in the Chrome side panel, so the page and your notes stay in one window. 1. Click the extension icon on the page you review. 2. Pick a capture mode. 3. Type a comment next to each item. The address and time are added for you. 4. Open the report tab, group items into sections and export. MARK UP SCREENSHOTS The image editor adds rectangles, arrows, text, numbered badges and blur. Blur hides emails and names before you share the file. The original is kept, so a blur can be removed later. ONE REPORT PER TASK Keep several reports: one per client, release or site. Add sections, an introduction and a conclusion, and reorder items by drag or keyboard. Back up a report to a file and restore it later. A release with dozens of URLs fits in one report. EXPORT 1️⃣ Markdown with images, for a ticket or a repository. 2️⃣ A self-contained HTML file. 3️⃣ DOCX with page numbers and a table of contents. 4️⃣ PDF through the print dialog. Every item keeps its number, comment, address and time, so the file reads as a bug report a developer can act on. NO ACCOUNTS, NO SERVER Everything stays on your computer, and there is nothing to sign up for. You collect notes and send a file; the person who gets it opens the PDF without an account. If your team works in an issue tracker or on an online board, attach the export there. PRIVATE BY DESIGN 📌 Data is stored on your device. No server, no analytics. 📍 A site is read only when you ask: the icon, a shortcut or a menu item. "Always allow" is optional and can be revoked. 📌 Form values, tokens and secret URL parameters are masked in captured HTML. 📍 The only network request downloads a site's own stylesheet, without cookies, when the browser hides its rules. QUESTIONS AND ANSWERS Q: How do I annotate a website? A: Click the icon, choose a capture mode and type a comment. For a design review, use element capture: it saves the screenshot and the CSS in one step. Q: Can I send the result to a client? A: Yes. Create a report for the client, capture and comment, then export a PDF or DOCX. The client reads one file. Q: Does it work everywhere? A: It works on regular sites, including pages behind a login. Chrome closes its own pages (chrome://, settings) and the Chrome Web Store to extensions. Q: Does it create tickets? A: No, it does not connect to a tracker. Attach the Markdown or PDF to the ticket instead. Q: Can I comment on a page without a screenshot? A: Yes. Text and metadata capture save a quote, a table or the headings, with your comment. Keyboard shortcuts open the panel and capture an area, an element or text. The interface is in English and Russian.