DevToolkit - All your developer tools, one click away

DevToolkit, 60+ developer tools in one click, screenshot, CSS inspector, SEO audit, responsive, cookie editor, font detector & more.

DevToolkit - All your developer tools, one click away A browser extension built for web developers, designers, and digital agencies. DevToolkit brings 60+ essential tools into a single popup — no new tabs, no logins, no juggling multiple extensions. 🏆 Everything You Need, Right in Your Browser DevToolkit replaces a drawer full of separate tools with one lightweight extension that opens in a single click. Free tools for everyday work, and a Pro upgrade for specialist workflows. 📸 Full Page Screenshot Capture complete full-page screenshots of any website. Export as PNG or JPEG with custom scale, optional fixed element hiding, and custom filename templates. 🎨 Color Picker Sample any color from any webpage and copy instantly as HEX, RGB, HSL, or HSV. Includes color history and one-click copy for any format. 🔍 CSS Inspector Hover over any element to inspect its full computed CSS — box model, typography, colors, flexbox, grid, and effects. Includes a Complete CSS tab to copy the entire CSS block in one click. Now includes Page Design Summary — scan any page to extract its full color palette as clickable swatches and a complete typography map showing every font family, size range, and weights in use. 📦 Asset Downloader Discover and download all images on a page including lazy-loaded assets. Filter by size and type, then download individually or in bulk. 🐛 Debug Panel Clear cache, localStorage, sessionStorage, and IndexedDB with one click. Inject custom CSS or JavaScript for instant testing. Includes an image performance auditor. 🔎 SEO Audit with AI Integration Get an instant on-page SEO report for any page you visit. It checks your meta title and description, heading structure, canonical tags, and robots directives, then reviews social sharing tags, structured data, image alt text, and internal and external links. Core Web Vitals are included too, and you can export the full report as a PDF with one click. 🧱 Sitestack — Technology Detector Identify the CMS, frontend framework, CDN, hosting provider, analytics tools, and SSL status of any website. Invaluable for competitive research and pre-sales discovery. ⏰ Task Reminders Built-in task manager with scheduled desktop notifications. Reminders fire even when the popup is closed. ✏️ Edit Mode Switch any webpage into a live editable document with one click. Click any text to edit it directly in the browser — ideal for content proofing, design reviews, and client demos. 🔒 Site Lock Lock any website behind a 4-digit PIN to prevent casual access. Supports a Lock Now button, per-session memory, and instant unlocking on return visits. 🔡 String Tool See live text statistics as you type, including word, character, sentence, and paragraph counts, plus estimated reading time. Convert text between common cases like UPPERCASE, camelCase, and kebab-case, sort or reverse lines, and remove duplicates. Find & Replace supports regex, and built-in limit bars show how your text fits within Twitter, LinkedIn, and meta description length limits. ⛶ QR Code Generator Generate QR codes for URLs, contact cards, WiFi logins, and more. Customize each one with a logo, color, and style, then download as PNG or SVG, copy it to your clipboard, or save it as a reusable preset. 🌍 World Clock Track global time zones with a smart world clock built for international workflows. Drag the interactive time slider to compare cities at a glance, switch between 12 and 24-hour formats, and see UTC offsets, daylight saving info, and whether a location is currently within working hours. 📖 Reader Mode Turn cluttered webpages into a clean, distraction-free reading experience. Customize themes, fonts, font size, spacing, and content width. Save articles to your reading list, export content as PDF, or listen using the built-in read aloud feature. 🌙 Dark Mode Enable dark mode on any website instantly for a more comfortable browsing experience. Reduce eye strain during long sessions with a cleaner, darker interface across your favorite websites. 💚 Wellness Breaks — Developer Health Reminders DevToolkit is the only browser developer tool with built-in developer wellness support. Long coding sessions cause eye strain, back pain, repetitive stress injuries, and chronic fatigue. Wellness Breaks fights this with 13 science-backed health reminders that fire as desktop notifications while you work — no apps to install, no timers to set. Eye care reminders: 20-20-20 Rule, 20-20-20-20 Rule, Blink Reminder, Dry Eye Relief, Palming. Posture & body reminders: Posture Check, Shoulder Relax, Wrist Stretch, Neck Stretch. Movement reminders: Walk Break. Focus reminders: 50-10 Break, 1-Hour Screen Break. Hydration reminders: Hydration Reminder. Also includes 6 setup tips for screen distance, screen height, brightness matching, night mode, outdoor time, and pre-sleep screen habits. Choose between desktop notification or full-screen break overlay. Four overlay styles: Classic, Pulse, Frosted, and Gradient. All reminders are free — because every developer deserves to stay healthy. 🔒 Pro Features: 📐 Responsive Preview View any website in live, interactive iframes at Mobile, Tablet, and Desktop breakpoints side by side. Add custom device sizes, rotate portrait/landscape, sync scroll across frames. 🔤 Font Detector & Downloader Discover every font actively rendering on a page — Google Fonts, custom fonts, and system fonts. Download font files directly from the extension. 📧 Email Finder Extract all publicly visible email addresses from any page. Deep scan mode checks /contact, /about, /team, and other sub-pages. Export as CSV or plain text. 🍪 Cookie Editor Full cookie management: view, create, edit, and delete cookies with all attributes. Import and export in JSON, Netscape, or HTTP Header format. 🚫 Element Remover Hide, remove, or blur any element on a page — banners, popups, cookie notices, or navigation you don't want. Target elements with CSS selectors, undo changes anytime, and export your hidden-element rules as a CSS file. 📋 Content Extractor Extract text, links, images, headings, tables, meta data, or any custom CSS selector from any page. Export as JSON, CSV, or plain text. 🖼️ Mockup Generator Turn any webpage screenshot into a polished device mockup for client presentations and portfolios. Five presentation styles with background options and PNG export. 📏 Ruler & Measurement Measure any element or distance on any page with pixel precision. Four measurement modes: Line, Box, Element, and Distance. 🔗 Open Links in New Tabs Scan, filter, and preview all links on a page, then open them in new tabs at once. Includes scope filters, delay between tabs, and a confirmation step before opening. ✂️ Easy Copy Click any link, button, dropdown, or navigation item to copy its text without triggering navigation. Includes hover mode, copy history, and URL copy on right-click. ⌨️ Dev Formatter A dedicated panel for everyday encoding and formatting tasks. Format and highlight JSON, decode JWTs with expiry detection, and convert between URL, Base64, and HTML entity encoding. Generate UUIDs, hash text with MD5 or SHA, convert numbers between decimal, binary, hex, and octal, and clean up CSS — all without leaving your browser, since everything runs locally. 📊 UTM Builder Create trackable marketing URLs in seconds. Generate UTM links with source, medium, campaign, term, and content parameters. Use quick templates, save presets, and build consistent campaign tracking URLs faster. 📝 Sticky Notes Attach personal notes directly to any website. Add page-specific reminders, ideas, and feedback with custom note colors. Your notes stay connected to the website so they are available whenever you return. 🧩 Layout Tools Visualize and analyze webpage layouts instantly with a box model inspector, element outlines, and flex/grid highlighting. Column grids, a breakpoint indicator, and an element navigator round out the set, making it easy to understand spacing, alignment, and page structure. ✨ Visual Editor Edit any website visually without touching code. Modify text, replace images, adjust fonts, change sizes, update colors, and experiment with design changes directly on the page. Export your edited view as PDF when needed. 🗂️ Tab Manager Take control of your browser tabs with advanced tab organization. Search tabs, group by domain, close duplicates, manage active sessions, save sessions, and restore your workflow anytime. ♿ Accessibility Checker Analyze website accessibility and find improvement opportunities. Check WCAG issues, color contrast, images, page structure, forms, and interactive elements with clear suggestions to build more accessible websites. ⚡ API Tester Test APIs directly from your browser. Send GET, POST, PUT, DELETE, and other requests, configure headers, authentication, body data, and parameters. Inspect responses, manage variables, and save requests for faster debugging. 🔄 Difference Checker Compare text, code, or content changes instantly. View clear differences, detect additions and removals, and review modifications with an easy side-by-side comparison tool. NEW in v3.2: AI-Powered SEO & Accessibility Suggestions DevToolkit now includes built-in AI assistance for two of its most-used tools. Run an SEO audit and get AI-generated suggestions for your page title, meta description, and content — instantly turning raw audit data into copy you can ship. Run an Accessibility audit and get prioritized, WCAG 2.1 AA-referenced fix recommendations for contrast errors, missing alt text, unlabeled form fields, heading structure, and more. Choose your own AI provider — OpenAI (GPT-4o-mini), Anthropic (Claude Haiku), or Google Gemini (Gemini Flash) — using your own API key. Your key is stored locally on your device only; it's never synced or sent anywhere except the provider you choose. No extra subscription, no data collection, no black-box AI — just faster SEO and accessibility fixes powered by the model you trust. ✅ Why Choose DevToolkit 👉 60+ tools in a single popup — no tab switching 👉 Free tools without any account or payment 👉 Built-in developer wellness reminders — eye care, posture, hydration, movement 👉 All processing runs locally — no data collected or transmitted 👉 Built on Chrome Manifest V3 — modern, secure, and future-proof 👉 Works on Chrome and Microsoft Edge 🎯 Built For 👉 Frontend developers inspecting, debugging, and auditing websites 👉 Designers working with layouts, colors, typography, and spacing 👉 SEO professionals reviewing page structure and on-page signals 👉 Freelancers and agencies managing client websites 👉 Anyone who wants a faster, cleaner development workflow 👉 Developers who care about their long-term health and screen habits 💬 Frequently Asked Questions Is DevToolkit free? DevToolkit has a permanently free tier with 16+ tools available at no cost, no account required. A one-time Pro upgrade unlocks 19+ additional specialist tools including Dev Formatter, Responsive Preview, Font Detector, Cookie Editor, and more. Does it work on all websites? DevToolkit works on the vast majority of modern websites. Some tools that require script injection may not function on sites with strict Content Security Policies, such as certain banking or high-security platforms. Is my data safe? Yes. DevToolkit does not collect, transmit, or sell any personal data. All tools run entirely inside your browser. No account or sign-in is ever required for any feature. How do I activate Pro? After purchase you receive a licence key by email. Enter it in DevToolkit → Settings → Licence and click Activate. Pro features unlock instantly. Does Wellness Breaks require any permissions or accounts? No. Wellness Breaks uses Chrome's built-in alarm and notification system. No external service, no account, no data collection. Your health reminders stay completely private.