agipkaehdbpflgbdagggncaoblbfcmfp
Extract HTML & CSS from any element with live preview, smart selector simplification, and syntax-highlighted editor A powerful DevTools extension for web developers and designers to extract clean, production-ready HTML and CSS from any DOM element. Features include: • Live preview with responsive breakpoints • Smart CSS selector simplification • Syntax-highlighted code editor • @font-face rule extraction • One-click copy to clipboard • Customizable extraction settings Perfect for copying component styles, debugging layouts, and rapid prototyping. 2. Navigate to HTML/CSS Tab First, make sure you're on the Elements tab in DevTools. Then, look for the "HTML/CSS" tab in the DevTools panel. It may be in the overflow menu (») if you have many extensions installed. 3. Select an Element You can select elements in several ways: - Method 1 - Direct Selection: In the Elements tab, click on any HTML element in the DOM tree to select it, then switch to the HTML/CSS tab to view the extracted code - Method 2 - Element Picker: Click the element picker icon (cursor with square) in the top-left corner of DevTools, then click on any visible element on the webpage. This will automatically select it in the Elements tab - Method 3 - Right-click Inspect: Right-click on any element on the webpage and select "Inspect" from the context menu. This will open DevTools with that element already selected Tip: After selecting an element using any method, make sure to switch to the "HTML/CSS" tab to see the extracted code and live preview. 4. View Extracted Code The extension will automatically extract and display the HTML and CSS for your selected element, along with a live preview. 5. Copy or Edit Edit the code in the syntax-highlighted editor, then click the copy button to copy it to your clipboard.
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
HTML Viewer
Use HTML Viewer to view HTML with an online page-code preview and CSS inspector for website markup analysis 🧩 HTML Viewer is a powerful and intuitive tool designed to make html view tasks simple, fast, and accessible. Whether you're exploring page structure, learning how to view html code in chrome, or searching for an easy html viewer online, this extension gives you a seamless way to view html and understand any webpage’s markup instantly. One of its core strengths is reliability: the extension works on all websites, provides stable state persistence, and includes an instant toggle to enable or disable functionality. This makes it perfect for users who need a flexible online html viewer and a practical Web markup viewer for daily work. Our html viewer also answers the common question how to view html code of a website by offering a detailed element information panel. This panel shows tag names, attributes, and computed styles, acting as both a html css viewer and a style-and-markup viewer with clean syntax formatting. It’s ideal for anyone looking for a code viewer html, html and css viewer, or online view html solution. 📌 The information panel is designed with: Developers and learners benefit from precise style inspection through a built-in CSS display. Default and empty values are filtered out, helping you view html source more clearly. This structured approach transforms the tool into a convenient html source viewer, Website structure viewer, and Online document-code analyzer. 🔍 DOM navigation is another highlight: ➤ Parent element navigation ➤ Full children list with previews ➤ Hover-based child highlighting ➤ Click-to-navigate DOM nodes ➤ Auto-scroll to selected elements For those who want more control, html viewer includes a live CSS editing system. It allows inline style modifications, double-click editing, and real-time updates. This makes the extension a practical Site code inspection tool and a lightweight alternative to complex devtools. 🛠️ CSS editing capabilities include: ▸ Add new properties ▸ Remove existing properties ▸ Apply live changes instantly ▸ Use Enter/Escape shortcuts ▸ Update styling with no reload The extension also serves as an online html view utility for users who need to quickly inspect markup without hidden formatting. Combined with custom scrollbars, smooth animations, and intuitive visual feedback, it becomes a polished Browser-based layout inspector suitable for beginners and advanced users alike. 🌐 The clean gradient theme and UI refinements make this webpage preview utility not only functional but pleasant to use. Whether you need a markup code display tool, a quick Web source preview service, or are simply learning How to inspect a site’s code, this tool makes the process straightforward. With stable on/off switching, persistent preferences, and compatibility with all websites, html Viewer becomes a dependable companion for everyday development. The extension simplifies viewing a webpage’s source code while staying lightweight, fast, and user-friendly. 📝 From students exploring online html viewer options to professionals who need consistent view html capabilities for design audits, html viewer provides a complete workflow. Its balanced feature set helps you understand structure, refine styling, and navigate the DOM with ease. Upgrade your workflow today with an extension that brings clarity, precision, and efficiency to every page you inspect 🚀
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
CSS Selector Capture Pro
Generate a copiable CSS Selector with a mouseover without Devtool Clean, simple and intuitive to use, accompanied with these exclusive features. ✓ Copiable and tweak-able Selector ready to use in CSS/JavaScript ✓ Highlights of elements which match the Selector ✓ Total matches based on the Selector within Viewport context ✓ The choice of Concise or Verbose selector ✓ Minimal interference with the page * Short version: - Enable the App, Use "CTRL" Key to lock／unlock the selector highlight in position and click the Copy button to copy the selector. - If needed, click on the selector path to tweak the selector before copying. - Use "ESC" key to exit the App * Beware the extension does not support the following contexts: - shadow DOM (suggestion: use chrome devtool since you will be traversing down the shadow root anyway) - iframe (suggestion: to open the iframe URL in new tab and use the extension) ≡ Where would this extension be useful * The extension would typically suit the use of Front End Development, End to End testing such as Selenium as well as Data Scraping where visually identifying a target, matches and getting the CSS selector are needed. * If you do find this extension useful, please support it by simply giving it a good review and that will help others find it. * The extension does NOT collect any data or send data to third party. * 2.4.0 (2024.06.06) - Optimization for highlights, scroll and resize * 2.3.0 (2021.07.15) - Optimization for concise selector * 2.2.0 (2019.03.23) - Added a User Guide Link in Extension Icon Popup * 2.1.0 (2019.03.21) - Added a shortcut hotkey (CTRL) for locking toggle of the overlays * 2.0.0 (2019.02.25) - Optimization for concise selector (i.e. shorter) - Adjustment of selector background opacity when trigger button for Settings Dialog is on top and user hovers it * 1.0.3 (2018.10.15) - Optimization for selector retrieval
