Quick Element

Quickly inspect CSS properties on the fly.

Quick Element: The Ultimate QA, Dev, Documentation, and Presentation Assistant! Stop digging through Chrome DevTools. Quick Element is a lightning-fast, fully customizable DOM inspector, annotation tool, and automation assistant built directly into your browser. Whether you are a QA Engineer writing automated tests, a Frontend Developer debugging CSS, or recording a tutorial for documentation, Quick Element puts the exact data and visual tools you need right at your cursor. Customizable Hover Inspector - Hover over any element on a webpage to instantly reveal the data you care about. - Track Custom CSS & Attributes: Define exactly which properties you want to see (e.g., z-index, max-length, color, font-size) and view them instantly on hover. - Save a profile of select elements and attributes, or just use and edit a pre-made option. - Accessibility (A11y) Data: Quickly check Aria-labels, keyboard focusability, roles, and contrast ratios without opening a single menu. - Layer Traversal: Use keyboard shortcuts to navigate up, down, left, and right through the DOM tree without losing your target. Notation Mode (Perfect for Screen Sharing or Recordings) - Turn any webpage into a live whiteboard. Press Alt + N to freeze page interactions and draw directly on the screen. - Dynamic Anchoring: Your ink physically sticks to the webpage's internal scroll containers, meaning your drawings move naturally as you scroll down the page! - Multi-Tool: Left-click for a precise Pen, right-click for a translucent Highlighter, and middle-click for an Object Eraser. - Scroll-to-Size: Hold Shift and scroll your mouse wheel to dynamically adjust your brush size with a live visual indicator. - Ink Freeze: Press Alt + F to detach your ink from the page and freeze it to your monitor glass. Picture Mode (For Flawless Bug Reports) - Need to send a screenshot to your dev team? Press Alt + Click on any element to open the quick Picture Menu. - Need to hide Sensitive Login information during a recording? Use the "Censor" option to blur, blackout, or blend-in any element on the page, It will stay censored as long as the page is open even when scrolling and clicking around! - Permanently stamp custom-colored Highlights, Outlines, or Arrows directly onto specific elements. - Build crystal-clear bug reports in seconds without needing a third-party photo editor. Quick Testing Tools - Fill Max + Overflow: Instantly fill any text input to its exact max-length limit + 10 extra characters to test validation handling. - Copy Element Properties: One click copies the target's raw HTML and tracked CSS straight to your clipboard. One-Click Automation Locators: - Writing automated tests? Alt+Shift+Click any element to instantly generate and copy smart locators for your framework of choice. - Supports Playwright, Cypress, Selenium, WebDriverIO, and Robot Framework. - Automatically prioritizes robust attributes like data-testid, data-cy, and inner text. - Toggle between Relative and Absolute XPath modes. Take control of your viewport. Tailor your tools. Think faster with Quick Element. **What's NEW?** - Pretty big overhaul as we shift from v.1.0.4 to v.1.1.0(.1)! As I tested each update I was compelled to add more. New version introduces a top logo (which I know everyone wanted), custom profiles, notation mode, censoring, additional test tools, and tons more! Look through the hotkeys and try each one out to see if you find anything that will help you out! Also added a hotfix to include a help file and make some small UI changes.