Pathy

About

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.