kfmdddceeniapmonignkaflhpidamhig
Instantly inspect elements and explore CSS properties, XPath, and more. Easily export assets, color palettes, and typography. CSS Peek: Element Inspector helps you instantly inspect any element on a webpage, explore its CSS box model, styles, colors, and typography, and export assets, color palettes, and typography styles in just a few clicks. - Visual box model diagram with color-coded layers and pixel values inside each layer. - Inspect and copy the color palette of the page. - Inspect and copy typography and fonts used on the page. - View and download assets from the webpage. - Manipulate the selected element’s styles in the Manipulate tab, with the ability to persist CSS changes across multiple websites. Each website has its own dedicated storage for saved styles. - A live color picker that allows selecting a color from anywhere on the page and updating the UI preview in real-time. - When an image element is selected, you can drag & drop a new image directly onto it. - The extension allows adjusting CSS of the selected element using keyboard shortcuts. This helps test spacing, sizing, colors, etc., without touching the code. - XPath Locator that finds both absolute and relative XPath selectors for an element, suggests improvements for more stable locators, and generates ready-to-use Playwright and Cypress code snippets. - Smart Mode Inspector enables fast element inspection while hovering, with an integrated accessibility checker. - Ability to toggle the main hover inspector on and off, allowing you to interact with the page (click buttons, navigate, etc.) and then re-enable it to continue inspecting elements. - Accessibility tab where you can find a complete report of the accessibility status of the current page with suggestions how to fix the issues where needed. Lightweight and user friendly.
CSS Scanner Pro
The fastest and easiest way to inspect, copy and analyze CSS styles on any webpage Inspect, copy, and analyze CSS styles on any webpage instantly with CSS Scanner Pro — the ultimate tool for web developers and designers. Instant CSS Inspection Hover over any element to see its complete CSS styles with beautiful syntax highlighting. One-Click Copy Copy CSS, HTML, or both to your clipboard instantly. No manual selection needed. Include Children CSS Extract nested component CSS with one click. Get complete UI components with all their styles. Live CSS Editor Edit and apply styles in real-time. See changes instantly without leaving the page. CodePen & JSFiddle Export Export any component to CodePen or JSFiddle with one click. Perfect for sharing and prototyping. SCSS Export Convert CSS to nested SCSS with auto-generated variables. Copy to clipboard in one click. CSS Variable Inspection See custom properties defined on elements and their resolved values. Track variable inheritance. Specificity Calculator View selector specificity weights in the Source tab. Understand which rules take priority. Animation & Transition Inspector View transitions, animations, and @keyframes rules applied to any element. Box Model Visualization See margin, border, padding, and content dimensions in a visual diagram. Color Palette Extraction Detect all colors used on an element. Click any swatch to copy the color value. Light & Dark Theme Switch the inspector between dark and light themes to match your preference. Optimized Output Clean, compressed CSS with shorthand properties. No bloat, just what you need. Grid Overlay Toggle a visual grid overlay to inspect layouts and alignment. Pin Inspector Mode Freeze the inspector to examine elements without moving your mouse. Parent Element Scanner Navigate up the DOM tree to inspect parent elements easily. Responsive Breakpoint Indicator See the current viewport breakpoint (xs/sm/md/lg/xl/xxl) in the inspector header. Media query badges in the Source tab show which @media rules are active or inactive. Enhanced Keyboard Navigation Switch tabs with number keys (1-4), navigate siblings with Left/Right arrows, quick copy with Ctrl+C, and cycle through CSS sections with Tab/Shift+Tab. Performance Optimized Smooth inspection powered by requestAnimationFrame throttling, stylesheet caching, lazy tab updates, and computed style caching. Multi-language Support Available in English, French, Spanish, German, Portuguese, and Japanese. PERFECT FOR - No data collection - No external servers - No tracking or analytics - Works completely offline - All processing happens locally in your browser 1. Click the extension icon or press Ctrl+Shift+S / Cmd+Shift+S 2. Hover over any element on the page 3. View CSS in the inspector panel 4. Click "Copy" to copy styles 5. Use the Editor tab for live changes 6. Export to CodePen or JSFiddle if needed - CSS Tab: View all computed CSS properties, variables, animations, box model, and colors - HTML Tab: See the element's HTML structure - Source Tab: View original stylesheet rules with specificity badges - Editor Tab: Edit and apply CSS in real-time - Choose selector mode (smart, original, none) - Include/exclude child elements - Copy options (CSS only, HTML only, both) - Grid overlay preferences - Light or dark inspector theme - Language selection - And more...
TweakSync
TweakSync lets you style web elements in real-time from Chrome and sync changes with VS Code for a smooth development experience. TweakSync is a powerful tool designed for front-end developers and web designers who want to streamline their styling workflow. This Chrome extension enables real-time styling of web elements directly within Chrome, allowing you to see changes instantly as you tweak styles. Real-Time Styling: Easily select any element on a webpage and adjust its styles on the fly. With live previews, you can see the impact of your changes immediately, making the styling process more efficient and intuitive. Seamless Integration with VS Code: TweakSync syncs your style changes directly with your VS Code environment. This integration allows you to apply and save your CSS changes effortlessly, ensuring that your development process remains smooth and uninterrupted. Efficient Workflow: By bridging the gap between your browser and your code editor, TweakSync eliminates the need to switch back and forth between tools. This results in a more streamlined workflow, saving you time and effort. Boost Your Efficiency: Save time with instant style updates and seamless integration with VS Code. TweakSync helps you make changes faster and more accurately. Improve Your Design Process: Experience a smoother design workflow with live previews and direct synchronization between Chrome and VS Code. Streamline Your Development: Minimize context-switching and keep your development process focused with TweakSync is real-time styling and VS Code integration.
CSS Inspector
CSS Inspector allows you to instantly view the CSS properties of any HTML element on web pages. The "CSS Inspector" extension allows you to instantly view the CSS properties of any HTML element on web pages. When you hover your mouse over an element, it displays all the CSS code associated with that element in real-time. If you want to perform a more detailed inspection, simply click on the element to view and analyze its CSS properties in an organized panel. Detailed Inspection Panel: Click on an element to inspect and analyze its CSS properties in a clean and organized panel. User-Friendly Interface: With its simple and intuitive design. Works on All Web Pages: Use it on any web page and unlock the full potential of your browser. Who Is It For? Web developers and designers. Curious minds who want to understand the styling structure of web pages. Discover the styling secrets of web pages with CSS Inspector and speed up your development process!
CSS Seeker
Extract, Edit, and Convert CSS Smarter with CSS Seeker. Grab any CSS, including pseudo-classes. Convert to Tailwind in one click. Edit styles live, preview responsive layouts, highlight elements, and navigate the DOM effortlessly — all inside a Chrome SidePanel. No more inspector headaches. Just clean, fast, and efficient styling. Key Features of CSS Seeker: -Effortless CSS Copying: Instantly grab element’s CSS with a simple right-click. No digging, no hassle. -Streamlined Inspection: Skip tedious DOM hunting. Inspect, extract, and copy in one clean, intuitive step. -Live CSS Editing & Adding: Edit existing CSS, add new rules or pseudo-classes (:hover, :focus, etc.) on the fly, and see the results live. -Live Responsive Preview: Resize the viewport directly from the side panel and test responsive breakpoints in real time. -Element Highlight & DOM Navigation: Instantly highlight elements on hover, and smoothly navigate to the previous or next DOM element. -Measurement: Quickly measure element dimensions and spacing directly on the page. Build responsive, modern websites faster and more efficiently. Try CSS Seeker free for 3 days—pay only if you like it!
