Frontend Knight
A toolkit for frontend developers, designers and QA that checks layouts on the live page: a column grid you can measure against, a point-to-point ruler, a breakpoint badge that matches min-width media queries, image and accessibility audits, a design overlay for pixel-comparing a mockup against the real UI, dark mode per site, copy-as-image, and bug reports that paste a screenshot plus the URL, viewport, selector and recent page errors straight into Jira, Linear, Slack or Notion. Everything runs locally — no account, no telemetry, no backend.
Everything, free
Frontend Knight is free to use. There is no premium tier, no licence key and nothing to buy — the whole surface below is yours.
- Column grid overlay with element measuring
- Point-to-point and on-screen ruler
- Live breakpoint badge (min-width semantics)
- Image audit: broken, oversized, alt text, lazy-loading
- Tab order, unnamed controls and color-blindness simulation
- Design overlay with difference blend and @1–3x scales
- Per-site dark mode that keeps images true to color
- Copy any element or area as a PNG, scroll-stitched
- Annotated bug reports with environment and page errors
Questions
- Is Frontend Knight free?
- Yes — free to use, with no account, no telemetry and no backend. The source is not currently published.
- Does it send my page data anywhere?
- No. The overlays, audits and screenshots are produced locally in your browser; copies go to your clipboard only when you ask for them.
- Which sites does it work on?
- Any page you are building or testing, including localhost and staging domains — the tools draw on whatever tab you activate them in.
- How do I open the tools?
- From the toolbar popup, or with shortcuts: Alt+Shift+G grid, Alt+Shift+R ruler, Alt+Shift+D dark mode, Alt+Shift+C copy as image. The rest can be bound at chrome://extensions/shortcuts.