objclaakmmcfcehakojonglfgajokbon
Hover to inspect CSS properties of any element. Ideal for developers debugging and optimizing web styles. Element Inspector Hover to Instantly Reveal CSS Properties & Copy Styles Like a Pro! A must-have tool for front-end developers, designers, and debuggers. Effortlessly inspect element styles, copy full CSS rulesets, and optimize web layouts—no DevTools required. Perfect for analyzing complex sites, frameworks, and iframe-embedded content. Key Features: ✅ Real-Time CSS Inspection Hover over any element to instantly see its ID, classes, and computed styles. Visual highlight shows exact boundaries of hovered elements. ✅ One-Click CSS Code Export Copy an element’s full CSS ruleset (including inherited properties) with a single button. Paste directly into your code editor for rapid prototyping or debugging. ✅ Iframe & Dynamic Content Support Works seamlessly inside embedded iframes and AJAX-loaded components. ✅ Keyboard Shortcuts Toggle inspection mode instantly with Ctrl+Shift+S (customizable via Chrome settings). ✅ Persistent Preferences Remembers your activation state across sessions and pages. ✅ Zero Data Collection All processing happens locally—no tracking or external servers. Why Developers Love It: Speed Up Debugging: Identify layout issues faster than DevTools’ manual element picker. Simplify Collaboration: Share precise CSS rules with team members via clipboard. Lightweight: Uses minimal memory compared to full DevTools sessions. Install now and supercharge your CSS workflow! 🛠️
SelectorsHub
Locators Plugin to Auto Generate and Verify Playwright Locators, XPath & CSS Selectors. SelectorsHub - Auto-generate Playwright Locators, XPath & CSS Selectors SelectorsHub is a powerful developer tool that automatically generates and verifies Playwright locators, XPath, and CSS selectors for web automation testing. Key Features: 1. Auto-generation: Instantly generates multiple selector types including native Playwright locators, XPath, CSS selectors, IDs, names, and more. 2. Advanced element support: Works seamlessly with iframes, Shadow DOM, SVG elements, dynamic elements, dropdowns, and complex UI components. 3. Smart suggestions: Auto-suggests attributes, text values, and occurrences to help you build selectors faster—no more copying and pasting from the DOM. 4. Error detection: Provides clear error messages indicating what's wrong with your XPath or CSS selectors. 5. Element highlighting: Automatically highlights matching elements and scrolls them into view for easy verification. 6. XPath Healing: Verify all the xpath in one shot. 7. Locators Page: Generate Locator Page in one go. How to Use: 1. Open Chrome DevTools (F12 or right-click > Inspect) 2. Navigate to the SelectorsHub tab in the DevTools sidebar, or click the SelectorsHub icon in your browser toolbar 3. Inspect any element to automatically generate all selector types 4. For Playwright locators, click the "Playwright Selectors" button, then inspect the element 5. Type or edit selectors in the input box—smart suggestions will help you complete them quickly 6. Press Enter to verify and highlight all matching elements on the page Perfect for: a) QA Engineers and Test Automation professionals, b) Web developers working with Playwright, Selenium, Cypress, or other testing frameworks c) Anyone who needs reliable, maintainable element selectors
CSS Debugger
Instantly debug CSS layouts by adding colorful outlines to HTML elements. Easily identify and inspect elements with a simple click. This extension, is designed to simplify CSS debugging and layout inspection. It instantly adds colorful outlines to HTML elements, making it easy to visualize and identify different elements on a webpage. The extension solves the common problem of struggling to understand the structure and layout of a website. Instead of manually inspecting elements in the browser's developer tools, this extension provides a quick visual overview of the page's underlying structure. When the extension's icon is clicked, it injects a script into the current tab that toggles the CSS outlines. The script uses predefined color mappings for different HTML elements, and it dynamically generates and injects CSS rules to apply the outlines. It functions similarly to the old Pesticide extension but is compatible with Manifest V3. The source code contains no third-party dependencies. 🌐 Open source repository: https://github.com/aydgn/css-debugger-extension
UI Inspector - Visual CSS Editor
Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging. A Visual CSS Editor for the Browser Elevate your web development and design workflow with UI Inspector, a powerful Chrome extension that lets you inspect, edit, and style any web page visually and in real-time. Skip the hassle of diving into DevTools and make instant adjustments directly on the page. With UI Inspector, you can: - Inspect elements — activate the extension and click on any element to view its attributes. - Edit attributes — modify styles in the visual editor and see changes in real time. - Control typography — adjust font family, size, weight, line height, and letter spacing. - Configure layout and spacing — set margins, paddings, display properties, and alignment. - Enhance backgrounds and shadows — apply custom colors, gradients, background blurs, and shadow effects. - Customize borders — adjust border width, style, color, and radius. - Fine-tune appearance — control opacity, blend modes, and transforms like rotation. - View all changes — see a list of every element you've updated in one place. - Copy CSS — view and copy the compiled CSS of your changes instantly. Unlock UI Inspector PRO and: - Apply changes globally — use the sensitivity slider to automatically apply style changes to similar elements across the page. - Style presets — save any element as a reusable preset and apply it across any website with a single click. - Export as Tailwind, SCSS, or JSX — copy your changes in the code format your project needs. - Export screenshots — capture high-resolution PNG screenshots of individual styled elements. - Export to GitHub — generate a GitHub issue with your design changes compiled to CSS. Who Is UI Inspector For? Web Developers: - Accelerate front-end development: quickly identify and fix layout or styling issues by editing elements on the fly. - Simplify CSS debugging: bypass DevTools with an intuitive, visual editor. - Export production-ready code: copy changes as CSS, Tailwind, SCSS, or JSX directly into your codebase. Web Designers: - Real-time design validation: adjust and perfect designs in the browser to ensure pixel-perfect implementation. - Bridge design and development: collaborate more effectively by directly tweaking live pages. - Save and reuse presets: build a library of reusable styles and apply them consistently across projects. 1. Activate the Extension: click the UI Inspector icon in your browser toolbar or press Alt/Option + Shift + I. 2. Inspect and Edit Elements: hover over any element to select it and instantly view its adjustable styles. 3. Modify Styles Visually: use the intuitive interface to change typography, layout, spacing, backgrounds, borders, shadows, and more. 4. Save and Apply Presets: create style presets for consistent design and apply them to any element on any site. 5. Export and Share: copy CSS in multiple formats, capture screenshots, or export changes as a GitHub issue. Compatible with any Chromium browser that supports the Side Panel API. For best results, ensure your browser supports all required APIs. If installation issues arise, update your browser to the latest version and try again.
Font Finder
An easy-to-use font inspector to get CSS styles of the selected element FontFinder is created for designers, developers, and typographers. It allows a user to analyze the font information of any element and copy any pieces of that information to the clipboard. Font Finder examines all the selected characters to detect the font used to display this particular character. 1. Analyze any font on the active page. 2. Copy any piece of the element's information to the clipboard 3. Any active element can have any piece of the font's options (such as color, size, or family) adjusted inline Access these options by right-clicking the context menu over the selected text or right-clicking on the page and inspecting the element. Information Captured: 1. Font color (RGB and HEX) 2. Background color (RGB and HEX) 3. Font family (including actually rendered font!) 4. Font size 5. Line height, vertical alignment, letter, and word spacing 6. Font weight, style, variant 7. Text transform, decoration, align and indent 8. Element's type, class, and ID 9. Displays remote and local tags next to the rendered font Tools: Replace or change font family. Use custom fonts. Get the list of all fonts in the current frame. Notes: You can change the window opening mode to embedded mode from the right-click items over the toolbar button. This mode helps use the extension in full-screen mode.
