biplbpepkeeigjeckbkehkpfcmepppgc
A floating console that captures logs, warnings, and errors. Drag to any corner for quick debugging without DevTools. Console Dock is a floating in-page console for developers. It captures console.log, warnings, errors, and other console output in real time, so you can debug without constantly opening DevTools. It is especially useful on small screens, during local development, or anytime you want the console to stay visible while interacting with your page. Click the floating dock button to open an embedded console panel directly inside your page. No tab switching. No DevTools overhead. KEY FEATURES - Floating dock button: move it to any corner of the screen - Embedded console panel: view logs directly inside your page - Resizable panel: adjust the console to fit your workflow - Live log counter: see log activity at a glance - Real-time console capture: captures logs, warnings, errors, and more - Lightweight UI: stays out of your way until you need it PRIVACY FIRST Console Dock runs entirely in your browser. No tracking. No data collection. No external requests. Your logs stay local and private. View the source code, report issues, or suggest features on GitHub: https://github.com/arsh-uppal/dev-dock UPCOMING FEATURES - Pretty-print objects - Filter logs by type: info, warn, error - Copy logs to clipboard - Additional tabs for Network and Storage - Built-in JavaScript runner EARLY STAGE NOTICE Console Dock is a lightweight debugging helper, not a replacement for Chrome DevTools. Use it for quick console checks during development. For advanced debugging, profiling, breakpoints, and deeper inspection, DevTools is still the right tool.
Dev Tools - Web Dev Tools Suite
Streamline your workflow with a powerful, all-in-one browser extension designed for developers, designers, and tech professionals. Access 40+ premium tools directly from your browser, all optimized for speed, privacy, and productivity. Comprehensive Toolset: Everything you need for coding, debugging, testing, and designing in one place. Offline Functionality: All tools work seamlessly without an internet connection, ensuring privacy and speed. Customizable Interface: Pin your favorite tools for quick access or hide unused ones to declutter your workspace. Modern Design: Intuitive UI with light/dark themes for a comfortable user experience. Privacy-First: All processing happens locally in your browser—your data never leaves your device. Regular Updates: New tools and features added based on user feedback. Free Forever: No ads, subscriptions, or hidden costs. 🛠️ Tools Included: Code Formatter: Beautify and format code with syntax highlighting. Code Snippets: Save and organize reusable code snippets. Minifier/Beautifier: Compress or beautify JavaScript, CSS, and HTML. Regex Tester: Test regular expressions with live highlighting. Diff Checker: Compare texts and highlight differences. HTML Previewer: Live preview HTML with CSS (JavaScript disabled). API & Network Tools: API Tester: Test REST APIs with various HTTP methods. WebSocket Tester: Test WebSocket connections. Speed Tester: Measure network speed and latency. Network Speed Monitor: Monitor real-time network speed. Data Tools: JWT Decoder: Decode and verify JWT tokens. Base64 Encoder/Decoder: Encode/decode Base64 strings. Hash Generator: Generate MD5, SHA-1, SHA-256, and other hash digests. UUID Generator: Generate unique identifiers. Utility Tools: Calculator: Basic and programmer calculator. Unit Converter: Convert between different units (length, weight, temperature, etc.). Timestamp Converter: Convert Unix timestamps. QR Code Generator: Generate QR codes from text. Password Generator: Create secure passwords. Lorem Ipsum Generator: Generate placeholder text for layouts. Page Performance: Analyze webpage performance metrics. SEO Analyzer: Analyze webpage SEO and accessibility. Meta Tags Manager: Generate and analyze HTML meta tags. Visual Tools: Color Picker: Pick colors from webpages. CSS Grid Generator: Create CSS grid layouts visually. Flexbox Generator: Learn and generate flexbox layouts interactively. CSS Extractor: Extract CSS from selected webpage elements. Viewport Measure: Measure pixel distances and dimensions on webpages. Element Inspector: Advanced element inspection with detailed properties. Storage Tools: Cookies Manager: View, edit, and manage browser cookies. LocalStorage Manager: Manage browser local storage data. SessionStorage Manager: Manage browser session storage data. IndexedDB Explorer: Browse and manage IndexedDB databases. Storage Analyzer: Analyze storage usage across all browser storage types. 🎯 Extra Features: Pin Tools: Keep your most-used tools at the top for quick access. Hide Tools: Customize your interface by hiding tools you don’t use. Search Functionality: Quickly find tools using the built-in search bar. Keyboard Shortcuts: Access tools faster with configurable shortcuts. Export Options: Save results or configurations directly to your local storage. 🔥 Why Choose This Extension? Designed for Developers: Tailored for frontend/backend developers, designers, DevOps engineers, and students. Boost Productivity: Eliminate repetitive tasks with one-click solutions. Chrome Guidelines Compliant: Fully adheres to Chrome Web Store policies for security and performance. 🚀 Get Started Today! Transform your browser into a professional development powerhouse. Install now and experience the ultimate toolkit for coding, debugging, and designing—all in one extension.
Code Runner
Run Code AnyWhere! Directly run the code on your page. 🚀Code Runner for Chrome: Multi-Language Execution Extension Instantly access, edit, and execute code directly in your browser — supporting C/C++, Java, Python, JavaScript, HTML, and over 70+ programming languages via JDoodle Compiler API integration. ∙ Dynamic I/O Support: Execute code and interact with programs in real-time. Input data directly into the results page and receive immediate output, ideal for testing algorithms, CLI tools, or debugging scripts. ∙ Python: Full support for input()and console output. ∙ JavaScript: Output routed to the browser’s console. ∙ Run code snippets without local compilers or IDE setups. Leverages cloud-based compilation for seamless execution. ⚠️ Technical Constraints 1. Entry-Point Requirement for Compiled Languages
Console Copy Tool
Automatically captures and copies formatted console messages from Chrome DevTools Console Copy Tool: AI-Ready Console Capture & Filter for Chrome DevTools Console Copy Tool captures all Chrome DevTools console output, auto-detects the [Tag] prefixes that AI coding assistants love to use, and lets you copy a filtered subset — formatted as clean plain text — with a single click. Built for the AI-assisted development workflow. When Claude Code, Cursor, GitHub Copilot, or Aider add debug console.log calls, they almost always prefix them with [Tag] — things like [Auth], [ApiClient], [CartReducer]. Console Copy Tool detects these automatically and turns them into clickable filter chips so you can scope captured output to the exact subset you care about before copying. - Auto-detected chips for [Tag], [Mod:Sub], [Tag1][Tag2] prefixes - Click chips to filter; multiple chips OR-combine - Free-text search with -foo to exclude matching messages - "Include untagged" toggle for mixed real-world output - Filter respects Copy All — you only copy what's visible - Light + dark theme follows your DevTools preference 🤖 Built for AI Debugging - AI-Ready Output: Clean plain text without emojis or formatting noise — drops straight into any LLM prompt - Tag-Scoped Copy: Send your assistant only the [Auth] logs, not the entire console - Source URLs and Line Numbers preserved on every captured entry for full context - Format-String Aware: correctly handles %c styled logs and CDP argument types - 5MB Clipboard Cap with control-character sanitization — safe to paste into terminals or chat without injection risks - console.log, console.info, console.warn, console.error, console.debug - Stack traces from console.trace, console.assert, and explicit Error objects - Uncaught JavaScript exceptions and unhandled promise rejections - Network errors, fetch failures, runtime warnings - Date / RegExp / Error objects rendered as their human-readable form - Toolbar popup — Start/Stop Recording, Copy Logs, Clear, with active-filter indicator - DevTools panel — full chip filter UI, search box, and message list - Right-click context menu — quick copy without opening anything 💻 Perfect For - Developers using Claude Code, Cursor, GitHub Copilot, Aider, or Windsurf - QA engineers attaching console output to bug tickets - Tech support staff capturing customer-reported console errors - Anyone debugging a complex issue and needing focused, copy-pasteable evidence - All capture is local-only — no network requests, no remote servers, no analytics - Captured messages live only in extension memory while a tab is open - Messages are deleted immediately when the tab closes - Host permission () is requested only when you click "Start Recording" — not at install - Clipboard output is sanitized to strip control characters and ANSI escape sequences - Open source under the MIT license Install Console Copy Tool and ship debugging context to your AI assistant in one click. Less noise, faster fixes.
Border Patrol – CSS Debugger & Element Outliner
CSS box model debugger & element outliner for fast UI inspection, layout visualization, and faster frontend development. Tired of guessing element boundaries and spacing? Border Patrol is the ultimate visual debugging tool that instantly reveals the structure and box model of any webpage! Inspect web layouts instantly! Visualize element spacing and structure with automatic CSS Box Model outlines. Border Patrol instantly highlights margins, borders, and padding, helping developers debug layout issues faster. Key Features: - Instant Visual Outlining: Apply color-coded outlines to every HTML element on a page with a single click or shortcut. See nested structures and element boundaries at a glance. - Visualize the Box Model: Clearly visualize element boundaries, margins, and padding, helping you understand element spacing and dimensions. - Detailed Element Inspector: Activate Inspector Mode and simply hover over any element on the page to view a real-time overlay displaying its tag name, precise dimensions (width x height), and computed border, margin, and padding styles. - Measurement Mode: Click any two elements to instantly measure the pixel distance between them. Selected elements are highlighted with a color-coded overlay, and a dashed connector line with the distance in px is drawn between them. Press Escape to reset. - Ruler Mode: Toggle a pixel ruler along the top and left edges of the page. Rulers display page coordinates (updated as you scroll), with tick marks every 50 px and labels every 200 px. A blush-colored crosshair line on each ruler tracks your mouse position in real time. - Customizable Appearance: Tailor the outlines to your preference by easily adjusting their size (from 1px to 3px) and style (solid, dashed, dotted, double) via the extension's intuitive popup menu. - Screenshot Capture: Capture screenshots of the page with Border Mode outlines applied. Choose between two modes: Visible & Full Page. - Right-Click Context Menu: Quickly toggle any mode directly from the browser's right-click context menu — no need to open the popup. - Dark Mode: Save your eyes by switching between Light and Dark mode in the popup menu. - Language Support: Currently supports translations for Spanish, French, and German. More to come... Why Border Patrol? - Accelerate Debugging: Pinpoint layout issues, unexpected spacing, and misaligned elements faster than ever before. - Master Page Structure: Gain immediate, clear insight into the DOM hierarchy and element nesting. - Streamline Collaboration: Enhance communication of layout problems by visually demonstrating element boundaries and spacing to your team. - Intuitive Inspection: Get critical box model properties directly on the page, reducing the need to constantly switch to browser developer tools. Perfect for developers, designers, and QA testers. Understand HTML structure at a glance, reveal element boundaries, and identify spacing problems without opening DevTools.
