Click any element to see its computed styles, then edit them live with sliders and colour pickers. Change padding, colours, fonts, borders and shadows on a real page and watch the result instantly — no DevTools panel required.
How to use CSS Inspector ›All 29 UltraDevKit tools
Every tool runs locally in your browser, on any website — including staging environments behind a login. One extension instead of a dozen bookmarklets and tabs.
Inspect & Debug2 tools
Preview a site across phone, tablet, laptop and desktop breakpoints side by side, without resizing your browser window.
How to use Responsive Viewer ›Design & Layout7 tools
An eyedropper for the web. Hover any element to read its exact colour and copy it as HEX, RGB or HSL.
How to use Color Picker ›Extract every colour used on a page into one palette. Perfect for reverse-engineering a design system or matching an existing brand.
How to use Color Palette ›Identify the font on any website — family, size, weight, line height and letter spacing — just by hovering over the text.
How to use Font Finder ›Measure any element and the gaps between elements in pixels, so you can check a build against the design spec.
How to use Page Ruler ›Overlay a configurable grid to verify alignment and spacing rhythm across a layout.
How to use Grid Overlay ›Outline every element on the page to expose the box model and spot layout bugs, overflow and stray containers instantly.
How to use Outline ›Force a dark theme on any website that does not ship one, with adjustable intensity and warmth. Images and video stay natural instead of being inverted.
How to use Dark Mode ›Accessibility3 tools
Scan any page for WCAG problems — missing alt text, unlabelled form controls and buttons, skipped heading levels, low-contrast text, missing landmarks and duplicate IDs. Each issue is scored by severity, highlights the element on click, and exports as JSON.
How to use Accessibility Audit ›Hover any text for its live WCAG contrast ratio with AA and AAA pass/fail badges. Handles semi-transparent colours, shadow DOM and text over gradients.
How to use Contrast Checker ›Strip a page down to readable text with adjustable typography — no ads, popups or sidebars.
How to use Reader Mode ›Audit & Analysis6 tools
Reveal the stack behind any website — frameworks, analytics, CMS, CDN, fonts and libraries — in a single click.
How to use Tech Detector ›Audit a page's title, meta description, canonical URL, Open Graph and Twitter card tags, headings and structured data, with warnings for anything missing or over length.
How to use SEO Inspector ›Measure Core Web Vitals — LCP, CLS and INP — plus TTFB, first paint, request count, page weight by resource type and your slowest requests, on any page you visit.
How to use Performance Metrics ›Check every link on a page for broken URLs and redirect chains, filter by status, and export the results as CSV.
How to use Link Checker ›Point at the data you want and extract it from the whole page using CSS selectors. Export structured results as JSON or CSV.
How to use Web Scraper ›Generate a full UX review covering design, accessibility, SEO and performance, with prioritised fixes and a PDF export for clients.
How to use Critique Report ›Capture & Export3 tools
Capture the visible viewport, a full-page scrolling screenshot, or drag to select any region. Copy to the clipboard or download as PNG.
How to use Screenshot ›Find every image on a page with its dimensions and format, then download the ones you need individually or in bulk.
How to use Image Extractor ›Export any component as clean, self-contained HTML and CSS you can paste straight into a project or a CodePen.
How to use HTML Exporter ›Live Editing3 tools
Rewrite any text on a live website to preview copy changes before they ship. Ideal for checking how longer headlines wrap or how a shorter CTA looks in context.
How to use Text Editor ›Drag any element to a new position to test layout ideas directly in the browser, without touching a stylesheet.
How to use Move Element ›Hide distracting elements — cookie bars, chat widgets, sticky headers — to get a clean view of a page, then reset in one click.
How to use Delete Element ›Developer Utilities5 tools
Send GET, POST, PUT and DELETE requests with custom headers and bodies, and read formatted JSON responses without leaving the tab you are working in.
How to use API Tester ›Inspect, search and delete cookies for the current site to debug sessions, consent banners and auth flows.
How to use Cookie Editor ›Browse, edit, add and delete localStorage and sessionStorage entries, with JSON pretty-printing and a one-click export.
How to use Storage Inspector ›Keep per-site notes and to-dos pinned to the page you are working on, so QA findings stay with the URL that produced them.
How to use Todo Tasks ›Open any of the tools from a searchable command palette with Ctrl+Shift+K (Cmd+Shift+K on macOS) — never hunt through a menu.
How to use Command Palette ›Get all 29 tools
7-day free trial, no credit card. Then $5.99 once — no subscription.
Install from the Chrome Web Store