Media
2 items
Description
Tooling for designers to run quick page checks. Design Team Tool — HTML Element Search for Chrome The fastest way for designers and developers to find, inspect, and highlight any HTML element on any web page — right from your browser toolbar. 🔍 Powerful Multi-Scope Search Stop hunting through DevTools. Design Team Tool lets you search across 9 different element attributes simultaneously: Content — visible text inside elements Placeholder — input and textarea hint text Alt — image alternative text Class — CSS class names ID — element identifiers Name — form field names Aria Label — accessibility labels data-test-id — QA automation attributes data-cy — Cypress test selectors Toggle any combination of scopes to precisely narrow down what you're looking for. Search multiple phrases at once by separating them with a semicolon ;. 🏷️ Filter by HTML Tag Target your search to exactly the element types you care about. Use the Limit to tags mode to restrict results to specific HTML tags (e.g. only <button>, <input>, <a>), or switch to Exclude tags mode to strip out noise and focus on the content that matters. Clear the tag filter at any time to search the entire document. ⚙️ Flexible Match Options Choose how strictly your search terms are applied: Exact match — finds elements containing the whole word or phrase Partial match — finds elements where your text appears as a substring Case sensitive toggle — opt in when capitalisation matters ⚡ Live Search — Real-Time Results Enable Live Search and the extension automatically re-runs your query whenever: The page's HTML changes (e.g. a modal opens, a list loads, a component re-renders) You switch to a different browser tab A built-in 10-second cooldown prevents result spam on rapidly-changing pages. Live Search stays active only while the popup is open — close it and monitoring stops instantly. 👁️ One-Click Element Highlighting Every result comes with a Highlight button that scrolls the page to the element and visually marks it — no need to manually hunt for it in the viewport. Ideal for verifying QA selectors or checking accessibility attributes on deeply-nested components. 📋 Copy & Export Results Copy a single element — grab the raw outerHTML of any result to your clipboard with one click Copy all results — export the entire result list (with selectors and match reasons) as formatted text Export to CSV — download all results as a .csv file for sharing with your team, filing bug reports, or tracking design debt. 📊 Smart Results Panel Results are more than a flat list — they're organized for clarity: Grouped duplicates — identical elements (same outerHTML) are collapsed into a single row with an expandable instance count badge, so you instantly see how many copies exist on the page Match reasoning — each result tells you exactly why it matched: which attribute (Content, Class, Aria label…) and what value triggered the hit CSS selector — every result displays its unique CSS selector so you can reference it directly in code or tests Sort by tag or match scope — reorder results to fit your workflow Hide unreachable elements — filter out elements that can't be scrolled into view, keeping your focus on actionable results Virtual scrolling — handles hundreds of results without slowing down the popup 🔒 100% Private — Zero Data Collection Everything happens locally in your browser. No search queries, no page content, no results, no user data of any kind is ever transmitted to any server. There are no analytics, no crash reporters, no third-party services. The extension has no backend. Closing the popup discards all results immediately — nothing is persisted to storage. The <all_urls> host permission is requested on-demand the first time you search and can be revoked at any time via Chrome's extension settings. 🎯 Built for Design & QA Teams Whether you're a designer checking that accessibility labels are in place, a developer verifying test selectors before a release, or a QA engineer auditing element attributes across a page, Design Team Tool gives you the inspection power of DevTools in a focused, distraction-free popup.