geppdhinkdhghpljgghlghlnemheooob
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!
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.
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
HTML Visual Validation
HTML Visual Validation gives you information about the html elements, live, on page. It makes easy to inspect the structure of a page with no need to open the browser console. Just select the type of html tag to outline, on page, and to display a label with basic info. - List the most common html tags - Get info about the tittle and description tags - Display tags id and class attributes - extra info: “alt” attribute value - extra info: tells you if it’s an internal or external link, or a javascript call, and if the “target” attribute is set - Mouse over a tag label to bring it to front *** NEW FEATURES *** - Tag selector is now sensitive to tags available on the page - New "DOM Tree" panel, wich can be used with the tag selector - Click on the tag in the DOM Tree to scroll to the element on the page
SEO Elements Checker
Identify on-page SEO elements on any website. Elevate your website's SEO game with the RBBI SEO Elements Checker! This user-friendly Chrome extension is designed to quickly and efficiently identify essential on-page SEO elements on any website. With just a single click, gain insights into the following: Page Title: Check the length and optimization status of your page title. An optimized title can significantly impact your search engine rankings. Meta Description: Review your meta description's length and optimization status. A well-crafted meta description can improve click-through rates from search engine results. Canonical URL: Ensure that search engines are indexing the correct version of your page. H1 Tags: Identify the number of H1 tags and view their content. A clear and relevant H1 can enhance user experience and SEO. Page Word Count: Understand the depth of your content at a glance. Robots Tag: Ensure that search engines can correctly crawl and index your page. Page Language: Confirm the language setting of your page for better regional SEO. Additionally, the extension provides visual indicators for optimization, helping you quickly identify areas of improvement. Whether you're an SEO professional or just getting started, the RBBI SEO Elements Checker is a must-have tool in your arsenal.
