eliefgfefbfnedoenabnfpfijkloablb
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! β‘
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
PageTrail
This Extension tracks your daily surfing activity PageTrails is designed to enhance productivity by tracking time spent on various websites. It records active browsing time, aggregates it at the domain level, and provides a concise summary of web activity. This extension is ideal for users seeking to monitor their web usage patterns and optimize their online time.
Inspect CSS
The easiest way to inspect and edit CSS Features: π Get CSS Properties from any element by selecting it βοΈ Get and edit element attributes π· Download website assets β¨οΈ Add your custom CSS to the website π¨ Get the color palette of the website π§ DOM Navigation π― Color picker
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.
