loupekit.com

mx

route2.mx.cloudflare.net

route1.mx.cloudflare.net

route3.mx.cloudflare.net

ns

doug.ns.cloudflare.com

autumn.ns.cloudflare.com

caa

txt

google-site-verification=9APQNYFrqf7QHx7WL-7qCnpcFRQuAKlxJXKDp9RemJM

launchpadly-site-verification=702c18389c889da7bfc71eada6902706

brevo-code:9947f6976fe46b92efbca4cc907b67f4

v=spf1 include:spf.brevo.com include:_spf.mx.cloudflare.net ~all

google-site-verification=tGiON4YYyNYSqGWM2Al7UrMPdM3IzNZ76o5CZjrumZ8

dmarc

v=DMARC1; p=none; rua=mailto:rua@dmarc.brevo.com

User-agent: *
Allow: /

Sitemap: https://loupekit.com/sitemap.xml

# LoupeKit

> A browser extension (Chrome and Firefox, MV3) that inspects the page in front of you: what it is built with, the design tokens it uses, whether it reads as AI-generated, and 101 tools for the things a developer opens DevTools to check. It runs on the page you are already looking at, on explicit action, and sends nothing anywhere unless you publish a report.

Free to use, with a Pro plan for a small number of capabilities. The panel itself asks for no account - every reading happens in the browser, on the page you have open, and only when you ask for it.

Two builds: one for Chrome and Chromium browsers, one for Firefox. Requested permissions are `activeTab`, `storage`, `scripting` and `contextMenus`; `host_permissions` is empty in both manifests, and anything wider is optional and granted at the moment a feature needs it.

The one reading that reaches a server is a Vibe audit, which is scored by our Cloudflare Worker. Everything else - the stack detection, the design tokens, the accessibility and SEO readings, the page tools - is computed on your machine and stays there.

## The site

