DevLens - Ultimate Developer Toolkit

The ultimate browser-based OS for developers. Packs 32+ high-performance tools from CSS auditing, DOM inspection and many others, seamless sidebar to kill tab switching forever.

Comment

DevLens - Ultimate Developer Toolkit Chrome Extension

🚀 Elevator Pitch

DevLens is a powerful all-in-one Chrome extension that puts 32+ professional developer tools right in your browser. From CSS inspection and color extraction to AI-powered code assistance and screenshot annotation — everything you need is just one click away in a sleek, unified two-layer toolbar interface.

💡 Inspiration

As a web developer, I found myself constantly switching between browser DevTools, standalone applications, and various online utilities just to accomplish simple tasks. Need to pick a color? Open a color picker app. Want to analyze fonts? Use a browser extension. Debug responsive layouts? Toggle DevTools device mode. Extract all images from a page? Write a custom script.

The friction was real. Every context switch broke my flow. Every new tool meant another installation, another UI to learn, another workflow to memorize.

When the DeveloperWeek 2026 Hackathon kicked off on February 2nd, I saw the perfect opportunity to finally build the unified developer toolkit I'd been dreaming of. The "Kilo - Finally Ship It" challenge resonated with me — this was my excuse to turn my idea into reality.

I asked myself: What if all these tools lived in one place? What if they shared a consistent, beautiful interface? What if they actually worked together?

That's how DevLens was born — a unified toolkit built from scratch during the hackathon, shipping with 32 tools organized in an intuitive two-layer toolbar, plus a bonus clipboard tool for quick access.

🎯 What It Does

DevLens provides 32 professional tools plus a bonus clipboard tool, organized in a sleek two-layer bottom toolbar:

🔍 Inspect & Analyze Tools

  • CSS Inspector — Click any element to see its complete CSS cascade with green rulers and detailed styling information
  • Color Picker — Pixel-accurate color sampling with crosshair and magnifier for precise color extraction
  • Color Palette — Extract all colors used on a page, export as CSS/JSON/SCSS variables
  • Font Analyzer — Identify fonts used on any element with detailed font properties
  • Font Changer — Apply Google Fonts or custom fonts to the entire page in real-time
  • Spacing Tool — Visualize margin/padding of any element with visual overlays
  • Page Ruler — Measure distances between elements with pixel precision
  • Grid Overlay — Customizable alignment grid for pixel-perfect layouts
  • Page Outliner — Visual hierarchy of element structure and DOM tree
  • Site Stack / Tech Detector — Detect frameworks, libraries, analytics tools (1000+ technologies)

✏️ Edit & Modify Tools

  • Live Text Editor — Edit any text on the page in real-time, perfect for quick content previews
  • Element Deleter — Remove elements with click, with undo support for safety
  • Element Mover — Drag and reposition elements anywhere on the page
  • Clear Data / Reset Tool — Clean localStorage, sessionStorage, cookies, and cache
  • Unused CSS Remover — Identify and remove unused CSS rules to optimize stylesheets
  • Tailwind Converter — Convert existing CSS to Tailwind utility classes
  • RegEx Search & Replace — Powerful pattern-based text replacement across the page
  • Screenshot Lens — Capture full page or specific regions with annotation support

👁️ View & Utility Tools

  • Responsive Viewer — Preview pages at various breakpoints and device sizes
  • AI Gateway / Copilot — AI assistant with multi-provider support (OpenAI, Anthropic, Groq, etc.)
  • Translator Lens — Full-page AI translation powered by Cerebras/Groq
  • Annotation Studio — Add arrows, shapes, text, highlights, and blur effects to screenshots
  • SEO Inspector — Comprehensive on-page SEO analysis with recommendations
  • Page Speed Insights — Performance metrics and optimization suggestions
  • Network Inspector — Monitor and analyze network requests in real-time
  • Bug Snapshot — Capture and document bugs with context for easier debugging

🔧 Specialized Tools

  • Contact Scanner — Extract emails and phone numbers from any page
  • Page Ruler Lens — Advanced measurement tool with guides and snapping
  • Region Shot Lens — Region-specific screenshot capture with editing
  • Selective Viewer Lens — Isolate and inspect specific elements by type
  • Steal Stacks Lens — Export detected tech stack information for documentation
  • Asset Extractor — Extract all images, icons, and media assets from a page
  • Bug Snapshot Lens — Capture bugs with DOM state, console logs, and context

📋 Bonus Tool (Quick Access)

  • Clipboard Tool — Sits right above the CSS Inspector for instant access to clipboard history and quick copy/paste operations

🛠 How I Built It

Timeline: Built During the Hackathon (Feb 2 - Feb 20, 2026)

When i read the email newsletter about the hackathon, as i have the picture in my mind that i wanted to build one swiss army of chrome extension, so it started on February 2nd, I began with a clear vision and an aggressive development schedule:

  • Week 1 (Feb 2-9): Core architecture, Shadow DOM isolation system, base tool framework, and first 8 tools (CSS Inspector, Color Picker, Font Analyzer, etc.)
  • Week 2 (Feb 10-16): Expanded to 24 tools, built the two-layer toolbar UI, implemented AI integration with multiple providers, added annotation studio
  • Week 3 (Feb 17-20): Final 8 tools, polish and bug fixes, performance optimization, documentation, and submission preparation

Architecture Philosophy

The core challenge was building a toolkit that could work on any website without conflicts. I chose a closed Shadow DOM architecture to ensure complete isolation from host page styles and scripts.

