https://github.com/metaory/live-css-queries
Live REPL for CSS selectors.
https://github.com/metaory/live-css-queries
chrome-extension css css-selector css-selectors developer-tools javascript pin productivity queryselector queryselectorall repl vanilla-js
Last synced: 11 days ago
JSON representation
Live REPL for CSS selectors.
- Host: GitHub
- URL: https://github.com/metaory/live-css-queries
- Owner: metaory
- License: mit
- Created: 2026-05-05T20:43:20.000Z (about 1 month ago)
- Default Branch: master
- Last Pushed: 2026-05-22T07:28:59.000Z (21 days ago)
- Last Synced: 2026-05-22T15:30:22.919Z (21 days ago)
- Topics: chrome-extension, css, css-selector, css-selectors, developer-tools, javascript, pin, productivity, queryselector, queryselectorall, repl, vanilla-js
- Language: JavaScript
- Homepage:
- Size: 240 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Live CSS Queries
See live CSS selector results with instant highlights
Inspect matches in a focused Side Panel while you refine selectors in place
---
## Why
Selector work on a real DOM is iterative; most DevTools flows are one-shot.
### Existing approaches and their pain points
| Approach | Limitation |
|---|---|
| DevTools → **Add style rule** (e.g. `border: 1px solid red`) | Fragile scratch test; DOM edits/typo reset work. No match count/list. |
| DevTools Console → `document.querySelectorAll(...)` | No on-page marks; grind through `NodeList` in Elements. Re-type each pass. |
| Inspect → **Copy selector / XPath** | Deep paths; unstable auto-generated `id`s on framework remount. Rarely ship-ready. |
### Core problems
- **Volatile ids** · copied selectors often break across framework remounts.
- **Brittle paths** · generated chains ≠ the query you maintain in CSS/JS tests.
- **Single-shot tooling** · little on-page iterate → tighten loop without leaving the DOM.
## What it does
Docked bottom input:
- Highlights on each keystroke; Side Panel lists tag, id, classes, attrs, text snippet (**150** listed, **500** highlighted cap).
- Row click → scroll + focus.
- Invalid selectors → inline error; prior state intact until corrected.
## Install (unpacked)
- Chrome → `chrome://extensions`
- Enable **Developer mode**
- **Load unpacked** → select this directory
## Usage
`chrome://extensions/shortcuts` · **toolbar icon** (Live CSS Queries + Side Panel)
| Action | Shortcuts label | Default |
| --- | --- | --- |
| Live CSS Queries + Side Panel | Toggle Live CSS Queries (+ Side Panel) | Toolbar only — bind on Shortcuts |
| Input only | Toggle selector input | **Alt+S** |
## Limits
- Side Panel list cap **150**; highlight cap **500** (see above).
## Permissions
MV3: `activeTab`, `scripting`, `sidePanel`; `host_permissions`: ``.
## License
[MIT](LICENSE)