DevSuite Pro

64+ powerful developer tools in one extension — inspect, measure, capture, analyze & design

DevSuite Pro: The Ultimate All-in-One Developer Toolkit, Web Dev Kit & Design Suite (64 Tools in 1 Chrome Extension) Stop installing dozens of single-purpose extensions to inspect elements or test responsive layouts. DevSuite Pro is the ultimate all-in-one web developer toolkit and front-end design Chrome extension. It packs 64 professional tools — for inspection, design, capture, layout, debugging, formatting, and conversion — into one fast, privacy-friendly extension for everyone who builds, designs, tests, or audits modern websites. Inspect and edit live styles, modify any page in place, take full page screenshots, download all images and vector assets, audit on-page SEO, run accessibility and color-contrast checks, format and validate structured data, decode authentication tokens, generate passwords and unique IDs, preview mobile and tablet views side by side, convert any webpage to PDF, monitor network traffic, force dark mode, edit cookies, and far more — all from a clean popup and a draggable on-page dock. 💾 AUTO-SAVE: PERSISTENT EDITS PER SITE Six tools auto-save your changes per URL and re-apply them on every visit — even after closing and reopening the browser. A true permanent webpage customizer: • CSS Inspector — live CSS edits persist across reloads • Move Element — repositioned elements stay in place • Delete/Hide Element — hidden ads, popups & banners stay hidden forever • Image Replacer — swapped images remain replaced • Fonts Changer — your chosen typeface re-applied automatically • Live Text Editor — edited copy persists across sessions ═══ 🎨 INSPECT, EDIT & REPLICATE ═══ 1) CSS Inspector [FREE] — Hover any element to view and edit its styles live. See computed values, the box model, padding, margin, typography, and custom properties. Edits auto-save per site and re-apply on every visit. 2) Animation Inspector [PRO] — Detect every animation, transition, and @keyframes rule on a page. Slow down, pause, replay, and scrub motion frame by frame. Inspect duration, easing, delay, and animation-name to debug janky transitions. 3) Copy as Tailwind [PRO] — Right-click any element to convert its computed styles into ready-to-paste utility classes. Useful for design rebuilds, framework migrations, and learning by example. 4) Outline Only Mode [FREE] — Apply a 1-pixel outline to every element. Show borders on all elements, visualize the page wireframe, debug layout issues, and find hidden div boundaries instantly. 5) Tailwind Helper [PRO] — Hover any element to see its utility-class equivalent with breakpoint and dark-mode variants. Built-in searchable cheat sheet for spacing, colors, typography, flex, and grid. 6) Page Outliner [FREE] — Renders the full DOM tree as an interactive outline. View document structure, see element hierarchy, and navigate any production site's markup. 7) Component Detector [PRO] — Detects which JavaScript framework or component library powers any page. Identify the framework a site uses without inspecting source code. 8) Move Element [PRO] — Drag any element to a new position visually. Change page layout without code, reposition headers, sidebars, and hero sections. Moves auto-save per site and persist across browser restarts. 9) Delete / Hide Element [FREE] — Click any element to remove or hide it. Block ads, dismiss cookie banners, suppress popups, hide sticky headers. Hidden elements stay hidden forever on that site, even after browser restart. 10) Export Element [PRO] — Export any element's markup, computed styles, and structured data in one click. Save clean UI snapshots for snippet libraries and design system documentation. 11) Copy Component Code [PRO] — Convert any element into ready-to-paste component code for popular JavaScript frameworks. Replicate UI patterns from production sites without manual rewriting. 12) DOM Path Finder [PRO] — Hover any element to get its CSS selector, full XPath, and querySelector snippet. Generates selectors for browser test automation frameworks. ═══ 📸 CAPTURE & ASSETS ═══ 13) Screenshot [FREE] — Capture the visible viewport, the entire scrolling page, or a single element. Smart scroll capture handles tall pages, infinite scroll, and lazy-loaded content. No watermarks. 14) Extract Images [FREE] — Download all images from a website in one click. Filter by size, format (PNG, JPG, GIF, WebP, SVG), and bulk-download as ZIP. 15) SVG Grabber [PRO] — Find every SVG icon and inline vector on a page. Preview, copy SVG code, optimize, or download as SVG/PNG. The fastest way to grab SVG icons and vector logos from any website. 16) Image Replacer [PRO] — Replace any image on the live page with a local file or URL. Replacements persist per site (see auto-save section above) — perfect for client mockups. 17) Convert to PDF [FREE] — Save any webpage as a clean PDF with auto-hide ads, force-light theme, and custom paper size. Save articles for offline reading, generate invoices, and print webpages cleanly. ═══ 📐 LAYOUT & MEASUREMENT ═══ 18) QR Code Generator [FREE] — Turn the current URL into a scannable QR code. Customize size and content (URL, text, Wi-Fi, vCard) and download as PNG. 19) Page Ruler [FREE] — Draw pixel-perfect rulers and guide lines on any page. Measure pixels on a website with horizontal, vertical, and diagonal guides. 20) Responsive Viewer [PRO] — See your site rendered side by side across common mobile, tablet, and desktop viewport sizes simultaneously, plus any custom dimensions you define. Sync-scroll all viewports together. 21) Measure Distance [FREE] — Click any two elements and instantly see the X, Y, and diagonal pixel distance between them with on-page connection lines. 22) Z-Index Inspector [PRO] — Visualize every stacking context and z-index layer. Diagnose hidden modals, broken dropdowns, and tricky stacking-context bugs. 23) Grid / Flex Visualizer [PRO] — Inspect every Grid and Flexbox container with colorful overlays showing track lines, gaps, alignment axes, and child sizing. ═══ 🔍 ANALYSIS & DEBUGGING ═══ 24) Heatmap Simulator [PRO] — Generate a predicted user-attention heatmap for any page based on F-pattern reading and visual hierarchy research. UX heatmap analysis without third-party scripts. 25) Clear Browsing Data [FREE] — Selectively clear cache, cookies, localStorage, and sessionStorage for the current site only — without affecting your logins on other sites. 26) Site Stack (Tech Detector) [PRO] — Identify the complete technology profile of any website — frontend framework, CMS or e-commerce platform, CDN and hosting, analytics and marketing tools, UI libraries, and build tools, all categorized in one panel. 27) SEO Inspector [FREE] — Comprehensive on-page SEO audit: title, meta description, H1–H6, OpenGraph, Twitter Card, canonical, robots, alt text, link analysis. Preview how your page looks on Google and social media. 28) Accessibility Inspector [PRO] — Automated WCAG 2.1 Level AA audit. Detects contrast issues, missing alt text, ARIA problems, missing form labels, and absent landmarks for ADA, EAA, and Section 508 compliance. 29) Network Monitor [PRO] — Capture every fetch, XHR, and AJAX request with method, status, headers, payload, response, and timing. Main-world injection captures requests DevTools sometimes misses. 30) WebSocket Inspector [PRO] — Capture every WebSocket frame in real time — direction, payload, timestamp, size. Debug Socket.io, chat apps, real-time dashboards, and multiplayer games. 31) Broken Link Checker [PRO] — Scan the entire page for broken hyperlinks (404, 500, DNS, timeouts) and report HTTP status codes for every anchor. 32) Broken Images [FREE] — Scan and flag every image that fails to load (404, missing src, DNS, CORS) and highlight them on the page. 33) CORS Checker [FREE] — Test cross-origin requests and inspect CORS headers. Diagnose "blocked by CORS policy" errors with full request and OPTIONS preflight detail. ═══ 🅰️ DESIGN & TYPOGRAPHY ═══ 34) Live Text Editor [FREE] — Click any text on any page to edit it in place. Edit headlines, paragraphs, button labels. Changes persist per site across browser restarts. 35) Fonts Changer [PRO] — Replace any typeface with one from 1,500+ Google Fonts — globally or per-element. Your font choice is remembered per site across visits. 36) List All Fonts [FREE] — Discover every font used on a page — web fonts, system fonts, weights, and styles. Find what font a website is using and copy its font-family declaration with one click. 37) Color Picker [FREE] — Pixel-precise eyedropper. Pick colors from text, backgrounds, images, gradients, and SVGs. Outputs HEX, RGB, and HSL with a magnified zoom preview and color history. 38) Color Palette [FREE] — Extract the full color palette from any webpage with frequency-sorted swatches and HEX values. Get the color scheme of any site or brand. 39) Color Format Converter [FREE] — Translate any color across every CSS color format from one panel. For example, paste #FF5733 and instantly see it rendered as rgb(255, 87, 51), rgba(255, 87, 51, 0.8) for transparency, hsl(11, 100%, 60%) and hsla(...) for hue-based editing, hsv(11, 80%, 100%) for design tools, and oklch(64% 0.21 32) for wide-gamut displays — each with its own one-click copy button. Pick from the native color picker or drag the channel sliders and every value updates live. 40) Image Color Extractor [FREE] — Extract the dominant color palette from any image. Generate color schemes from photos and hero images. ═══ ⚡ TOGGLES & PAGE UTILITIES ═══ 41) Force Dark Mode [FREE] — Apply a comfortable dark theme to any website. Force dark mode on any site, enable night mode, and reduce eye strain. Intelligent inversion preserves images and brand colors. 42) Toggle JavaScript [FREE] — Enable or disable JavaScript per tab in one click. Test no-JS rendering, verify SSR output, and see what search crawlers see. 43) Cookie Editor [FREE] — Full cookie management: view, create, edit, delete, import, and export cookies for the current site. Manage browser cookies and debug auth flows. 44) Console Logger [FREE] — Inline viewer for console.log, warn, and error directly on the page. View console output without DevTools — great for mobile debugging. 45) Local Storage Editor [FREE] — View, edit, add, and delete localStorage and sessionStorage entries. Debug feature flags, A/B tests, and client-side state. 46) Page Performance [FREE] — Instant timing metrics, resource breakdown, DOM stats, and an overall health score. Quick page-speed checker without a full Lighthouse audit. ═══ ⚙️ FORMATTERS, CONVERTERS & GENERATORS ═══ 47) JSON Formatter [FREE] — Beautify, minify, validate, and view structured data in a collapsible tree with syntax error detection. Pretty-print, fix, and inspect any JSON payload. 48) Base64 Encoder/Decoder [FREE] — Encode any text to Base64 or decode Base64 back. UTF-8 and binary support, one-click bidirectional conversion. 49) URL Encoder/Decoder [FREE] — Encode special characters into percent-encoded URL-safe strings or decode them back. Fix broken query strings and prepare API requests. 50) HTML Entity Encoder [FREE] — Convert special characters (&, <, >, ", ') to named or numeric entities, or decode them back to readable text. Safe output for templates and user-generated content. 51) Backslash Escape [FREE] — Escape and unescape backslash sequences (\\n, \\t, \\", \\\\). Essential for string literals, regex patterns, and code generation. 52) Image ↔ Base64 [FREE] — Convert any image (PNG, JPG, GIF, SVG, WebP) into a Base64 data URL or paste Base64 to download an image. Inline images directly in stylesheets and templates. 53) JWT Debugger [FREE] — Decode and inspect bearer tokens. View header, payload, and signature in a clean tree. Verify expiration, issuer, and other standard claims. 54) UUID Generator [FREE] — Generate v4 UUIDs (RFC 4122) one at a time or in bulk. Cryptographically random, copy-ready GUIDs for databases and tests. 55) Hash Generator [FREE] — Generate MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes from any text. Calculate checksums and cryptographic digests. 56) Password Generator [FREE] — Generate cryptographically secure random passwords with custom length, character sets, and exclusions. Strong passphrases for new accounts and API keys. 57) Regex Tester [FREE] — Test regular expressions with live match highlighting, capture groups, and full flag support (g, i, m, s, u, y). Built-in cheatsheet. 58) Timestamp Converter [FREE] — Convert between Unix timestamps (seconds and ms), ISO 8601, RFC 2822, and human-readable dates with timezone support. 59) Diff Tool [FREE] — Compare two text blocks line by line with color-coded additions, deletions, and edits. Diff API responses, config files, code snippets, and copy variations. 60) Contrast Checker (WCAG) [FREE] — Check WCAG contrast ratios with AA and AAA pass/fail grading for text and UI components. Live preview with adjustable colors. 61) CSV ↔ JSON [FREE] — Convert between CSV and JSON in either direction. Auto-detects headers, supports custom delimiters, handles nested structures. 62) XML Formatter [FREE] — Beautify, minify, and validate XML. Format SOAP, RSS, sitemaps, and any XML-based payload. 63) SQL Formatter [FREE] — Beautify and indent SQL queries across common database dialects. Turn one-liner queries into clean, reviewable code. 64) Form Filler [PRO] — Auto-populate any form with realistic test data — names, emails, phones, addresses, dates, test credit cards, Lorem Ipsum. Save hours during QA and prototype demos. ═══ 🚀 FREE vs PRO ═══ ✅ FREE FOREVER — 43 essential tools (Color Picker, Screenshot, JSON Formatter, SEO Inspector, Cookie Editor, Page Ruler, Convert to PDF, and more). ⭐ PRO — Unlock 21 advanced tools (Tailwind Helper, Responsive Viewer, Component Code Copier, Network Monitor, Heatmap Simulator, Form Filler, and more). ═══ 🔒 PRIVACY FIRST ═══ DevSuite Pro runs securely within your Chrome browser. No telemetry, no analytics, no third-party tracking SDKs. Your local code, screenshots, JSON files, regex inputs, API tokens, and cookies never leave your machine. License validation only sends your license key — never page content or browsing his ==> Permissions Used in Extension To provide a powerful suite of developer and designer tools, DevSuite Pro requires specific browser permissions. Below is a brief explanation of why each is used: Core Performance • scripting & host_permissions (<all_urls>): Necessary to inject our tool logic and user interface directly into the websites you visit. Also used to install the Network Monitor and WebSocket Inspector interceptors in the page's main-world JavaScript context. • activeTab: Allows the extension to interact with only the page you are currently viewing when you open the popup or dock. Tool Functionality • cookies: Used by the Cookie Editor to view, add, or delete site cookies. • browsingData: Used by the Clear Browsing Data tool to clear cache/cookies for the current website. • downloads: Enables saving screenshots and extracted images or SVGs to your computer. • clipboardWrite: Allows you to copy CSS classes (like Tailwind), HTML snippets, color values, formatted JSON/SQL/XML, and other tool outputs instantly. User Experience • storage: Saves your tool favorites, UI settings (theme, dock position), and your Pro license key locally. • contextMenus: Adds helpful right-click shortcuts, such as "Copy as Tailwind" or "Inspect Element". • notifications: Displays helpful status alerts (e.g., "Screenshot Ready" or "License Activated"). • management: Used to verify the extension version and status to ensure compatibility.