--- title: "DevKit: 250+ developer tools in your browser | FindUtils" description: "DevKit is a Chrome and Firefox extension: 250+ developer tools in the side panel, page tools for any site, and briefs for your coding agent. Works offline, no account. Watch the film and try the paste demo on this page." url: https://findutils.com/devkit/ --- # 250+ developer tools, one keypress from any tab. DevKit is a browser extension for Chrome and Firefox (Edge, Brave, Opera and Arc load the Chrome build). It puts 274 developer tools in the browser's side panel, and 15 of them work right on the page, on any site. Point at anything and hand it to your coding agent. ## The film A 40-second film shows DevKit at work: the Inspector taking a card apart and copying it as Tailwind, JSX or CSS, two elements pinned and sent to a coding agent as a brief, four more page tools, pasted text getting its answer, and a coding agent reading an approved tab. [Watch it](https://findutils.com/videos/devkit/devkit-reel-v3-1080p.mp4). ## 01. Page tools 15 tools in a toolbar that opens on the page you are looking at, on any site. Every switch turns off again, and page edits have undo. **Measure** - **Inspector**: Styles and contrast for any element. Copy it as Tailwind, JSX or CSS. - **Ruler**: Measure the distance between two elements. - **Layout**: Flex and grid overlays, and the box model. - **Colour picker**: Pick any colour on the page in HEX, RGB, HSL or OKLCH. - **Outliner**: Outline every element by depth, and find what overflows the viewport. - **Fonts**: See what font this is and every font in use. Try any Google font on the page. - **Spec**: Spacing, colour and type matched to your design tokens, and the distance between two elements. Copy a red-line spec. **Change** - **Dark mode**: Force a dark page: invert it with images kept, or use reading colours. - **Edit text**: Type over any text on the page, with undo. - **Move & delete**: Nudge elements with the arrow keys or hide them, with undo. - **Replace image**: Swap an image or a background from a URL or a file, with undo. **Take away** - **Picture-in-Picture**: Float a video over other windows, even when the page disables it. - **Export element**: Copy an element as HTML + CSS, or as JSX + Tailwind. Open it in CodePen. - **Save as PDF**: Save the page as a PDF. - **Feedback**: Numbered notes on the page: copy a checklist, download a report, or send them to your agent. ## 02. Capture Point at it and tell your agent what to change. Pin elements on any page, write what should change, and DevKit hands your coding agent a brief: the selector, the styles, the markup, a picture of each element. 1. **Pin**: Click an element. Shift-click adds more, up to 20. Or drag an area. 2. **Ask**: Type what should change, or start from a prompt starter. 3. **Send**: Copy it as a prompt, or send it to a paired agent. The agent picks it up and reports done; you compare before and after. Prompt starters: Match the design, Fix contrast, Make it responsive, Explain how it's built, Write a test. - **Tweak**: Change the pinned element's colour, spacing, size or text live, undo any of it, and copy the change as a CSS or Tailwind diff. - **Likely source**: In a development build, the brief carries the element's likely source file. - **Errors**: Record a site's console errors and failed requests, and attach them to the brief. - **Feedback notes**: Number your notes on the page, then copy a checklist, download a report, or send them to your agent. ## 03. Paste anything The page has a live paste box that runs the same detection and the same tools as the side panel, inside the page. Nothing you paste is sent anywhere. An answer with many parts is one card with tabs. It recognises: - **JWT**: opens the JWT decoder - **JSON**: opens the JSON formatter - **cURL**: opens the cURL to code - **PEM**: opens the PEM decoder - **Cron**: opens the Cron explainer - **Unix time**: opens the Timestamp converter - **URL**: opens the URL parser - **Colour**: opens the Colour converter - **Base64**: opens the Base64 decoder ## 04. Your coding agent A local bridge, off until you turn it on. Your agent runs DevKit's 209 offline tools, reads a tab only after you approve it, and picks up the briefs you send from the page. - **Run 209 offline tools**: Formatters, converters and decoders on its own input. No page, no network. - **Check a tab you approve**: An accessibility audit, SEO and meta tags, page speed, the site's stack, a screenshot. - **Pick up your briefs**: What you pinned and asked for, with a picture of each element. - **Read an element back**: Its styles or a fresh picture, to check its own work. What it needs: macOS or Linux; No Node.js: the command installs the helper; A Chromium browser or Firefox. Set it up in DevKit under Settings → Agents → Connect an agent: 1. Turn on the agent bridge 2. Choose your agent and what it may do 3. Download the helper 4. Run one command 5. Restart your agent and say hello The command on macOS and Linux; the wizard fills in your extension id and six words. It fetches the helper from findutils.com, checks it, and pairs your agent: ``` curl -fsSL https://findutils.com/devkit/install.sh | sh -s -- connect --extension-id --code "" --client claude-code ``` ## 05. More in DevKit - **A DevTools panel**: watch requests arrive, import and export HAR files, copy any request as cURL, or open it in DevKit to replay it. - **Mobile checks**: responsive viewer, safe areas, PWA checks, deep-link checks. - **Chains and saved recipes**: send one tool's output into the next, and save a chain as a recipe that runs in one step. - **Offline packs**, built in and loaded when you open one; files never leave the machine: Image Compress (Compress and convert images. Resize, compare, batch and ZIP); HEIC Convert (iPhone HEIC and HEIF photos to JPEG or PNG); PDF Tools (Work on the pages of a PDF); SQLite Browser (Open a .sqlite or .db file read-only: tables with row counts, run SQL, export CSV or JSON). ## Shortcuts - **Alt+Shift+K** (Option+Shift+K on a Mac) opens the side panel on any tab. Paste, or search all 274 tools by name. - **Alt+Shift+I** opens the Inspector on the page you are looking at. - **fu** in the address bar, then a tool name, searches DevKit. - **Alt / ⌥ + C**, while the page tools are on: copy the element under the pointer as a prompt. - **Alt / ⌥ + S**, while the page tools are on: send the brief or the notes to your agent. ## Privacy Works offline. No account. No telemetry. The only call home is the licence check, which sends your licence key and a random browser id. The permissions DevKit asks for at install: - `storage`: Keeps your settings, favourites, recipes and history on this computer. - `activeTab`: Lets a tool read the tab you are on, when you use it there. - `scripting`: Runs the page tools on that tab. - `contextMenus`: Adds DevKit to the right-click menu. - `sidePanel` (Chrome only): Opens DevKit in Chrome's side panel. Everything else is optional. The tool that needs it asks for it, when you use that tool. ## Pricing $19.99, lifetime, paid once: every tool (all 274, the 15 page tools included), every future update, up to 3 browsers per licence. No subscription, no trial and no refunds. - Install DevKit from the Chrome Web Store or Firefox Add-ons: both store listings are on the way. - Buy at https://findutils.com/checkout/?app=devkit. - Get your key: it is shown when you have paid and emailed to you. - Paste it into the Activate screen in the extension. Use it in up to 3 browsers. ## Questions **Which browsers does DevKit run in?** Chrome and Firefox. Edge, Brave, Opera and Arc install the Chrome build. **Do I need an account?** No. You buy, get a key and paste it into the Activate screen. **Is it a subscription?** No. DevKit is $19.99 once, for life, with every tool and every update. **Is there a free trial?** No. The tools on findutils.com stay free to use in your browser, so you can try them there first. **Can I get a refund?** No. All sales are final. There are no refunds, except where the law requires one. The tools on findutils.com are free, so you can try them before you buy. **How many browsers can I use?** Up to 3 browsers per licence. **Where is my key?** It is shown as soon as you have paid, and emailed to the address you paid with. The page shows it for 24 hours; after that it is in your mailbox, and we can email it again. [Lost your key?](https://findutils.com/devkit/lost-key/) **What does DevKit send home?** Only the licence check: your key and a random browser id. There is no telemetry, and it works offline. **What does DevKit ask for when I install it?** Storage, activeTab, scripting and the right-click menu, plus the side panel on Chrome. Everything else is optional: the tool that needs it asks when you use it. **What does my agent get when I send a brief?** The page's address and title, your request, and for each element you pinned: its selector, its styles, its trimmed markup and visible text, and a picture of it. What was typed into form fields is left out. The agent picks the brief up when you ask it to; DevKit pushes nothing. **Can my coding agent change my pages?** Not by default. A new pairing can run DevKit's offline tools and read-only page tools, on a tab you approve. Only the "Use website tools (WebMCP)" scope, chosen when you pair, lets an agent use a site's own tools, and those may change things on that site. ## Terms - [Terms of sale](https://findutils.com/devkit/terms/) - [DevKit and your data](https://findutils.com/devkit/privacy/) More free tools: [all FindUtils tools](https://findutils.com/all-tools/).