Host Page DOM
└── <devlens-host> (custom element)
    └── #shadow-root (closed)
        ├── Design System CSS Variables
        ├── dl-overlay-container   ← Highlighting, rulers, selection boxes
        ├── dl-panel-container     ← Tool settings panels (340px wide)
        └── dl-tooltip-container   ← Hover tooltips

Two-Layer Toolbar Design

The toolbar features 16 tools on the top layer and 16 tools on the bottom layer, accessible via a subtle expand/collapse interaction. This keeps the interface clean while providing access to all 32 tools without overwhelming the user.

The bonus clipboard tool floats above the CSS Inspector for instant access — a design decision based on frequent use during development.

Technical Stack

Technology Purpose
TypeScript Strict typing for reliability and maintainability
Chrome Manifest V3 Modern extension architecture
Shadow DOM Complete style/script isolation from host pages
Vite Fast development and optimized production builds
Tailwind CSS Utility-first styling with custom design tokens
Canvas API Pixel-accurate color sampling for the color picker
Vercel Serverless Secure AI backend proxy for translation and copilot

Tool Lifecycle Pattern

Each tool follows a consistent lifecycle managed by a central host:

IDLE → mount() → MOUNTED → activate → ACTIVE → destroy() → IDLE

Only one tool can be active at a time (hot-swap pattern), ensuring clean state management and preventing resource conflicts.

AI Integration

The AI Copilot uses a BYOK (Bring Your Own Key) model supporting multiple providers:

  • OpenAI (GPT-4, GPT-3.5)
  • Anthropic (Claude)
  • Google Gemini
  • Groq (Llama, Mixtral)
  • OpenRouter
  • Local models

All AI calls use SSE streaming for real-time token delivery, providing a responsive chat experience.

🧗 Challenges I Faced

1. Shadow DOM Event Propagation

Events don't naturally bubble out of closed Shadow DOMs. I had to implement a custom event retargeting system to allow tools to communicate with the page context when needed.

2. Pixel-Perfect Color Sampling

Getting accurate colors from Canvas required handling device pixel ratios, transparent backgrounds, and browser anti-aliasing. The solution involved a magnifier overlay that samples actual rendered pixels.

3. Tech Stack Detection Engine

Building a detection engine that recognizes 1000+ technologies required extensive pattern matching for framework signatures, script sources, meta tags, and global objects.

4. Cross-Origin Restrictions

Chrome's security model prevents direct API calls from content scripts. I built a Vercel serverless proxy to handle AI API calls securely, keeping API keys server-side.

5. Performance on Complex Pages

Some modern SPAs have thousands of DOM elements. I implemented lazy loading for tool panels and efficient mutation observers to keep DevLens responsive even on heavy sites.

6. Two-Layer Toolbar UX

Designing an intuitive two-layer toolbar that doesn't confuse users took multiple iterations. The final design uses subtle visual cues and smooth animations to indicate the layer switch.

7. Building 32 Tools in 18 Days

The biggest challenge was scope management. I had to prioritize core functionality, reuse components across tools, and maintain consistent quality while racing against the deadline.

📚 What I Learned

  1. Shadow DOM is powerful but tricky — It provides excellent isolation but requires careful event handling and focus management.

  2. Chrome Extension security is complex — Manifest V3's service worker model and CSP restrictions required rethinking how to handle external API calls.

  3. Developer experience matters — Building tools for developers means they notice every UX detail. The purple theme, consistent panel layouts, and keyboard shortcuts all came from dogfooding during development.

  4. AI integration at the edge — Streaming responses in a browser extension requires careful handling of SSE events and state management.

  5. Shipping under pressure — Building 32 tools in 18 days taught me to prioritize ruthlessly, reuse code effectively, and know when a feature is "good enough" to ship.

🏆 Accomplishments I'm Proud Of

  • 32 fully functional tools plus a bonus clipboard tool built from scratch during the hackathon
  • Two-layer toolbar design that keeps the interface clean while providing maximum functionality
  • Zero conflicts with host pages thanks to Shadow DOM isolation
  • AI-powered features with secure, serverless backend
  • Consistent design system with purple branding across all tools
  • Shipped on time — From idea to 32 tools in 18 days

🚧 What's Next

  • Chrome Web Store launch — Publish publicly for all developers to use
  • Light/Dark theme toggle with system preference detection
  • Custom keyboard shortcuts for power users
  • Settings sync across devices via Chrome storage
  • Performance optimizations for enterprise-scale websites
  • Additional tools based on user feedback

🤝 Try It Out

DevLens is demonstrated in the video and screenshots provided. The extension will be available on the Chrome Web Store soon!

📄 License

Proprietary — All rights reserved.

🏅 Built For

This project was built for DeveloperWeek 2026 Hackathon (Feb 2 - Feb 20, 2026) and submitted to:

  • Overall Winner — Progress, Concept, Feasibility
  • Kilo - Finally Ship It — "That side project i have been sitting on.

🛠 Built With

  • TypeScript — Primary programming language
  • Chrome Extensions Manifest V3 — Extension platform
  • Shadow DOM — UI isolation technology
  • Vite — Build tool and dev server
  • Tailwind CSS — Styling framework
  • Canvas API — Pixel manipulation for color picker
  • Vercel Serverless Functions — AI backend proxy
  • SSE (Server-Sent Events) — AI streaming responses
  • Wappalyzer Patterns — Tech stack detection logic
  • Google Fonts API — Font preview and loading

DevLens — Because developers deserve better tools. 🚀

Built With

Share this project:

Updates