mbmenapkpcfnolnjabehganjkpdhlbee
Easily find and copy Squarespace CSS selectors to help customize your website Squarestylist Selector Helper is the fastest way to find CSS selectors for your Squarespace website. Simply click any element, copy the CSS selector, and start styling with ease. KEY FEATURES: ✨ Instantly find selectors for key elements on any Squarespace website ✨ Optimized to show the most useful Squarespace selectors ✨ Copy selectors instantly without opening browser inspector ✨ Get visual previews of elements affected by each suggested selector ✨ Find selectors for key inner elements aside from block and section IDs ✨ Access section and page IDs to limit the scope of customizations One click reveals the selector you need, no more repeatedly opening the browser inspector. Perfect for: ✨ Squarespace website owners who want to customize their website ✨ Website designers working with Squarespace sites who wish to speed-up their workflow ✨ Anyone looking to style specific elements without learning complex inspector tools
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
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.
CSS Pully – Font & Color & Style Inspector
Font & CSS Detector - CSS Pully extracts colors, fonts, shadows, and styles from any webpage. Perfect for designers & developers. 🚀 Instantly inspect fonts, extract colors, analyze CSS styles, and download all images from any website with CSS Pully – your all-in-one web design extension for Chrome. Perfect for frontend developers, UI/UX designers, marketers, and content creators looking for fast, accurate, and powerful tools to reverse-engineer websites and speed up their workflow. 🔥 CSS Pully is a complete solution for inspecting website fonts, grabbing colors, copying CSS styles, downloading website images, and auditing layout properties – all in one click. 🎨 Features include: 🔤 Detect all fonts used on a web page, detect Google Fonts 🎯 Extract color palettes 📐 View detailed typography information – font size, line-height, font weight, and spacing 🌈 Get all CSS shadows, borders, border radius, margins, paddings, and layout sizes 👁 Instantly highlight and inspect styled elements directly on the page 📋 Copy full CSS styles of selected elements in one click 🖼 Collect all images from a website instantly 🧩 Filter downloaded images by file type – PNG, JPG, SVG, WebP, and GIF 📦 Download all images in a single ZIP file ⚙️ No coding skills needed – user-friendly interface for designers and non-tech users 💡 Lightweight and fast – does not slow down browser performance 🌍 Works on all types of websites including SPAs and dynamic web apps 🧪 Perfect for design audits, reverse engineering, debugging CSS, creating style guides, or collecting brand assets ✅ Benefits of using CSS Pully: – All-in-one Chrome extension for font detection, color extraction, and CSS inspection – Super easy to use, even for beginners – Pixel-perfect accuracy for copied CSS values – Saves time by removing the need to manually inspect code – Supports inspection of responsive layouts, font sizes, and visual spacing – Enables one-click image downloader with file-type filters and ZIP export – Ideal tool for website analysis, frontend debugging, and UI style copy – Compatible with Chrome, Edge, Brave, and other Chromium-based browsers 🔧 Use cases: – Copy font styles and colors from competitor websites – Collect assets to build style guides and UI kits – Extract CSS to recreate design elements in your project – Download all site images for marketing or content reuse – Debug and fix inconsistent spacing, font sizes, and design issues – Learn and practice design systems from real websites – Speed up handoff between designers and developers 🔹 Can I download images from websites? 🖼 Yes! You can collect all images on a page and download them in a single ZIP file. 🔹 Can I filter image downloads by file type? 📁 Yes, filter by PNG, JPG, SVG, WebP, and more. 🔹 Does it work with all websites? 🌐 Yes, it works on static pages, SPAs, and all modern websites. 🔹 Can I use it offline? 📴 Basic features like CSS inspection work offline, but font and color analysis may require internet access. 🔹 Will it slow down my browser? ⚡ No, CSS Pully is lightweight and optimized for performance. 🔹 Can I copy CSS styles? 📋 Yes, one-click style copy is supported for any inspected element. Download CSS Pully now and unlock the ultimate toolkit for web design inspection. Instantly detect fonts, extract color palettes, analyze CSS properties, collect and download images, and improve your productivity across all design and development tasks. CSS Pully is the must-have Chrome extension for any designer, developer, or creative professional working on the web.
CSS Scanly - Copy CSS | Tailwind & Bootstrap
Copy CSS properties from any web element with CSS Scanly. Supports Tailwind & Bootstrap, Helpful for developers and designers CSS Scanly: Inspect, Analyze, and Edit CSS in Real-Time Discover the power of advanced CSS inspection and editing with CSS Scanly, the must-have tool for web developers, designers, and CSS enthusiasts. This Chrome extension transforms how you interact with web page styles, providing an intuitive and feature-rich environment for exploring and manipulating CSS on any website. Hover over any element to instantly view its applied styles See computed styles, including those from stylesheets and inline CSS Explore pseudo-class styles etc. without leaving the page Edit CSS properties on-the-fly and see changes immediately Experiment with styles without affecting the original page Perfect for prototyping and troubleshooting design issues Automatically detects and highlights Bootstrap and Tailwind CSS classes Gain insights into how popular frameworks are used on different websites Pin multiple CSS information boxes for easy comparison Ideal for analyzing styles across different elements simultaneously 5. Copy-to-Clipboard Functionality Quickly copy any CSS styles with a single click Streamline your workflow by easily transferring styles to your projects View applied media queries for responsive design analysis Understand how styles change across different screen sizes Intuitive control bar for easy navigation and tool management Keyboard shortcuts for enhanced productivity Pause and resume the scanner as needed Move the control bar to your preferred location on the screen Perfect For: Web Developers seeking to debug CSS issues Designers looking to analyze and draw inspiration from other websites Students learning web design and CSS QA testers verifying style implementations Anyone curious about the styles behind their favorite websites Elevate your web development and design process with CSS Scanly. Download now and start scanning the world of CSS like never before!
