edfjnadfiapmddgplgnphlflgafmcino
Developer tool for inspecting, testing, and debugging WebMCP tools WebMCP Inspector is a developer-focused Chrome extension that makes WebMCP tooling visible and actionable inside the browser. It detects WebMCP APIs on the current page, lists available tools, shows input schemas, and lets you execute tools instantly with JSON inputs. You can also use AI chat (Gemini, OpenAI, Anthropic, or Ollama) to run multi-step tool workflows faster. Build and debug WebMCP integrations without guesswork Validate tool schemas and arguments before production use Quickly reproduce and diagnose tool execution issues Refresh and inspect dynamically registered tools in real time Speed up testing with both manual and AI-assisted execution in one UI If you’re building WebMCP-enabled apps, this extension gives you a practical inspector and test bench directly in Chrome.
Screen Ruler - Measure and Inspect the Web
Web inspector for designers & developers. Measure elements, extract CSS & colors, capture screenshots & more. Screen Ruler is the perfect companion for web developers and designers wanting to validate the implementation of their websites. Once activated, it allows you to view the sizes, margins, paddings, tag names, IDs, and classes simply by hovering over any web content. You can also select an item to measure distances to others. - Toggle the extension by clicking the icon, selecting from the right-click context menu, or using the shortcut `Alt/Option + Shift + R`. - Hover over items on web pages to display their sizes, margins, paddings, tag names, IDs, and classes. - Select an item by clicking on it directly; this will turn the highlight red. To deselect, click again, press Escape or select a different item. - To select the parent, use `Alt/Option + Up`. Use `Alt/Option + Down` to reverse your selection. - View the computed CSS of the currently selected item in the side panel. Click the "Copy CSS" button to copy the computed CSS to your clipboard. - Measure the pixel size of any element. - Measure the pixel distance between any two elements. - HTML tag names, class names and IDs. - Parent/child selection shortcuts. - Responsive selections resize with your browser window. - Access from the context menu. - Computed CSS inspect. - Copy CSS to clipboard. - Page rulers for precise measurements (horizontal and vertical guides with crosshair). - Color picker tool to sample and copy colors from anywhere on the page. - Element Screenshots: Capture cropped screenshots of selected items using `Ctrl/Cmd + Shift + S`. - Accessibility Issues: Automatically detect and highlight WCAG contrast failures in your selection with actionable recommendations. - Works on any web page. - Customize keyboard shortcuts by visiting `chrome://extensions/shortcuts`. Screen Ruler PRO A PRO tier is also available which unlocks additional features. - Floating Inspector: See detailed properties when you hover, including position, size, rendered font, colors and more. - Responsive Mode: Test your designs across different device viewports with an interactive device emulator and custom dimensions. - Box Shadow Visualization: Interactive breakdown of multi-layer box shadows with an exploded view. - Animation Analysis: Visualize CSS animation timing curves and copy animation properties. - Asset Extraction: Extract and download images, SVGs, and vector assets. - Color Extraction: Extract and copy color palettes from selected content with hex, RGB, and HSL values. - Layout Grid Overlay: Overlay a customizable layout grid for perfect design alignment. - CSS Selector Search: Find and highlight items using CSS selectors. - Typography: Analyze and extract all typography styles used in your selection. - X-Ray Mode: Reveal the underlying structure of the page by outlining all content. PRO requires a one-off payment for lifetime access. Made For - Developers: Spot layout issues or identify alignment problems. Whether you're tweaking margins and paddings, or just making sure everything lines up correctly, this tool becomes an indispensable addition to your development toolkit. - Designers: Ensure your designs have been implemented with pixel-perfect accuracy. It acts as a bridge between design and development, allowing you to check if every component aligns exactly as you intended. - Designed specifically for stability in Google Chrome 116+. - Installable on any Chromium browser; however, for the best experience, make sure your browser supports all the required APIs (like Side Panel and Offscreen). If there are any issues with installation, update your browser to the latest version and try again.
Ember Inspector
Tool for debugging Ember applications. The Ember Inspector is a plug-in for the Chrome developer tools that makes understanding and debugging your Ember.js application a snap. After installing this extension, you'll be able to easily: - View all of the routes defined in your application. - Reference Ember's naming conventions for your URLs, including what to name your controllers, templates, routes and more. - Overlay your application with information about what templates, controllers, and models are currently being rendered. - Inspect the objects in your application, such as models and controllers, with UI that fully supports Ember features such as bindings and computed properties. - Make your application's objects available in the console as the $E variable. - If you're using Ember Data, see all of the records that have been loaded. The Ember Inspector is an open source project maintained by the Ember.js community. The source code is available for download at https://github.com/emberjs/ember-inspector.
CSS Pro Editor & Debugger
Visual CSS styling and debugging tool for developers. CSS Pro Editor is the ultimate visual styling tool for developers and designers. Forget inspecting elements and manually typing CSS values. With CSS Pro, you just click an element and edit it visually. 🚀 Why CSS Pro is Different? Most "inspector" tools in the store are read-only or require you to write raw code. CSS Pro is a full Visual Editor. It's like having Figma or Webflow tools directly inside your browser, working on any live website. ✨ Key Features 👆 Click & Edit Select any element on the page and change its color, font, size, spacing, and more with a simple visual interface. 📦 Computed Box Model (NEW) Visualize margins, borders, and padding instantly. See the exact computed pixel values for every layer of your element. 💎 Glassmorphism (Instant frosted glass effect) ☁️ Neumorphism (Soft, extruded shadows) 📏 Debug Redline (Instantly outline all elements) 🃏 Card Shadows (Beautiful, elevated dropshadows) 📐 Layout Engine Debug Flexbox and Grid layouts efficiently with visual alignment controls (Start, Center, End, Space-Between). 📋 One-Click Copy Happy with your changes? One click copies the clean generated CSS code to your clipboard, ready to paste into your project. 100% Offline: We don't send data to any server. No Tracking: Your usage is completely private. Lightweight: Zero impact on page load speed. Perfect for: Designers: Test fonts and colors on live sites. Developers: Debug layout issues in seconds. Students: Learn how CSS works by interacting with it. Try CSS Pro Editor today and design the web at the speed of thought! ⚡
Inspecta - visual QA and CSS editor
Inspect, compare and update CSS visually 🛠 Inspecta – Find and Fix UI Bugs on Live Websites. Inspecta lets designers and developers inspect, compare, and visually edit live website styles. Copy styles from Figma, compare CSS, fix mismatches, and export the updated CSS or send is straight to AI code agents for implementation —all without writing code. ✨New: Send text and CSS changes straight to Cursor AI and GitHub Copilot agents. 🔗 Figma Plugin Use our companion Figma plugin to instantly compare styles between Figma and live web pages: Figma to Inspecta: https://www.figma.com/community/plugin/1397609843224212500/figma-to-inspecta-compare-design-to-web ✨ Key Features 🔁 Compare with Figma Copy styles from a Figma element and apply them directly to a live element. Detect mismatched colors using Figma color styles and variables. Replace SVGs (temporary method) from Figma onto live elements. 🧠 Batch Color and Fonts Fixes Fix all your website colors and fonts in one click using Figma suggested colors popup. 🔍 Inspect Elements Hover any element to view its CSS properties: text, colors, spacing, layout, borders, and more. Use the eyedropper to identify colors. Draw guides for more accurate inspection. 🎨 Visual CSS Editing Edit CSS in real-time with a visual interface—just like in your design tools. Easily modify: display, size, spacing, colors, typography, borders, radius, position, box-shadow, and opacity. 🧾 Page Overview Get a full breakdown of used colors (backgrounds, texts, borders) and fonts (family, size, weight, line height). Ideal for design audits and QA reviews. 🧘 Isolate Elements Select any element and hide everything else to inspect and edit in focus mode. 📏 Spacing Overlays & Distance Guides Hover to view padding and margin overlays. Measure distances between elements for pixel-perfect layout refinement. 🖼 Pixel-Perfect Comparison Upload or paste your Figma design as an overlay for accurate side-by-side comparison with the live page. 📤 Export & Share CSS Export all your CSS changes as a single file or copy individual snippets. Share updates directly with developers or use with your Vibe-code AI tool for faster implementation.
