Element Picker — CSS Selector Tool
jonathangedye.com · Developer Tools
Media
1 item
Description
Click any element on a page to see its CSS selector. Nothing saved, nothing sent anywhere. Click any element on a webpage and instantly see its CSS selector — no inspecting the DOM by hand. Hover to highlight, click to select. The selector is generated using the same priority order a careful developer would: a stable id first, then common data-testid/data-cy attributes, then filtered class names (skipping build-generated hashes that break on every deploy), falling back to a structural path only when nothing stable is available — and it tells you which strategy it used and flags anything fragile or too broad a match. Click Copy to grab it. That's the whole tool. Nothing is saved, nothing is sent anywhere, and there's no setup — click the icon and go. Useful for QA, scraping, browser automation, or just understanding a page's structure faster than opening devtools.