Pathy

Pathy — Fast selectors for DevTools. Get the Full CSS Path, Full CSS Path (from nearest ID), Firefox-Style Path (Copy Path), Optimized Selector, XPath, and Playwright Locator for the selected element — with one-click copy. 👉 Full description Pathy adds a compact sidebar to Chrome DevTools that instantly shows multiple selector formats for the currently selected node. Whether you style, scrape, or test: copy the selector you need and keep moving—clean, fast, and reliable. 👉 Features - Full CSS Path - Full CSS Path (from nearest ID) - Firefox-Style Path (Copy Path) - Optimized Selector - XPath - Playwright Locator (ready to paste into tests) - One-click Copy buttons for every output - Helpful context (tag, id, classes, text snippet) - Lightweight: no bloat, no external requests 👉 Keyboard shortcuts F12 / Ctrl + Shift + I (Open DevTools on Windows/Linux) ⌥ + ⌘ + I (Open DevTools on macOS) 1 — Copy Full CSS Path 2 — Copy Full CSS Path (from nearest ID) 3 — Copy Firefox-Style Path (Copy Path) 4 — Copy Optimized Selector 5 — Copy XPath 6 — Copy Playwright Locator Live pick on page: Ctrl (Win/Linux) / ⌘ (macOS) + Left-Click Toggle “Follow Ctrl/Cmd + Left Click (live)” in the Pathy panel to update the selection directly from the page. 👉 How to use 1. Open Chrome DevTools. 2. Select a node in the Elements panel. 3. Open the Pathy sidebar on the right. 4. Use Copy or the shortcuts above. 👉 Permissions - storage — saves simple UI preferences. - clipboardWrite — enables copy buttons. 👉 Privacy Pathy does not collect or transmit any data. No analytics, no remote calls. 👉 Changelog 1.0.0 – Initial release: Full CSS Path, Full CSS Path (from nearest ID), Firefox-Style Path (Copy Path), Optimized Selector, XPath, Playwright Locator, one-click copy.