Frontend Knight

Toolkit for frontend developers: grid overlay, floating ruler, dark mode toggle, and screenshot-to-clipboard

Frontend Knight is a toolkit for frontend developers, designers and QA, built to check layouts right on the live page. TOOLS • Grid overlay – lay a configurable column grid over any page. Hold Alt and hover to highlight elements, Alt+click two elements to measure the distance between them, and drag or nudge grid lines with the arrow keys. • Ruler – drag anywhere to measure point to point (Shift snaps horizontal/vertical), plus a movable, resizable, rotatable on-screen ruler. • Dark mode – invert any page's colors while images and video keep their real colors. Remembered per site. • Copy as image – drag to copy an area, or click to copy an element, straight to the clipboard as a PNG. Tall elements are captured by scrolling. • Breakpoints – a badge showing the window size and the active breakpoint, matching how min-width media queries see it. • Image audit – flags images that are broken, missing alt text, much larger or smaller than displayed, missing width/height, or not lazy-loaded below the fold. • Design overlay – paste or drop a design export onto the page and lay it over the real UI to compare (normal or difference blend, @1x/@2x/@3x, fixed or scrolling). • Accessibility – show the keyboard Tab order, controls with no accessible name, and simulate color blindness. • Bug report – pick an area, annotate the screenshot, and copy it together with the URL, viewport, breakpoint, browser, element selector and recent page errors – ready to paste into your issue tracker, team chat or notes. KEYBOARD SHORTCUTS Alt+Shift+G grid · Alt+Shift+R ruler · Alt+Shift+D dark mode · Alt+Shift+C copy as image. The other tools can be given shortcuts at chrome://extensions/shortcuts. PRIVACY Everything runs locally in your browser. Frontend Knight has no servers, no analytics and no tracking, and never sends your data anywhere.