Shipshape – Web QA, Design & Tracking Tools

Screenshots, screen recordings and bug reports, plus grid, spacing, fonts, colors, responsive preview, GTM and SEO checks.

Shipshape puts the tools you reach for while building, designing and tracking websites into one extension. Open it with Alt+Shift+D on any page and pick a tool. No accounts, no tracking, everything runs in your browser. SCREENSHOTS AND BUG REPORTS • Screenshot: capture an area, an element, the visible area or the full page. Ctrl+Shift+Z captures the visible area without touching the page, so hover menus and tooltips stay in the shot. • Screen recording: record the tab as a video (up to 5 minutes) to show a bug that a still image can't, even across page loads. • Editor: crop, add arrows, boxes, numbered steps, text, highlights and blur, then download as PNG, JPEG or PDF, or copy it to the clipboard. Your last 20 captures stay one click away. • Bug report: steps to reproduce, expected and actual result, plus the environment filled in for you (browser, OS, viewport, pixel ratio) and the page's recent JavaScript errors, failed requests and, if you turn it on, console errors and warnings. Copy it as rich text, Markdown or Jira wiki markup, ready to paste into your issue tracker. LAYOUT AND SPACING • Grid Overlay: columns, gutters, max width and a baseline grid over any page. • Measure: element sizes on hover and distances between any two elements. Shift + click pins a measurement, so several stay on screen for one screenshot. • Spacing: every gap inside a section at once, checked against your 4px or 8px scale. On the scale in green, off it in red. • Box Inspector: margin, border and padding in DevTools colors, plus the CSS that matters. DESIGN • What Font: the font that actually rendered, with size, weight, line height and color. • Color Picker: pick any pixel through a loupe and copy its HEX. • Contrast Checker: WCAG AA and AAA contrast of any text, or scan the whole page for failures. • Responsive Preview: the page on phone, tablet and desktop side by side. Shipshape reads the site's own CSS, finds the breakpoints its media queries use and lets you add them by name. MARKETING AND SEO • GTM dataLayer: live dataLayer pushes and the GTM containers on the page. • Tracking Timeline: dataLayer pushes and analytics and ad pixel hits in one timeline, with event parameters and items grouped. • Hold navigation: test link-click tracking without losing the page. The click is held so you can see what fired, then you continue. • Preserve log: keep every push and hit across page loads. • SEO Summary: title and description length, canonical, robots, headings, social preview, hreflang and structured data. DEVELOPER • Image Inspector: rendered size against the downloaded file for every image, srcset and sizes checked the way Chrome picks images, the real file format, and oversized or blurry images flagged. • Tech Detector: frameworks, CMS, analytics and hosting behind the page. • Storage Editor: view and edit cookies (HttpOnly included), localStorage and sessionStorage. PRIVATE BY DESIGN Shipshape has no servers, no analytics and no accounts. Screenshots, settings and logs stay in your browser. Page tools only run when you open them. Preserve log and Hold navigation stay off until you turn them on. Keyboard: Alt+Shift+D opens Shipshape, Ctrl+Shift+Z captures the visible area, Esc closes the open tool. Change them at chrome://extensions/shortcuts.