- [LoupeKit](https://loupekit.com/): What the extension is, the ten panel tabs, and where to install it.
- [The panel](https://loupekit.com/panel/): The ten tabs, what each one reads, and a page for every one of them.
- [Tools](https://loupekit.com/tools/): Every tool, grouped by the problem somebody arrived with. One page each.
- [Comparisons](https://loupekit.com/compare/): How this compares with the other extensions in the same drawer, including where they are the better answer.
- [Pricing](https://loupekit.com/pricing/): What Pro costs, monthly or outright, and exactly which capabilities it unlocks.
- [Changelog](https://loupekit.com/changelog/): Every release, in the words the panel shows.
- [Notes](https://loupekit.com/blog/): Method: how a page gives away its stack, how generated markup is measured, and why the extension asks for no website permissions.
- [Free browser tools](https://loupekit.com/free/): The 33 pages here that do something rather than describe something - contrast, units, encoders, a JWT decoder, status codes. No account, no upload, and no request to anywhere.
- [Support](https://loupekit.com/support/): Where to write, and what to include so the first reply is useful.
- [Questions](https://loupekit.com/faq/): The questions asked before installing, answered at length: scoring, what is sent, permissions, what Pro costs.
- [Privacy](https://loupekit.com/privacy/): The full disclosure: every field read, every byte sent, and the reasoning behind each.
- [Terms](https://loupekit.com/terms/): The agreement covering the extension, the licence key and the subscription.

## The panel, tab by tab

- [Stack](https://loupekit.com/panel/stack/): What is this page built with, and has anything been published against those versions?
- [Vibe](https://loupekit.com/panel/vibe/): How much of this page reads as generated rather than written?
- [UI](https://loupekit.com/panel/ui/): What is this element, and what happens to the page if it changes?
- [Developer](https://loupekit.com/panel/developer/): Which page switches would you otherwise open devtools to find?
- [SEO](https://loupekit.com/panel/seo/): What is a crawler - and an answer engine - actually handed for this page?
- [Convert](https://loupekit.com/panel/convert/): Will this page turn a visitor into a lead, and what is stopping it?
- [A11y](https://loupekit.com/panel/a11y/): What does assistive software actually receive when it opens this page?
- [Domain](https://loupekit.com/panel/domain/): Who owns this domain, what does its DNS answer, and who issued its certificate?
- [Server](https://loupekit.com/panel/server/): What can only be read from outside the browser?

## Tools

- [Classes](https://loupekit.com/tools/classes/): Sort, dedupe and shorten a Tailwind class list
- [Wording](https://loupekit.com/tools/wording/): Find AI phrasing, long sentences and repeated wording
- [Viewport](https://loupekit.com/tools/viewport/): Preview a page at real device widths
- [Grid](https://loupekit.com/tools/grid/): Overlay a column, baseline or grid guide on any page
- [Ruler](https://loupekit.com/tools/ruler/): Rulers, pinned guides and a choice of origin
- [Fonts](https://loupekit.com/tools/fonts/): Swap a font family, weight or size on a live page
- [Recorder](https://loupekit.com/tools/recorder/): Record browser actions as Playwright, Cypress or Selenium
- [Mockup](https://loupekit.com/tools/mockup/): Overlay a design comp on the live page and diff it
- [JSON](https://loupekit.com/tools/json/): A JSON viewer, tree and diff in the browser
- [Tables](https://loupekit.com/tools/tables/): Any HTML table out as CSV, TSV or JSON
- [Markdown](https://loupekit.com/tools/markdown/): A web page, or a selection, as clean Markdown
- [QR code](https://loupekit.com/tools/qr-code/): A QR code for any address, encoded locally
- [Print](https://loupekit.com/tools/print/): Preview print styles and the rules that decide them
- [Text stress](https://loupekit.com/tools/text-stress/): Test WCAG 1.4.12 text spacing and RTL on a live page
- [Pseudoloc](https://loupekit.com/tools/pseudoloc/): Pseudo-localise a page to find hard-coded strings
- [Reader](https://loupekit.com/tools/reader/): A reader mode with read-aloud, on any page
- [Page theme](https://loupekit.com/tools/page-theme/): Force dark or light on any site, and see how
- [Client report](https://loupekit.com/tools/client-report/): Export a branded site review
- [Handoff pack](https://loupekit.com/tools/handoff-pack/): Every reading on a page, as one archive
- [Ship check](https://loupekit.com/tools/ship-check/): One verdict on whether a page is ready to ship
- [Copy inspect](https://loupekit.com/tools/copy-inspect/): See what a page writes to your clipboard when you copy
- [Component](https://loupekit.com/tools/component/): Export any element as React, Vue or Svelte
- [Link builder](https://loupekit.com/tools/link-builder/): Build a campaign-tagged URL without re-encoding it
- [Site styles](https://loupekit.com/tools/site-styles/): A per-site stylesheet, kept and re-applied
- [Layers](https://loupekit.com/tools/layers/): See the DOM in 3D - one plate per level of nesting
- [Selector](https://loupekit.com/tools/selector/): CSS selector tester, with every match outlined on the page
- [Units](https://loupekit.com/tools/units/): Convert px, rem, em and ch, and build a fluid clamp
- [Cookies](https://loupekit.com/tools/cookies/): Read and clear cookies, localStorage and IndexedDB
- [Page source](https://loupekit.com/tools/page-source/): The rendered DOM, formatted and searchable
- [Open URLs](https://loupekit.com/tools/open-urls/): Open every address in a block of pasted text
- [CSS to Tailwind](https://loupekit.com/tools/css-to-tailwind/): Convert CSS to Tailwind utilities and back, line by line
- [WordPress](https://loupekit.com/tools/wordpress/): Detect WordPress, its theme and its plugins from the page
- [Scraper](https://loupekit.com/tools/scraper/): Turn any repeating block on a page into rows
- [Picture-in-picture](https://loupekit.com/tools/picture-in-picture/): Any video on a page into the floating window
- [Patterns](https://loupekit.com/tools/patterns/): CSS background patterns built from gradients
- [Capture](https://loupekit.com/tools/capture/): Screenshot a page, an area or the whole document
- [Palette](https://loupekit.com/tools/palette/): One brand colour as an eleven-step OKLCH scale
- [Regex](https://loupekit.com/tools/regex/): Test a regular expression with every match and group
- [Easing](https://loupekit.com/tools/easing/): Build a cubic-bezier or spring easing curve as CSS
- [Shadows](https://loupekit.com/tools/shadows/): Layered box-shadows, tuned and tried on the real page
- [Shapes](https://loupekit.com/tools/shapes/): Drag a clip-path polygon or a blob, and try it on the page
- [Image lab](https://loupekit.com/tools/image-lab/): Resize, convert and compress an image on your machine
- [Type scale](https://loupekit.com/tools/type-scale/): A fluid modular type scale with clamp() and a specimen
- [Mesh gradient](https://loupekit.com/tools/mesh-gradient/): Drag colour points into a mesh gradient, as CSS or PNG
- [Waves](https://loupekit.com/tools/waves/): Layered SVG section dividers: waves, peaks or steps
- [Social card](https://loupekit.com/tools/social-card/): Make a 1200×630 og:image from this page's own title
- [Favicon kit](https://loupekit.com/tools/favicon-kit/): Every favicon size, an .ico and the manifest from a letter
- [Device mockup](https://loupekit.com/tools/device-mockup/): Frame a screenshot in a browser or phone on a gradient
- [Code image](https://loupekit.com/tools/code-image/): Turn a code snippet into a highlighted PNG to post
- [Glass](https://loupekit.com/tools/glass/): Tune frosted glass over a busy ground and try it on the page
- [Encoders](https://loupekit.com/tools/encoders/): Base64, URL, case, lines, hashes and JWTs, all local
- [Cascade](https://loupekit.com/tools/cascade/): See which CSS rule wins, and what it beat
- [Z-index](https://loupekit.com/tools/z-index/): Debug z-index and stacking contexts
- [Compare](https://loupekit.com/tools/compare/): Two elements, every computed difference marked
- [Shifts](https://loupekit.com/tools/shifts/): Find what causes layout shift (CLS)
- [Overflow](https://loupekit.com/tools/overflow/): Find what causes horizontal scroll
- [Reflow](https://loupekit.com/tools/reflow/): Check WCAG reflow at 320px and 200% zoom
- [Breakpoints](https://loupekit.com/tools/breakpoints/): The page measured at every width it declares
- [Patches](https://loupekit.com/tools/patches/): Off-system colours, written as the edit that fixes them
- [Selector health](https://loupekit.com/tools/selector-health/): How testable each element on the page is
- [Font loading](https://loupekit.com/tools/font-loading/): Find fonts that never arrived or silently fell back
- [Forms](https://loupekit.com/tools/forms/): Every form field’s label, constraints and destination
- [Form stress](https://loupekit.com/tools/form-stress/): Fill every form field with awkward input, read the verdict
- [Environments](https://loupekit.com/tools/environments/): Compare the same page in two environments
- [Load timing](https://loupekit.com/tools/load-timing/): The navigation broken into its phases
- [Requests](https://loupekit.com/tools/requests/): The network waterfall, without opening devtools
- [Page weight](https://loupekit.com/tools/page-weight/): Every resource, by transfer size and decoded size
- [Unused](https://loupekit.com/tools/unused/): Fonts, images, tokens and classes nothing on the page uses
- [Images](https://loupekit.com/tools/images/): Find oversized images and missing alt text
- [Focus path](https://loupekit.com/tools/focus-path/): The tab order drawn over the page, in sequence
- [Keyboard walk](https://loupekit.com/tools/keyboard-walk/): Walk a page by keyboard and record every stop
- [Scrolling](https://loupekit.com/tools/scrolling/): Every scroll container, sticky element and snap point
- [Interactions](https://loupekit.com/tools/interactions/): INP’s arithmetic, one interaction at a time
- [DOM size](https://loupekit.com/tools/dom-size/): Find what makes Lighthouse flag an excessive DOM size
- [Leak sniff](https://loupekit.com/tools/leak-sniff/): Check whether a page keeps growing as you use it
- [Network lab](https://loupekit.com/tools/network-lab/): Make a page's fetch and XHR calls fail or wait
- [Listener map](https://loupekit.com/tools/listener-map/): See the event listeners on an element and its ancestors
- [Errors](https://loupekit.com/tools/errors/): Every uncaught error, counted while you reproduce it
- [Console](https://loupekit.com/tools/console/): The console you did not have open, recorded
- [Bug report](https://loupekit.com/tools/bug-report/): Turn a reproduction into a bug report in Markdown
- [Mutations](https://loupekit.com/tools/mutations/): A live ledger of what a page changes in the DOM
- [Tokens](https://loupekit.com/tools/tokens/): Every custom property in scope, editable live
- [Animation](https://loupekit.com/tools/animation/): Every running animation and what it costs per frame
- [Media](https://loupekit.com/tools/media/): Every video, audio element and embedded player
- [Third parties](https://loupekit.com/tools/third-parties/): List every third party a page contacts
- [Source maps](https://loupekit.com/tools/source-maps/): Find source maps leaking original source
- [Outline](https://loupekit.com/tools/outline/): Landmarks and headings in a screen reader’s own order
- [Head order](https://loupekit.com/tools/head-order/): The head in parser order, and the rules that decide startup
- [Iframes](https://loupekit.com/tools/iframes/): Every iframe, its origin and its sandbox
- [Top layer](https://loupekit.com/tools/top-layer/): Dialogs, popovers and fullscreen, read as a list
- [Storage](https://loupekit.com/tools/storage/): The storage footprint, sized and never read
- [Hints](https://loupekit.com/tools/hints/): Resource hints judged against what loaded
- [Service worker](https://loupekit.com/tools/service-worker/): Service worker state, and why a PWA will not install
- [Font faces](https://loupekit.com/tools/font-faces/): Every @font-face, its files and whether anything uses it
- [Tailwind theme](https://loupekit.com/tools/tailwind-theme/): Recover a Tailwind theme from a built page
- [Style census](https://loupekit.com/tools/style-census/): Count every spacing, radius and font size a page paints
- [i18n strings](https://loupekit.com/tools/i18n-strings/): Extract a page's text as i18next JSON, a .po file or CSV
- [Speech preview](https://loupekit.com/tools/speech-preview/): Preview what a screen reader says, and what says nothing
- [Tap targets](https://loupekit.com/tools/tap-targets/): Find tap targets under 24px or 44px, per WCAG 2.5.8
- [Readability](https://loupekit.com/tools/readability/): Flesch reading ease, grade level and the longest sentences
- [Preferences](https://loupekit.com/tools/preferences/): Which prefers-* queries a page answers, and what yours asks

## Free tools, no install

- [Contrast checker](https://loupekit.com/free/contrast/): What is the contrast ratio between these two colours?
- [Make a colour pass](https://loupekit.com/free/accessible-colour/): How dark does this brand colour have to be to pass 4.5:1?
- [Hex, rgb and hsl](https://loupekit.com/free/hex-rgb/): What is this hex in rgb, and in hsl?
- [Flatten a translucent colour](https://loupekit.com/free/alpha-blend/): What hex is this colour at 12% over white?
- [Tint and shade ramp](https://loupekit.com/free/shades/): How do I get a 50-to-900 scale out of one brand colour?
- [CSS gradient builder](https://loupekit.com/free/gradient/): What is the CSS for a gradient between these two colours?
- [Colour blindness check](https://loupekit.com/free/colour-blind/): Do these two colours still read apart to a colour-blind reader?
- [px to rem, and clamp()](https://loupekit.com/free/units/): What is this px value in rem, and what clamp() gives me that curve?
- [Modular type scale](https://loupekit.com/free/type-scale/): What sizes should the headings be if the body is 16px?
- [Line height](https://loupekit.com/free/line-height/): What unitless line-height is 28px on 18px text?
- [Letter spacing](https://loupekit.com/free/tracking/): What is -20 tracking from the design file in CSS?
- [Aspect ratio](https://loupekit.com/free/aspect-ratio/): What height keeps this width at 16:9?
- [Grid columns](https://loupekit.com/free/grid/): What grid-template-columns gives me columns that wrap on their own?
- [Box shadow builder](https://loupekit.com/free/box-shadow/): What are the box-shadow values for a soft elevation?
- [Border radius](https://loupekit.com/free/border-radius/): What is the border-radius for these four corners?
- [cubic-bezier, sampled](https://loupekit.com/free/easing/): What does this cubic-bezier actually do in the middle?
- [Selector specificity](https://loupekit.com/free/specificity/): Which of these two selectors wins?
- [Encode and decode](https://loupekit.com/free/encoders/): Where can I decode this without pasting it into a website?
- [Decode a JWT](https://loupekit.com/free/jwt/): What is inside this token, without pasting it into a website?
- [JSON to TypeScript](https://loupekit.com/free/json-types/): What is the TypeScript interface for this JSON response?
- [HTML entities](https://loupekit.com/free/entities/): How do I escape this so the browser prints it instead of parsing it?
- [URL and query string](https://loupekit.com/free/query/): What are the parameters on this URL?
- [Slugify a title](https://loupekit.com/free/slug/): What is the URL slug for this heading?
- [Case converter](https://loupekit.com/free/case/): What is this name in camelCase, kebab-case and SCREAMING_SNAKE?
- [Word and character count](https://loupekit.com/free/counter/): How many characters is this, and will it fit in a meta description?
- [Unix timestamp](https://loupekit.com/free/timestamp/): What date is this unix timestamp?
- [Durations](https://loupekit.com/free/duration/): How long is 604800 seconds, and what is that as a max-age?
- [Byte sizes](https://loupekit.com/free/bytes/): Is that 1.5 MB or 1.5 MiB, and how long does it take on 4G?
- [Number bases](https://loupekit.com/free/base/): What is this hex value in decimal and in binary?
- [Meta and Open Graph tags](https://loupekit.com/free/meta-tags/): What tags does this page need for a link preview?
- [srcset and sizes](https://loupekit.com/free/srcset/): What srcset and sizes does this image need?
- [MIME types](https://loupekit.com/free/mime/): What Content-Type should this file be served as?
- [HTTP status codes](https://loupekit.com/free/http-status/): What does this status code actually mean?

## Compared with other extensions

- [LoupeKit vs Hoverify](https://loupekit.com/compare/loupekit-vs-hoverify/): LoupeKit vs Hoverify - two all-in-one inspectors, compared honestly
- [LoupeKit vs SuperDev Pro](https://loupekit.com/compare/loupekit-vs-superdev-pro/): LoupeKit vs SuperDev Pro - two bundles, different contents
- [LoupeKit vs CSS Peeper](https://loupekit.com/compare/loupekit-vs-css-peeper/): LoupeKit vs CSS Peeper - a wider panel, or a faster one
- [LoupeKit vs CSS Scan](https://loupekit.com/compare/loupekit-vs-css-scan/): LoupeKit vs CSS Scan - copy one element, or read the whole page
- [LoupeKit vs Wappalyzer](https://loupekit.com/compare/loupekit-vs-wappalyzer/): LoupeKit vs Wappalyzer - technology detection without an account
- [LoupeKit vs Designer Tools](https://loupekit.com/compare/loupekit-vs-designer-tools/): LoupeKit vs Designer Tools - pixel-perfect, or whole-page
- [LoupeKit vs VisBug](https://loupekit.com/compare/loupekit-vs-visbug/): LoupeKit vs VisBug - change the page, or read it
- [LoupeKit vs ColorZilla](https://loupekit.com/compare/loupekit-vs-colorzilla/): LoupeKit vs ColorZilla - picking a colour, and reading a palette
- [LoupeKit vs WhatFont](https://loupekit.com/compare/loupekit-vs-whatfont/): LoupeKit vs WhatFont - naming a typeface, and everything after that
- [LoupeKit vs Chrome DevTools](https://loupekit.com/compare/loupekit-vs-devtools/): LoupeKit vs Chrome DevTools - not a replacement

## Optional

- [Privacy](https://loupekit.com/privacy/): Every field the extension reads, what is sent, and what is not. The disclosure, not a summary of one.
- [Terms](https://loupekit.com/terms/): What is sold, what is not promised, and how a subscription ends.
- [Changelog](https://loupekit.com/changelog/): Every release and what it changed, from the same table the panel prints.